初級フロントエンドエンジニアが知っておきたい基礎の基礎【Javascript編】

Javascriptとは

JavaScriptは、ブラウザ上で動作するプログラミング言語です。Webページに様々な機能を追加でき、複雑なエフェクトやアニメーション、コンテンツの動的な書き換え、サーバとのデータのやりとりなどができます。

Javascriptの基本

Javascriptの記述方法

Javascriptを使用するには、以下の２つの方法があります。

• HTMLファイルにscript要素入れて記述する方法
• 外部ファイルとしてJavascriptファイルを読み込む方法

Javascriptファイルの作成

Javascriptのファイルは拡張子を「.js」にすることで使用することができます。

演算子

演算子	意味
＋	足す
ー	引く
*	掛ける
/	割る
％	余り
+=	x += 5 –> x = x +5
++/--	x++（xに1が足される）

変数

var 変数名 = “数値、文字列など”;

「=」は代入演算子といって、右側の数値や文字列データを左側の変数に代入するという意味。イコールとは違う。

コメントアウト

単行のコメントアウト

// 単行コメント

複数行のコメントアウト

/*
複数行のコメント
複数行のコメント
複数行のコメント
*/

データ型の種類

• 文字列（string(” “または’ ‘で囲う)）
• 数値（int(整数)、float(浮動小数点)）
• 真偽値（true, false）
• オブジェクト
  • 関数
  • 配列
  • 組み込みオブジェクト
• undefined（何も定義されていない）
• null（何もない）
• NaN（数値ではない(Not a Number)）

文字列

演算子の「+」 を文字列と一緒に使うと、文字列を結合することができます。また、数値と文字列を結合しようとすると文字列として結合します。

mojiretsu = "5" + 5;
// => "55"

エスケープ
\を直前に入れることで特殊文字などを入れることができる

\n　改行　
\t　タブ
\\　バックスラッシュ
\"　ダブルクォーテーション
\'　シングルクォーテーション

文字列変換（.toString()）

num = 100;
moji = num.toString();
console.log(moji); // => "100"

関数

関数とは、処理に名前をつけてまとめたもの。関数には2種類ある。

• Javascriptで用意されている関数
• 自作の関数

関数の基本
引数と戻り値はなくても良い

function 関数名(第1引数, 第2引数, ...) {
　　処理;
　　return 戻り値;
}

関数の呼び出し方

 関数名();

匿名関数
関数自体に名前を付けない関数。無名関数とも呼ばれます。

function(第1引数, 第2引数, ...) {
  return 戻り値;
}

配列

同じような値を順番に並べたものを配列と呼びます。インデックスは0から始まり、要素を取り出したり、上書きすることができます。

var prefecture = ["kanagawa", "chiba", "saitama"];
console.log(prefecture[0]); // => kanagawa

prefecture[0] = tokyo;
console.log(prefecture); // => ["tokyo", "chiba", "saitama"]

ループ（for文）

配列とループは相性がよく、配列の要素をfor文を使って取り出すことができます。

for (初回だけ実行する処理; ループ継続条件; 毎ループ後の処理) {
  毎ループごとに実行する処理
}

例

var numbers = [1,2,3,4,5];
for (var i = 0, i > numbers.length(), i++){
　console.log(numbers[i]);
}
// => 1
// => 2
// => 3
// => 4
// => 5

if文

条件分岐のifを使うと、条件に応じて処理を分岐することが出来ます。

if ( 条件 ) {

   // 条件を満たす場合（true）に実行される処理

} else {

   // 条件を満たさない場合(false)に実行される処理

}

例

var test = 80;

if (test > 60){
　console.log("合格");
} else {
　console.log("不合格");
}
// => 合格

オブジェクト

オブジェクトはプロパティでアクセスできるデータのことです。

var traffic_light = {
  blue: "go",
  yellow: "slow down",
  red: "stop"
}

console.log(traffic_light.blue); // "go" ドット記法(変数を使ってプロパティにアクセス出来ない)
console.log(traffic_light["blue"]); // "go" ブラケット記法

非同期処理

setTimeoutを使うと指定した時間後に処理が実行されます。

setTimeout(function(){
　console.log("遅れてコメント");
}, 1000);

// => １秒後にコンソールログが表示される

組み込みオブジェクト

Arrayオブジェクト

• lengthプロパティ（要素数を取得する）
• sliceメソッド（指定した要素を取り出す）
• pushメソッド（新しい要素を追加する）
• forEachメソッド（要素を順番に処理する）
• mapメソッド（要素を順番に処理して、新たな配列を返す）
• filterメソッド（要素を条件によって選別して、新たな配列を返す）

Objectオブジェクト

• Object.keyメソッド（プロパティ名を新たな配列として返す）

Stringオブジェクト

• sliceメソッド（指定した文字列を取り出す）

基本的な３種類のポップアップ

alert
ボタンを押すとダイアログにメッセージが表示されます。

See the Pen basic-javascript-alert by Nori (@ysnoritnk) on CodePen.

confirm
ボタンを押すとダイアログに確認メッセージが表示されます。

See the Pen basic-javascript-confirm by Nori (@ysnoritnk) on CodePen.

prompt
ボタンを押すと入力フォームが表示されます。

See the Pen basic-javascript-prompt by Nori (@ysnoritnk) on CodePen.

DOM

DOMはDocument Object Modelの略で、documentプロパティにアクセスして様々な操作をすることができます。

では、何もないHTMLにJavascriptで記述を追加してみましょう。

See the Pen basic-javascript-innerHTML by Nori (@ysnoritnk) on CodePen.

HTMLには、何も記載されていませんが、Hello Worldが出現しています。これは、document（HTML）の中のidがboxというものの要素の中身を”Hello World”に変えるということが記載されています。

このようにDOMでは、要素内の内容を変えることができるほか、スタイルを変更したり、動きのあるエフェクトを追加することもできます。

まとめ

Javascriptのほんの一例についてまとめてみました。ブラウザ上で動作する唯一のプログラミング言語だけあって、覚えないといけないことも、出来ることも多いです。

他にもたくさんの機能がJavascriptにはあります。その全てをここでは紹介しきれないので、以下のようなサイトを参考にしつつ、一緒に学習していきましょう。では！