JavaScript入門

10011 ワード
構文 JavaScript es6 入門 JavaScript テキストリンク

この記事を書こうとした経緯

現場に参画し、現行のソースを改修した際にJavaScriptの基礎的な知識が欠如していると

身をもって痛感した。（なんとな〜く読めるが、コーディングには苦戦した。。。）

この際、JavaScriptの基礎的な知識を定着させるためにアウトプットを兼ねて投稿しようと決めた。

※至らぬ点が多々ありますので、「そこちゃうで！」と思ったらツッコンで頂きたいです

ラインナップ

  1. JavaScriptとは
  2. 基本的な記法
    1. 宣言について
    2. テンプレート文字列
    3. 分割代入
  3. さいごに

※勉強した中で「へぇー」と思ったことのみピックアップしました。

1. JavaScriptとは

タイトルがタイトルなので歴史を掘り下げて壮大に書くべきかと思いますが、

簡単にJavaScriptとは「なんぞや。。」ということを話して、基礎的な知識の定着、構文の理解に

重きを置いて取り組んで行きます。

JavaScriptとは

Netscape Communications社によって開発された、ブラウザ向けスクリプト言語

動的Webページを作成する際に用いられます。

そして「ECMAScript 2015（通称：ES6）」では下記のような機能を提供しています。

  • class宣言の導入で、Java/C#ライクなクラス定義が可能に
  • import/export文によるコードのモジュール化をサポート
  • 関数構文の改善（アロー関数、引数のデフォルト値、可変長引数など）
  • let/constによる変数の宣言
  • イテレーター/ジェネレーターにより列挙可能なオブジェクトの操作が可能に
  • 組み込みオブジェクトの拡充（Promise、Map/Set、Proxyなど）
  • String/Number/Arrayなど、既存の組み込みオブジェクトも機能を拡張など

勉強してみて思いましたが「class宣言の導入」のおかげで直感的に読みやすく感じました。

2.基本的な記法

2-1. 宣言について

JavaScriptで変数を定義する際に「var」を宣言していました。

sample_1.js

var msg = "お腹がいっぱい";

※初期値を設定しなかったら未定義（undefined）となる。

ES6では、変数を定義するために「let」という宣言が追加されました。

sample_2.js

let msg = "お腹がいっぱい";

「let」の特徴は、以下の2点です。

  • 変数の重複を許さない。
  • スコープを意識する。

あとES6で追加された定数の宣言は「const」を使います。

sample_3.js

// 定数の宣言
const TAX = 1.08;

let price = 100;

console.log(price * TAX);

余談
実は「const」は、ES6以前でも利用できた。
しかし、一部のブラウザの拡張仕様で全てのブラウザで利用できるわけではなかった。

2-2. テンプレート文字列について(ES6)

テンプレート文字列を使用することで文字列表現が楽にできる。

  • 文字列への変数の埋め込み
  • 複数行にまたがる（=改行文字を含んだ）文字列

テンプレート文字列ではシングルクォートやダブルクォートの代わりに「`」(バッククォート)で

文字列を括ります。

sample_4.js

let name = "サザエ";

let msg = `こんにちは、${name}さん`;
// (出力結果)こんにちは、サザエさん
console.log(msg);

今までだと変数とリテラルを「+」演算子で結合するしかなかったのが

「${}」の形式で文字列を埋め込むためコードがシンプルになります。

（コードの可読性が上がったので少し感動した。。。（独り言））

2-3. 分割代入について（ES6）

分割代入という言葉を初めて聞いたのでまとめようと思います。

配列やオブジェクトを分解し、配下のプロパティを個々の変数へ分解するための構文です。

今までは、配列に格納された値を変数に代入する際にはひとつずつ取り出さないと

いけませんでした（下記を参照）。

sample_5.js

let data = [12, 34, 45, 56, 89];
// 変数に格納
let data1 = data[0];
let data2 = data[1];
let data3 = data[2];
let data4 = data[3];
let data5 = data[4];

この手間を減らせるのが分割代入です。

sample_6.js

let data = [12, 34, 45, 56, 89];

let [data1, data2, data3, data4, data5] = data;

代入先の変数をブラケット（[]）でくくっているのがポイントです。
(※2019/06/18 ikechan-nichuさんからのご指摘)

オブジェクトの場合も同じような考え方で。。。

sample_7.js

let food = {name: "コンソメパンチ", price: 240, size: "やや大きめ"};

let {price, size, memo = "パーティー用"} = food;

// (出力結果)240
console.log(price);
// (出力結果)やや大きめ
console.log(size);
// (出力結果)パーティー用
console.log(memo);

目的のプロパティがなかった場合を想定して「変数名 = デフォルト値」を定義しておくことも

可能です。

3. さいごに

私自身が初見だったものについてまとめて参りました。

お詫びすべき点として「JavaScriptとは」の部分をなかなか端折ってしまったことを

大変申し訳なく思います。。。

本当だったらJavaScriptが世の中に広まるきっかけとなった「Ajax」などを話しすべきかなと

思いましたが割愛させて頂きました。

これからも学んだことはアウトプットして参ります。

参考資料

今回の記事を書くに当たって参考にした書籍
[改定新版]JavaScript本格入門　~モダンスタイルによる基礎から現場での応用まで~