Javaとは全く異なるJavaScriptの言語仕様とES6構文まとめ備忘録

1995年にNetscape社がJavaScriptをブラウザに搭載して早20数年。

JavaScriptはとにかく知るべき周辺技術が多く、ライブラリの隆盛と衰退も激しいと聞きます。

TaNA
私も新人の頃は生のJavaScriptに触れ、次第にjQueryになりましたが、今ではES6が当たり前の時代に!! 仮にサーバーサイドがメイン担当でも、代表的なフレームワークであるreact・vueの基礎くらいは知っておく必要があるかなと感じます

現在のWeb開発の潮流や今後のキャリアを考え、JavaScriptに関わる知識をザックリまとめました。

そもそもES6とは!?

ECMASCriptの6th Editionの総称。

TaNA
JavaScriptは元々、Netscapeに搭載されたのが始まりらしく、その後MicrosoftがIEにJavaScriptと互換性のある機能(JScript)を独自開発、それからも共通化されず、争い(俗にいうブラウザ戦争)が続き、開発者はブラウザ毎の差異に対応するハメに…

そんな問題を解決するために、ECMA Internationalという団体が標準化に着手しています。

今後も年単位で細かいリリース計画を予定。

Progateでの基本確認

まずは何かと話題のprogateで、ES6の基礎部分だけを駆け足で触ってみました。

正直これだけでは知識が足りませんが、理解しやすいので基礎レベルであれば◎。

Progate

変数と定数

変数定義はlet、定数定義ではconstを利用。

テンプレートリテラルで文字列中に変数の埋め込みが可能。

配列とオブジェクト

配列とオブジェクト定義、また配列中にオブジェクトを定義。

関数定義とアロー演算子の使い方。

クラスと継承

クラス定義とファイル分割。

クラスの継承はextendsでオーバーライド実装。

はてなの教科書

はてなさんは自社エンジニア向けの技術メモを公開して下さっています。

はてなの教科書

言語の構文は勿論、実際の開発現場で必要なDOM操作、Ajax非同期処理やNodeにも言及。

ちなみにJavaScriptに関して以下内容を網羅。

・JavaScript構文

・DOM

・非同期プログラミング

・Ajax

・jQuery

・フロントエンド設計

・Node.js

気になった所のみ抜粋。

関数宣言と関数式

JavaScriptの関数は関数宣言と関数式の2種類。

関数宣言は宣言位置より上で関数呼び出しが可能。

関数式は変数へ代入するまで呼び出し不可。

変数のスコープ

JavaScriptの変数は定義の方法が3種類あり、ES6ではletやconstが利用できます。

◼︎ var

・forやifなどのブロック{}でスコープを作らない.

◼︎ let

・ブロックスコープを作る.

◼︎ const

・ブロックを作り、一度定義したら再代入できない.

letやconstが使えるなら、積極的に利用するのが◎。

DOM

DOMとはDocument Object Modelの略称で、HTML文書をJS操作するAPIを定めたもの。

モダンなJSの開発環境であれば、以前のようにAjaxで取得したデータをDOM操作でペタペタ書き換える作業は不要なのでしょうけど、仕組みを知る意味でも一読の価値アリ。

非同期プログラミング

JavaScriptを使った開発で一番利用する機能ではないでしょうか。

JavaScriptはシングルスレッドな言語なので、非同期プログラミングでは以下方法で実現。

1. コールバック関数

2. イベント

3. Promise

4. その他

コールバックは処理が重なるとネストが深くなり、読みづらいコードになりがち。

そのためES2015から追加されたPromiseでチェーン化するのが一般的です。

ES2015が使えない環境ではjQueryのPromiseを利用している現場も多いかも。

Ajax

非同期プログラミングでも頻繁に利用するAjax。

Asynchronous JavaScript and XMLの略称で、ページ遷移せずにJSでHTTP通信する処理の総称。

1. XMLHttpRequest.

2. ライブラリの利用.

3. fetch.

最近ではPromiseをベースに作られたAPIのfetch利用が一般的でしょうか。

Same-Origin Policy

サーバーサイドAPIをAjax通信で叩く時によくぶつかる壁がSOP。

セキュリティなどを考慮し、基本的に他ドメインのリソースは読み込めない仕様になっています。

例えばb.test.ne.jpからはb.test.ne.jpのリソースだけ読み込み可能。

しかしd.test.ne.jpのデータをJSで読み込んだり表示はできません。

そのようなケースではCORS(Cross-Origin ResourceSharing)の仕組みを利用。

js側でfetchする際、オプションによってCORSを利用することを明示的に宣言。

Cookieの送受信も許可したい場合はcredentialsオプションを設定。

現代のJavaScriptチュートリアル

基本から高度なトピックまでまとめられた素晴らしいサイトがあります。

現代のJavaScriptチュートリアル

言語仕様は勿論、IDEやデバッグ、変数の名前の付け方など多岐に渡るプログラミング知識を網羅。

BabelとPolyfills

ECMAによって標準化が着々と進められるも、まだブラウザによってはES6が動作しないケースも多いので、そのような場合に対応するためにBabelを活用。

これにより最新JavaScriptコードを以前の標準仕様に書き直せます。

Babelは以下2ステップを踏みます。

1. トランスパイラで最新JavaScriptコードを以前の標準スクリプトに変換.

2. 構文機能はカバーするも、最新機能未サポートの古いブラウザーも存在.

そこでその差異を埋めるべく、その機能を使えるようにするためのコードがPolyfill(Polyfill)。

TaNA
昨今のビルドシステム(webpack等)では、babelやpolyfillのパッケージを導入することで、あまり意識することなく開発可能です。ただまだまだモダンなjs開発でない現場は多いので、Babel単体で動かす事もあるかも。

async/await

より快適にPromiseを利用できる特別な構文。

async関数は常にpromiseの返却を保証する機能。

非PromiseでもJavaScriptが自動的にpromiseにラップしてくれます。

awaitはasyncの中だけで利用できるキーワード。

promiseが確定してその結果を返却するまでJavaScriptの処理を待機します。

asyncで関数定義し、.thenでの呼び出しがawaitに置き換えられます。

このサイトを一から勉強していれば、とりあえずJavaScriptはOKなんじゃないでしょうか。

後はコンポーネント指向であるreactやvueに触れ、基本操作から単体試験周りまで触れておけば、とりあえずフロントエンドの最低限の知識は網羅出来るかなと感じます。

まあ上に書いた項目だけでも結構範囲広いですが…