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

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

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

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

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

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

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

仕様理解

HTML及びDOMの仕様理解

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

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

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

JavaScript の仕様理解

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

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

例 : 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を表示するまでに、下記のステップを踏みます。
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 で不要になりました。

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

開発者ツール

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

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

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 が流行りだしたのってこの頃でしたっけ・・・? MooTools なんかもありました。
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の変化が激しすぎてディスられる

終わりに

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

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

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

ここではJavaScriptに関係があるものを書きましたが、もっと広い分野の知識もどんどん繋がっていきます。繋がっていくとより楽しくなります。自分もずっと道の途中です。

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