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

CODE
のり
のり

こんにちは!駆け出しフロントエンジニアのnoriです!Javascriptの勉強をしているけど、なかなか知識が身についているかどうかわからないので、アウトプットとして基礎の基礎をまとめたいと思います!

Javascriptとは

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

Javascriptの基本

Javascriptの記述方法

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

  • 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);

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

組み込みオブジェクト

Arrayオブジェクト

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

Objectオブジェクト

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

Stringオブジェクト

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

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

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にはあります。その全てをここでは紹介しきれないので、以下のようなサイトを参考にしつつ、一緒に学習していきましょう。では!

コメント

タイトルとURLをコピーしました