フロントエンドが戦国時代を迎えて数年が経ちましたね。

最新のあれこれの前に、その前提となる部分を抑えると理解が早くなります。基礎知識は土台の様なものです。こういう部分には大きな変化は頻繁には起きないので、長く使えます。また、一度知っておけば変化が起きてもキャッチアップが早くなります。

※ 読みきれないと意味ないので、だいぶ削りました。

コーディング全般に関する知識

長く使えますし、JavaScript以外でも使えます。デザインパターン、美しいコードを書く為のテクニックetc。良い本が沢山出てます。

↓ 最近バズってました。
【年末年始に読みたい！】優秀なエンジニアが影響を受けた本ランキングトップ32冊！（559冊収録の全ランキングデータPDFファイルつき）

あと、変数と関数の命名は超大事

• プログラミングでよく使う英単語のまとめ【随時更新】 - Qiita
• 今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200 | OXY NOTES

HTML及びDOM の仕様理解

HTML/CSS、DOM の仕様書を読むと、JavaScriptが操作する対象の理解が深まります。ザックリ把握するだけでも効果があります。

HTML5のAPI、および、関連仕様

• HTMLはどういう構造なのか。どんなタグをどういう親子関係で使うのか、それぞれのタグが取りうる attribute や style はどんな物があるか。
• 各CSSプロパティと関連プロパティ、及びどの様にレンダリングされるか。
• DOMとは何なのか。DOMツリーとは。また、どういうAPIがあるのか。

JavaScript の仕様理解

JavaScript の言語仕様と関数、APIにザッと目を通します。今後は ES6+ も必要ですね。

• サイ本 のES6+対応が待たれます。
• Web API インターフェイス | MDN

↓ この粒度になると紹介しきれないけど、掻い摘んでみた。

• ECMAScript 2015以降のJavaScriptのthisを理解する | Web Scratch
• ちゃんと知ってる？JavaScriptのイベントバブリングを学ぼう - WPJ
• JavaScriptの非同期処理を並列処理と勘違いしていませんか？ - Qiita

HTMLとDOMは等しくない事がある

HTMLに書かれた通りのDOMツリーがあると思ってJSで操作しようとすると、上手くいかない事があります。実際のDOMツリーはインスペクタで調べます。

例えば、下記のHTMLをブラウザで表示したとします。

<table>
  <tr>
    <td>あいうえお</td>
  </tr>
</table>

この時、下記のコードでは要素を取得できません。

// 要素を取得できない（HTMLに書いてある通りなのに！）
const elem = document.querySelector('table > tr > td');

ブラウザの気持ちになれる方はすぐに気付きますが、DOMは下記のようになります。

<table>
  <tbody>
    <tr>
      <td>あいうえお</td>
    </tr>
  </tbody>
</table>

よって、下記のコードならば要素を取得できます。

const elem = document.querySelector('table > tbody > tr > td');

HTML仕様通りに書いてれば、変なことになりません。

ブラウザの理解

ブラウザがHTMLを画面に表示するまでに起きること

ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

ブラウザがHTMLを表示するまでに、下記のステップを踏みます。
1. 解析と DOM ツリーの構築：HTMLからDOMツリーを組み立てる
2. レンダーツリーの組み立て：視覚的な要素を表示順に並べる（CSSプロパティも計算）
3. レイアウト：レンダラー毎の位置やサイズを計算する
4. 描画：画面に結果を表示する

DOMツリーの変更や表示に影響のあるCSSプロパティの操作が行われると、その都度レンダリングが発生します。大量のDOMノードを操作する場合は、細かくDOMを操作するよりも、一度裏側でDOMツリーを組み立てておいて、一気に入れ替えた方が処理が軽くなります。

フロントエンド ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

ブラウザの気持ちになってスクリプトを書くのは大事です。（サーバーサイドの時はWebサーバーやDBサーバー、ネットワークの気持ちになります）

表示のチューニング

チューニングにはJavaScript以外の知識も含まれますが、周辺知識であり有用です。

本だと「ハイパフォーマンスWebサイト」と、その続編が古典です。読んで得られる物は多いですが、やはり古い。最新の内容で全てを網羅して、1冊読めばOKな良書が欲しい。

Webフロントエンド表示速度、最速化手法まとめ - Qiita
ちょっと古いが良い記事。CSS Sprite は HTTP2 で不要になりました。

HTTP2についても概要を把握しておきましょう。
翻訳 HTTP/2 時代におけるパフォーマンスの最適化 - Capital P

開発者ツール

ブラウザの開発者ツールを使いこなしましょう。

多くのことが出来るツールなのですが、上に書いたような前提知識があると、それが何なのか理解した上で使えます。

JavaScript 良くあるパターン

その昔に読んだ本達は、今となっては・・・という感じなので紹介しません。纏まってる本や記事があれば後ほど追記します。

ここに書いて良いのか迷う小ネタですが、こういうの見る。

// 初期化の時に、前者がなかったら後者を入れる
let foo = bar['baz'] || 'qux';

// 変数を入れながら関数実行
somefunc(foo = bar, baz = otherfunc(qux));

あとクロージャ、関数を返す関数、高階関数、async/awaitなど。

現在のJSの概念

仮想DOMやReduxなど。パラダイムシフトは既に起きました。
そして未来は現在を元に発展していきます。

2014年には仮想DOMに魂を震えさせられました。
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
これ以降、色々なことが有りましたが、コアになるのは仮想DOMのデザインパターンなのかなと思います。

付録

JavaScriptまわりの簡単な歴史

Javascriptの歴史 - Qiita

流行り始めた時期は人によって体感の差があると思います。

終わりに

基礎になる知識は頻繁に変更がないとはいえ、最近の HTML5、HTTP2、ES6+ は割と大きな変化でしたね。

知るべき基礎知識のリファレンスがあると、手探りするよりは近道になります。しかし、それでも膨大な量なのには変わりがありません。ここでサクッと紹介した知識を、それぞれを無駄なく追っていったとしても、本にすると１５００頁を超える量になるのかなと思います。なので、結局は本人が頑張って勉強するしかないです。

冒頭にも書きましたが、基礎知識は土台の様なものです。土台があれば、その上にあるものは自分で考えられます。新しい技術を目にしても、理解が容易になります。

ここではJavaScriptに関係があるものを書きましたが、サーバーサイドやハードウェア、アルゴリズムや数学など、全ての知識はどんどん繋がっていきます。繋がっていくとどんどん楽しくなります。自分もずっと道の途中です。

エンジニアの楽しみは沢山あります。新しいものに触れるワクワク、知識が繋がって電流が走る瞬間、個人としてのやってやったぜ感、個人では不可能なものを可能にするチームワーク、etc。エンジニアであれば全て体験していきたいものです。良いエンジニアライフを！