「PORT」アドベントカレンダー１日目。
フロントエンドエンジニアの福田です。
趣味はゆるキャン△、写真、自転車、スノボなど。キャンプ出発当日の朝に思い出して急いで書いています。

TL;DR

社内エンジニアや新卒向けに、「フロント技術でオススメの書籍ありますか？」て聞かれた時に、とりあえず渡しているリストです。

聞かれた時に「最近、書籍は読んでないなー」と思うまでが鉄板。パッと思いつくのはCSSシークレットとか、SASSの教科書とかくらいでしょうか。フレームワークのHowToとか、まず公式のチュートリアル触るべきだと思いますし。仕様の確認とかも大抵はMDNみればOKなので。作りたいもの調べたいものが判っていれば、それで十分なんですよね...

なので何から手をつければ良いか判らない初学者用に、ひとまず全体を網羅したリストを用意（随時更新）しています。それがコレです。

全般

HTML,CSS,JS周りのドキュメントは、まずMDNで探す癖をつけておくと良いです。
ググるにしても、最低２年できれば１年以内のフィルターを掛けること（Webの進化は速い！）。
個人ブログの記事は参考程度に、どういう立場の人が書いているのかを気にかけてください。

MDN Web Doc
Mozilla公式のリファレンス集。Webの公開仕様のドキュメントはここに集まるので、気になったらここで検索すると良い。

Web Fundamentals
Googleの主張をまとめたリファレンス集。
アクセシビリティ、画像圧縮、アニメーション、パフォーマンス、SEO、セキュリティ ...etc

Can I use...
各ブラウザのサポート状況を一覧できるサイト。auto-prefixerとかにも利用されている。

HTML

ちゃんと<div>以外のタグを使って、意味のあるマークアップをしよう。
文書の意味をちゃんと考えれば、最低限の機能性とアクセシビリティは担保される。
みんな大好きSEO（）の干渉を防ぐためにも必須の知識。

HTML5 ドキュメントのセクションとアウトライン
構造化の基本。まずはアウトラインから。理解したらセマンティックに進んで欲しい。

普通のHTMLの書き方
ながしまさんともんどさんが中心となって進めているHTMLベストプラクティス。概ね正しいので右も左もわからないうちは脳死で従っておくといい。

Google Developer Documentation Style Guide
Googleが実際に使っている公式スタイルガイド。文章の体裁とか引用符の使い方とかがメインだけど、HTMLまわりの項目もある。

「HTML（WHATWG Living Standard）」の日本語訳
HTML5以降のHTML仕様はW3CとWHATWGが個別に存在し、微妙な差異があります。旧来のW3CはWHATWGの動きに付いていけていないのと、WHATWGは実装を担当するブラウザ団体ということもあり、参考にするならこちらにすべき。

CSS

CSS周りはBEMとかモジュール設計とかの方法論に惑わされることが多いけど、要するに首尾一貫してればいいんだよ、ということでLintがだいじ。名前付けは苦肉の策であって銀の弾丸ではない。

詳細度 - MDN
セレクタを簡潔にする理由。BEMとかFLOCSSみたいな名前で解決しようとする理由であったり、Sassのネストは浅くしようねって話。

position - MDN
相対配置と絶対配置（と基準ボックス）の違いは、なんとなく使ってるとバグを産みやすい注意点。

Idiomatic CSS
首尾一貫した記述をするための方針。Idiomatic（慣用的な）という語感の通り、業界標準的なルールが集まっているので、これに目を通した上でstylelint-config-standardとか入れておくといいです。日本語訳もありますが、更新が追いついてないので英語版を推奨します。

恐竜に教える現代のCSS – Part 1
恐竜に教える現代のCSS – Part 2
恐竜に教える現代のCSS – Part 3
モダンCSSの変遷を歴史的な文脈で説明している。インラインでのCSS、プリプロセッサ、BEMに代表される設計手法など。

INTRODUCTION TO CSS GRID LAYOUT
よくわかるCSS Grid

Front-end Job Interview Questions - CSS Questions の回答集（和訳）
後半に別の人verの回答もあり

JS

JSまわりで初心者レビューしてて良くあるのは、細かい書き方より、実行タイミング（loadとDOMContentLoadedの使い分けなど）、要素の取得方法（querySelectorは雑に使うと重いとか）と存在チェック、あとは非同期周りとかが、間違ったり冗長だったりで不安定になってることが多いかなーという印象。

