はじめてのフロントエンド 〜ドキュメント編〜

[「PORT」アドベントカレンダー](https://qiita.com/advent-calendar/2018/port)１日目。
フロントエンドエンジニアの福田です。
趣味はゆるキャン△、写真、自転車、スノボなど。キャンプ出発当日の朝に思い出して急いで書いています。

## TL;DR

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

聞かれた時に「最近、書籍は読んでないなー」と思うまでが鉄板。パッと思いつくのは[CSSシークレット](https://www.amazon.co.jp/gp/product/4873117666/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=archiva-22&creative=1211&linkCode=as2&creativeASIN=4873117666&linkId=c4bed2c5b23397153951880331167745)とか、[SASSの教科書](https://www.amazon.co.jp/gp/product/4295002356/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=archiva-22&creative=1211&linkCode=as2&creativeASIN=4295002356&linkId=de2c7798455f476fa14d1d8c265d6479)とかくらいでしょうか。フレームワークのHowToとか、まず公式のチュートリアル触るべきだと思いますし。仕様の確認とかも大抵は[MDN](https://developer.mozilla.org/ja/)みればOKなので。作りたいもの調べたいものが判っていれば、それで十分なんですよね...

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


## 全般

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

[MDN Web Doc](https://developer.mozilla.org/ja/)
Mozilla公式のリファレンス集。Webの公開仕様のドキュメントはここに集まるので、気になったらここで検索すると良い。

[Web Fundamentals](https://developers.google.com/web/fundamentals/?hl=ja)
Googleの主張をまとめたリファレンス集。
アクセシビリティ、画像圧縮、アニメーション、パフォーマンス、SEO、セキュリティ ...etc

[Can I use...](https://caniuse.com/#home)
各ブラウザのサポート状況を一覧できるサイト。auto-prefixerとかにも利用されている。

## HTML

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

[HTML5 ドキュメントのセクションとアウトライン](https://developer.mozilla.org/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
構造化の基本。まずはアウトラインから。理解したらセマンティックに進んで欲しい。

[普通のHTMLの書き方](https://github.com/hail2u/html-best-practices/blob/master/README.ja.md)
ながしまさんともんどさんが中心となって進めているHTMLベストプラクティス。概ね正しいので右も左もわからないうちは脳死で従っておくといい。

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

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

## CSS

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

[詳細度 - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity)
セレクタを簡潔にする理由。BEMとかFLOCSSみたいな名前で解決しようとする理由であったり、Sassのネストは浅くしようねって話。

[position - MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position)
相対配置と絶対配置（と基準ボックス）の違いは、なんとなく使ってるとバグを産みやすい注意点。

[Idiomatic CSS](https://github.com/necolas/idiomatic-css)
首尾一貫した記述をするための方針。Idiomatic（慣用的な）という語感の通り、業界標準的なルールが集まっているので、これに目を通した上で[stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)とか入れておくといいです。[日本語訳](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP)もありますが、更新が追いついてないので英語版を推奨します。

[恐竜に教える現代のCSS – Part 1](https://postd.cc/actualize-networkmodern-css-explained-for-dinosaurs/)
[恐竜に教える現代のCSS – Part 2](https://postd.cc/modern-css-explained-for-dinosaurs-2/)
[恐竜に教える現代のCSS – Part 3](https://postd.cc/actualize-networkmodern-css-explained-for-dinosaurs-3/)
モダンCSSの変遷を歴史的な文脈で説明している。インラインでのCSS、プリプロセッサ、BEMに代表される設計手法など。

[INTRODUCTION TO CSS GRID LAYOUT](https://mozilladevelopers.github.io/playground/css-grid)
よくわかるCSS Grid

[Front-end Job Interview Questions - CSS Questions の回答集（和訳）](https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Japanese/questions/css-questions.md)
後半に別の人verの回答もあり

## JS

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

[はてな教科書 JavaScript 編](https://hatena.github.io/Hatena-Textbook-JavaScript/)
初心者が最初に読むといい奴。地味にJQueryの書き方とかあるので中級者以上でも1度目を通しておくといい。

[js-primer](https://asciidwango.github.io/js-primer/)
[Jser.info](http://JSer.info)というサイトもやっているazu氏がコアで進めているオンラインドキュメント[WIP]

[clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript)
GoogleエンジニアによるBest Practice集。

[RunKit](https://runkit.com/home)
コード片おいてデバッグしながらPrototype作るのに向く何か

[JavaScript Promiseの本](http://azu.github.io/promises-book/)
[JavaScript の Promise: 概要](https://developers.google.com/web/fundamentals/getting-started/primers/promises?hl=ja)
ES6仕様のなかでも、特に直感的でないPromiseのまとめ

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

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

[Googleウェブマスター向け公式ブログ](https://webmaster-ja.googleblog.com/)
T/O

[海外SEO情報ブログ](https://www.suzukikenichi.com/blog/)
Googleの公式アナウンスやSEO担当者のコメントを、和訳していち早くまとめてくれているブログ。

[Google ウェブマスターヘルプフォーラム](https://productforums.google.com/forum/#!forum/webmaster-ja)
公式のヘルプフォーラム。とりあえずここで検索しておくといい。

[GoogleSearch > Structure Data > Feature Guide > Breadcrumbs](https://developers.google.com/search/docs/data-types/breadcrumbs)
Google公式の構造化マークアップガイド。アクセシビリティというよりは、リッチスニペット対策として、いくつかのUIのマークアップ方法が書かれている。あくまでヒントとして与えられるだけで、必ずしも反映されないことに注意。チェックは[Google構造化データ テストツール](https://search.google.com/structured-data/testing-tool/u/0/?hl=ja) で行える。

## アクセシビリティ

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

[HTML5 Accessibility](https://www.html5accessibility.com/)
主要ブラウザのアクセシビリティ実装状況のリスト。

[Inclusive Components](https://inclusive-components.design/)
<a target="_blank" href="https://www.amazon.co.jp/gp/product/4862463878/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4862463878&linkCode=as2&tag=archiva-22&linkId=6e4e1ff43d8d7133abda929bad9b55db">インクルーシブHTML+CSS &amp; JavaScript</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=archiva-22&l=am2&o=9&a=4862463878" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> の著者Heydon Pickering さんが纏めているパターンライブラリ。英語だけど実例おいてるのは少ないので参考になる。本（日本語訳）も良書なので読むといい。

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

[コンテンツの効率の最適化](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/?hl=ja)
[JavaScript 実行の高速化](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution?hl=ja)
ちょいちょい翻訳間に合ってないけど、Google公開のまとまったドキュメント、てのが貴重だからPageSpeed Insightsを気にするなら見ておくといい。

[Webpagetestから始める継続的 パフォーマンス改善](http://azu.github.io/slide/2018/roppongijs/webpagetest-performance.html)
はじめての〜というには専門的すぎるかもしれないが、神資料なのでいちお。

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja)
長らくマーケ部門のKPI基準がこれになっていたことに苦い思いをしていたけども、最近中身が[Lighthouse](https://developers.google.com/web/tools/lighthouse/?hl=ja)になって評価が一変した。純粋な速度を見るようになったので良いです。

## WordPress

- [WordPressでのデバッグ](http://wpdocs.osdn.jp/WordPress%E3%81%A7%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0)
- [Developer Resources: Dashicons](https://developer.wordpress.org/resource/dashicons/#media-archive)
- [WP-CLI Commands](https://developer.wordpress.org/resource/dashicons/#media-archive)
- [アクションフック一覧](https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7)


## 便利ツール

[Flexbox Properties Demonstration](https://codepen.io/justd/pen/yydezN)
CodePenでのデモ。Flexboxのプロパティ弄っていろいろテストできる。プロパティ忘れた時とか。

[IcoMoon](https://icomoon.io/)
複数のアイコンフォントを統合したり、SVGからWebフォントに変換したりできるジェネレーター。

[Icons - Material Design](https://material.io/tools/icons/?style=baseline)
Material Designの無料公開されてるアイコン。Apache license version 2.0.

[HTML Entities](https://www.compart.com/en/unicode/html)
[Character Entities](https://brajeshwar.github.io/entities/)
[Unicode Characters](http://graphemica.com/unicode/characters)
文字コード周り。CSSのcontentで画像使わずにアイコンとか出したい時とか。

## Conclusion

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