スポンサードリンク



こんにちは。sinyです。

この記事はJavaScript学習の復習のための備忘録として記載しています。

JavaScript初学者向けに抑えておいた方がよい点やつい忘れてしまいがちな情報をコンパクトにまとめています。

ES2015(ES6)

2015年にJavaScriptの仕様が大きく改訂され、ECMAScript2015(ES6)と呼ばれています。

strictモードについて
  • ブラウザには古いJavaScriptを実行するモードと新しいJavaScriptを実行するモードの2つがある。
  • 新しいモードを実行するにはStrict Modeにする必要がある。
  • <script>タグの直後に'use strict';と記載するとStrict Modeになる。
  • ※ES6に準拠したプログラムではエラー検知機能などが一部機能しなくなる可能性があるのでstrictモードを指定しておいた方が無難。

 

外部jsの読み込み

外部のjavascirptファイルを読み込むには以下のように記載する。

※開始タグと終了タグの間には何も書かない。

基礎構文

 

通常のfor文

javascriptのfor文は以下の通り。
python[ for 変数名 in 配列; ]と比較するとだいぶ違うので備忘のため記載。

for文の書き方
for(let 変数名 of 対象の配列){
    ~処理~
}

 

 

オブジェクトにおけるfor文

オブジェクトに対してfor文を使う場合は、for(let 変数 in オブジェクト変数){~処理~}を使う。

 

forEachによる繰り返し

配列の各項目を繰り替えす場合はforEachを使うとよい。

使い方
配列.forEach(function(item, index) {
  ~処理~
});

具体例として、以下のthumbクラス要素をすべて取得してforEachでループする場合

 

クラスthumb要素をすべて取得する。

取得した要素に対してforEachでループ

上記例だと、ループするたびにitemには[object HTMLImageElement]が、indexには要素のインデックス番号(0,1,2...)が格納される。

data-***属性の使い方

htmlタグ内には「data-<好きな定義>」という形で属性を定義できる。

この属性を定義することでjavaScriptからその値を取得して処理に活用できる。

data-****属性をjavaScriptから取得する方法
取得した要素.dataset.<data-****>属性につけた「****」を指定。

<タグ data-image="test1.png">
上記例だと「取得した要素.dataset.image」と記述することで値「test1.png」を取得できる。

 

配列のメソッド

配列に対するメソッド一覧
  • 配列の変数名.pop() ・・・配列の最後のデータを削除
  • 配列の変数名.push(データ)・・・配列の最後に「データ」を追加
  • 配列の変数名.shift()・・・配列の最初のデータを削除
  • 配列の変数名.unshift(データ1,データ2)・・・配列の最初に「データ1,データ2」を追加する

 

テンプレート文字列

バックティック「」で囲んだ文字列のことを「テンプレート文字列」という。
テンプレート文字列を使うと文字列中に変数を組み込むことができる。

 

これで以下のようなli要素を生成できる。