はてな教科書 JavaScript 編
初心者が最初に読むといい奴。地味にJQueryの書き方とかあるので中級者以上でも1度目を通しておくといい。

js-primer
Jser.infoというサイトもやっているazu氏がコアで進めているオンラインドキュメント[WIP]

clean-code-javascript
GoogleエンジニアによるBest Practice集。

RunKit
コード片おいてデバッグしながらPrototype作るのに向く何か

JavaScript Promiseの本
 JavaScript の Promise: 概要
ES6仕様のなかでも、特に直感的でないPromiseのまとめ

Airbnb JavaScript Style Guide() {
おそらく世界で一番つかわれているJSルール。ちゃんとルールの意味が説明されている点で貴重。

SEO

SEO関連は都市伝説が多いので、参考にするのは公式の1次情報だけにして、基本的にはHTML仕様に従うべき。
業者ブログは彼らの試行錯誤の結果であって、今は正しいように見えるだけで5分後には飛ぶかもしれない。さらに稀にDやSEO屋がいう**「グーグルの友達が言ってました」も注意**が必要。Googleそのものが巨大な組織なので、中の人と言ってもいろいろあります。その人がどの立場（SEOチームの人間か、とか）で言っているのかによる。

Googleウェブマスター向け公式ブログ
T/O

海外SEO情報ブログ
Googleの公式アナウンスやSEO担当者のコメントを、和訳していち早くまとめてくれているブログ。

Google ウェブマスターヘルプフォーラム
公式のヘルプフォーラム。とりあえずここで検索しておくといい。

GoogleSearch > Structure Data > Feature Guide > Breadcrumbs
Google公式の構造化マークアップガイド。アクセシビリティというよりは、リッチスニペット対策として、いくつかのUIのマークアップ方法が書かれている。あくまでヒントとして与えられるだけで、必ずしも反映されないことに注意。チェックはGoogle構造化データテストツールで行える。

アクセシビリティ

「適切なマークアップをしていれば、ある程度のアクセシビリティは確保されている」という立場からすれば、はじめての〜て段階であまり小技に頼るべきではないけども。キーボードでのフォーム操作は万人が使うので、その辺から少しずつ学んでいけばいいかなと。

HTML5 Accessibility
主要ブラウザのアクセシビリティ実装状況のリスト。

Inclusive Components
インクルーシブHTML+CSS & JavaScript の著者Heydon Pickering さんが纏めているパターンライブラリ。英語だけど実例おいてるのは少ないので参考になる。本（日本語訳）も良書なので読むといい。

高速化

サイトの高速化はアセット配信がメインなので、フロントエンド単体でできることは少ない ...と思っていた時期が僕にもありました。最近はServiceWorkerやprefetchなんかがアツいです。はじめての〜レベルだと、JSのロジック変更でだいぶ速度変わる印象。特にアニメーション。要素の取得や処理の順番、イベントの貼り方など。

コンテンツの効率の最適化
 JavaScript 実行の高速化
ちょいちょい翻訳間に合ってないけど、Google公開のまとまったドキュメント、てのが貴重だからPageSpeed Insightsを気にするなら見ておくといい。

Webpagetestから始める継続的パフォーマンス改善
はじめての〜というには専門的すぎるかもしれないが、神資料なのでいちお。

PageSpeed Insights
長らくマーケ部門のKPI基準がこれになっていたことに苦い思いをしていたけども、最近中身がLighthouseになって評価が一変した。純粋な速度を見るようになったので良いです。

WordPress

便利ツール

Flexbox Properties Demonstration
CodePenでのデモ。Flexboxのプロパティ弄っていろいろテストできる。プロパティ忘れた時とか。

IcoMoon
複数のアイコンフォントを統合したり、SVGからWebフォントに変換したりできるジェネレーター。

Icons - Material Design
Material Designの無料公開されてるアイコン。Apache license version 2.0.

HTML Entities
Character Entities
Unicode Characters
文字コード周り。CSSのcontentで画像使わずにアイコンとか出したい時とか。

Conclusion

英語に慣れておくといいです。
~~本文読めなくても、コード読めばだいたい判るから！聞くも話すも必要もないから！~~