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

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

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

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

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

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

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

仕様理解

HTML及びDOMの仕様理解

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

HTML Standard 日本語訳
 ~~HTML5のAPI、および、関連仕様~~ （HTML5は廃止）

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

JavaScript の仕様理解

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

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

↓ この粒度になると紹介しきれないですが、良いなと思ったものを幾つか。

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

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

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

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

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

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

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

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

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

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

HTML仕様通りに書いてれば、変なことになりません。同様に、同じid属性をHTML内で複数回書いたりするのはバグの元です。仕様の理解は大事。

ブラウザの理解

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

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

ブラウザがHTMLを表示するまでに、下記のステップを踏みます。

解析と DOM ツリーの構築：HTMLからDOMツリーを組み立てる
レンダーツリーの組み立て：視覚的な要素を表示順に並べる（CSSプロパティも計算）
レイアウト：レンダラー毎の位置やサイズを計算する
描画：画面に結果を表示する

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

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

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

表示のチューニング

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

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

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

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

dev.toがなぜinsanely fastを実現出来ているか
dev.to は衝撃的ですね。既に出揃っている技術の細かな積み上げでここまで速くなるという好例。

開発者ツール

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

多くのことが出来るツールなのですが、上に書いたような前提知識があると、それが何なのか理解した上で使えます。例えば、ブラウザの描画の仕組みを理解していれば、Performance タブに表示される情報が何なのか分かった上で活用できます。

JavaScript 良くあるパターン

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

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

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

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

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

現在のJSの概念

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

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

付録

JavaScriptまわりの簡単な歴史

下の表は、思い浮かんだものを適当に並べているので雑です。（すみません）
流行り始めた時期は人によって体感の差があると思います。

年	流行や出来事
1995年	JS以前。Javaアプレットとか懐かしいですね。
2000年	昔のJS。ブラウザごとの差異（特にIE）が酷く、一つの事をやるために毎回ブラウザ判定してブラウザ別のコードを書かねばならなかった。
2005年	prototype.js がブラウザの差異をある程度吸収＋ユーティリティを提供。この頃に Google Maps の Ajax（JSONP）が業界に衝撃を与える。
2008年	jQuery が流行りだしたのってこの頃でしたっけ・・・？同時期に YUI や MooTools、 Dojo なんかもありました。（記憶がおぼろげ）
2010年	node.js、npm、モジュール化、WebSocket
2011年	Underscore.js、KnockoutJS、altJS などの流行
2012年	Backbone.js
2013年	Angular.js、grunt.js などの流行
2014年	仮想DOM、React.js、Browserify、gulp.js などの流行、HTML5勧告、Flashの衰退
2015年	Riot.js、webpack、babel、Electron などの流行、ES2015(ES6)でJSが大きく変化
2016年	Redux、Angular2、HTTP2 JSの変化が激しすぎてディスられる
2017年	dev.to が話題になる
2018年	代表的なブラウザがPWA対応

終わりに

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

冒頭にも書きましたが、基礎知識は土台の様なものです。土台があれば、その上にあるものは自分で考えられます。新しい技術を目にしても、理解が容易になります。
基礎知識は頻繁に変更がないとはいえ、最近の HTML5、ES6+ は割と大きな変化でした。

ここではJavaScriptに関係があるものを書きましたが、もっと広い分野の知識もどんどん繋がっていきます。ネットワーク、サーバー、開発手法などなど、繋がっていくとより楽しくなります。自分もずっと道の途中です。

良いエンジニアライフを！