<li>Python学習</li>
<li>Django学習</li>
<li>ディープラーニング学習</li>
<li>Javascriptの学習</li>

  • 「const li = + ${item} +;」ではなく「const li = ${item}`;」と書く(+は不要)。
  • テンプレート文字列では、変数以外にも関数や計算も組み込むことができる。
      →${}の中に関数や数値計算を書けばよい。
  • テンプレート文字列内では普通に改行ができる。

 

要素の追加

ある要素に別の要素を追加する場合にinsertAdjacentHTMLが使える。
document.getElementById('要素').insertAdjacentHTML('挿入位置',挿入する要素);
設定値 挿入位置
beforebegin
取得した要素の開始タグの前
afterbegin
取得した要素の開始タグのすぐ後
beforeend 取得した要素の終了タグのすぐ前
afterend 取得した要素の終了タグの後

 

オブジェクト

オブジェクトのプロパティには値だけでなく関数を設定することができる。

 

obj.addTaxという形でメソッドを実行させることができる。

 

メッセージの表示

 

alertメソッド

単純にメッセージを表示する場合はwindowsオブジェクトのalertメソッドを使う。

 

 

confirmメソッド

確認ダイアログを表示させたい場合はconformメソッドを使う。

 

※戻り値としてOKを押した場合はTrue、キャンセルを押した場合Falseが返ってくるので、以下のようにif文で処理を分岐させることができる。

 

イベント系

onsubmitメソッド

onsubmitイベントは送信ボタンがクリックされた直後で入力内容がサーバに送信される直前に発生する。

取得した要素.onsubmit = function() {処理内容};

注意点
  • イベントに代入する関数には関数名を付けない。
  • 関数にはreturnをつけない。

 

テキストフォームに入力された値を取得する

以下のようなテキスト入力ボックスに入力された値を取得するには以下の順で取得する。

 

  1. フォーム要素を指定(document.getElementById("form"))
  2. フォーム要素のname属性を指定(document.getElementById("form").word
  3. valueプロパティを指定(document.getElementById("form").word.value)

※<input>をはじめとするフォーム部品に入力された値はvalueプロパティに保存されている。

タグの基本動作をキャンセルする

ある要素にイベントが発生するとイベントに代入した関数が実行されるが、その関数にはイベントオブジェクトが渡される。

このイベントには様々なイベントに関する情報がプロパティとして保存されていて、イベントの動作を変更するためのめっそどが含まれる。

その中に1つにpreventDefaultメソッドがあり、これを指定するとタグの基本動作をキャンセルできる。

 

上記の例だと、送信ボタンを押した際に「データを送り、action属性で指定したページに遷移する」処理をキャンセルできる。

Option切り替え時にイベントを発生させたい場合

onchangeメソッドを使う。
例えば、日本語、英語を切り替える選択肢を以下のように定義する。
上記フォームで言語選択肢を切り替えた場合にイベントを発生させたい場合は以下のようにする。

 

 

HTMLの書き換え

 

特定のID名を持つ要素を取得する

特定のID要素を取得するにはdocumentオブジェクトのgetElementByIdメソッドを使う。

document.getElementById('ID名')

 

CSSセレクタで要素を取得する

document.getElementByIdはid属性がないと使えないが、そういう場合はCSSセレクタで要素を取得できるdocument.querySelectorが使える。

document.querySelector('cssセレクタ')という形式で使える。
例えば、<html>タグの部分を取得したいなら、

 

<option value="index.html">日本語</option>を取得したいなら以下のように取得できる。

 

 複数の要素にマッチした場合は最初の要素だけが取得される点に注意
関連メソッド(document.querySelectorAll)
複数の要素を取得したい場合はquerySelectorAllを使う。
document.querySelectorAll(CSSセレクタ名);

 

 

要素のコンテンツの書き換え

 

document.getElementById('ID名').textContent = 文字列;
単に「document.getElementById('ID名').textContent」とした場合は要素のコンテンツ情報を取得する。
※textContentはプロパティ(オブジェクトの状態を表す)なので何も値を設定しない場合は値を取得し、設定値を指定した場合はその値に書き換えてくれる。

htmlタグの属性の書き換え

htmタグの属性値は以下のような方法で書き換えられる。
htmlタグ属性の変更
取得した要素.属性 = 値;
例)<img src="test1.jpg" id ="test">のsrc属性をtest1.jpg→test2.jpgに変更する場合


document
.getElementById('test').src= "test2.jpg";

比較演算子の注意点

条件が一致するか比較する場合は「===」(比較演算子)を使うのが無難。

「==」も2つの値が一致しているか比較する演算子だが以下のような違いがあるので注意。

「===」と「==」の違い
  • 「===」はデータ型を変換しないで左右を比較する。
  • 「==」はデータ型を変換してできるだけ評価結果がTrueになるようにしてくれる。
    ※つまり「==」のほうが予想外に条件一致する可能性が高いので「===」を使うのが無難。

 

Mathオブジェクト

 

Math.random() → 0以上、1未満の値を返す
Math.floor() → 数値の小数点以下の切り捨て
0~10のランダムな整数を生成したい場合

 

その他は以下を参照。

 

 

メソッド系

 

parseInt() → 文字列を整数に変換

演算子のまとめ

演算子 意味
a === b aとbが一致
a !== b aとbが不一致
a < b aがbより小さい
a <= b aがb以下
a > b aがbより大きい
a >= b aがb以上
a && b aかつb
a || b aまたはb
!a not a
i += 1 iに1を足す
i -=1 iから1を引く
a / b a ÷ b
a % b a÷bの余り
a ** b aのb乗
a ++ a+1をaに代入
++a a+1をaに代入

 

Dateオブジェクト

 

メソッド 出力例
new Date()
Mon May 04 2020 16:14:00 GMT+0900 (日本標準時)
getFullYear() 年を取得
getMonth() 月を0~11の数値で取得(1月=0)
getDate() 日を取得
getDay() 曜日を0~6の数値で取得(0が日曜日)
getHours() 時を取得
getMinutes() 分を取得
getSeconds() 秒を取得
getMilliseconds() ミリ秒を0~999の数値で取得
getTimezoneOffset() 時差を取得
setFullYear(年) 年(西暦)を設定
setMonth(月) 月を0~11の数値で設定
setMinustes(分) 分を設定
getTime() 1970年1月1日0時からの時間をミリ秒で取得

 

const now = new Date(); と引数なしで定義すると現在日時を記憶した状態で初期化される。

Dateオブジェクトで日時を直接設定する方法
new Date(年, 月, 日, 時, 分, 秒, ミリ秒)
※月は指定する月-1の数にする必要があるので注意

 

StringオブジェクトとpadStartメソッド

文字数を一定の桁に揃えたい場合に使える。

<文字列>.padStart(揃える文字数, 埋め合わせる文字)

数字を2桁に揃えたい場合は以下のようにする。
これで、2の場合は「02」、12の場合はそのまま「12」が表示される。

 

※なお、Stringメソッドで数値を文字列に変換してからpadStartメソッドにかます必要がある。

プルダウンメニューのHTMLについて

プルダウンメニューは<select>タグで定義し、子要素に選択項目を<option>tぐで定義する。

 

 

ポイント
  • フォーム部品に必要なname属性は<select>タグに追加する。
  • 各<option>にはデータを表すvalue属性を追加する。
  • selectタグのname属性とoptionタグのvalue属性がセットになってサーバに送られる。

 

HTML要素を削除する

HTML要素を削除するにはremoveChild()メソッドを使う。

取得した要素.removeChild(削除したい要素);

例えば、<divid="test1"> ~ </div> を削除したい場合は以下のようなコードになる。

 

jQuery関連メソッド

良く使われるjQueryのメソッド一覧

toggleClass()

toggleClassメソッドは取得した要素に()内のパラメータで指定されたクラス名がなければ追加、あれば削除してくれる。

toggleClass('hidden') → <ul class="hidden">なら削除

toggleClass('hidden') → <ul class="">ならhiddenを追加

hasClass()

hasClass()内で指定したクラスがあればTrue、なければFalseを返してくれるメソッド。

使い方:$('セレクタ').hasClass('クラス名')

findメソッド

findメソッドは$()で取得した要素に含まれる子孫要素のうち()内のセレクタにマッチする要素を取得してくれる。

$('セレクタ').find('.check').addClass('test');
→セレクタにマッチする要素を取得し、checkクラスがあるか確認してあればaddClassでtestクラスを追加する。

おすすめの記事