WEBフロントエンドエンジニア初学者の勉強リスト

はじめに

最近転職をしてフロントエンドエンジニアになりました。

昔からWEBには触れていたものの、独学で細々とブログをやったりWEBページを持っていた程度なので、きちんと学ぶのは初めての初学者です。
WEBの世界はとても広い。広すぎて何を目指して勉強すればいいのかわからない。何を調べたかも忘れそう。なので目印代わりに調べたことをここにまとめておこうと思います。
MarkDownの練習も兼ねて。
YahooでググったりQiitaで聞いたりするきっかけ程度にでもなりますように。

この投稿は初学者がネットの知識や入門書を読んで身に付けた知識なので、間違っているところや不足しているところが多々あると思います。
もし見つけた方がいたら、私と、これから学ぶ方の為にどうぞコメント等でご指摘いただければ幸いです。

言語

HTML/CSS/JSの三種の神器は変わらず。ただし、よりインテリジェントな書き方ができるようにメタ言語やライブラリなどが登場している。このあたりは流行り廃りがかなり激しいようなので要注意。基本のHTML/CSS/JSをきちんと抑えるのが成長への近道でしょうか。

HTML(HTML5)

Hyper Text Markup Languageの略。
WEBページ制作の基本となる言語。HTML5になってからはよりセマンティックな記述が求められるようになっているようです。
どうやら裏サイトへの入り口の時代は終わったらしい。
HTML5になるにあたって大きく分けて２種類進化していて、
1つはcanvasやsvgなどの先進的なことができるようになったこと。
もう1つはheaderやsectionなど、divと同等の働きをしながらも、意味付けがある要素が増えたこと。
=>これを「コンテンツモデルの導入」というそうです（コメントより教えていただきました）。
この2点が大きな違いのように感じます。
=>APIについて追記しました。上に書いた「先進的なこと」と分けて考えるなら、3点になりますね。（コメントより教えていただきました）

• HTMLメタ言語（JSでいうAltJS）
  • Pug
  • ejs
• アクセシビリティ
  どんな人でも必要な情報にアクセスできるように、という考え方
  • WAI-ARIA
  • Web Content Accessibility Guidelines (WCAG) 2.0
• SEO(Search Engine Optimization)
  検索エンジン最適化。ページ内の情報を整理して外部サイト（検索サイトも含む）へ伝えることでよりアクセスしやすくする。
  • AMP（モバイル端末でより早く表示できるようにする仕組み）
  • OGP（SNSでの共有時などに出てくる画像やキャプション）
• API(Application Programming Interface)
  HTML5でできるようになった技術。ちなみにAPIは「データのやりとりに使うインターフェースの仕様」というような意味で、「TwitterのAPI」みたいな使い方をします。今回の場合はHTML5のAPI。色々できるのでPWA（Progressive Web Apps）などが実現できます。どんなのがあるかはこちらがわかりやすかったです。
  • webStorage(一時的にブラウザがデータを保存する)
  • Web Workers（JavaScriptをバックグラウンドで実行する）
  • offline web app（オフラインでアプリケーションが動くようにキャッシュする仕組み）
  • History API（JavaScriptでブラウザの履歴を操作する）

CSS(CSS3)

Cascading Style Sheetsの略。

HTMLでタグづけされたページをCSSで装飾していきます。

• CSSメタ言語（JSでいうAltJS）
  CSSを書きやすく便利にしたもの。一度書いたものをCSSにコンパイル（変換）する必要があります。
  • Sass(SASS記法とSCSS記法があります)
  • Stylus
  • Less
• CSSフレームワーク
  CSSの雛形データがたくさん入っているもの
  • Bootstrap
  • Compass
• CSS設計
  名前の付け方やファイルの分け方などの指標。考え方なので特にソフトやファイルデータがあるわけではないです。記事を書きました→ 【初学者向け】HTML/CSSでのclassの命名を考える　〜CSS設計（BEM）を学んでみよう〜
  • BEM
  • OOCSS
  • SMACSS
• リセットCSS
  ブラウザ固有のCSSをリセットするもの。多くの人によって作られているcssのデータ。中身を覗くと要素にmargin:0;などが書かれています。最初にこれを読み込んだ上で必要なCSSを書いていきます。
  • Yahoo! (YUI 3) Reset CSS
  • Eric Meyer’s “Reset CSS” 2.0
  • Normalize.css（厳密にはリセットCSSではなく、ブラウザ間の差異やバグを直すものです。コメントよりご指摘いただきました。）

JavaScript

通称JS。WEBブラウザ上で動くプログラミング言語。

• EcmaScript2015(ES6)
  将来的にJSで採用される規格。現状ではブラウザが対応していない部分もあるため、従来の形式にトランスパイル（変換）する必要があります。（IE以外はほぼほぼ対応しているのかな？）
  • Babel（ES6のトランスパイラ）
• ライブラリ
  JSに色々な機能を持たせて使いやすくしたもの。中身はJSで関数が用意されているものなので、それを動かすコードを書いて使います。ライブラリは部品。
  • jQuery
  • React
• フレームワーク
  ライブラリに似たようなもの。さらに大規模。フレームワークは枠組み。
  • Angular
  • Vue.js
• AltJS
  JSをさらに書きやすく便利にしたもの
  
  • TypeScript
  • CoffeeScript

コンパイル/コンパイラ

それぞれ翻訳/翻訳機と思って概ね相違ないです。ブラウザは基本HTML/CSS/JSしか読めないので、メタ言語を使ったときなどに変換する必要があります。例：.sass => .css

SVG

ベクターデータなので言語と言うよりは画像に近いものではありますがここに記載。この点からこの点まで線を引く、塗りつぶしはこの色、というような文字情報で書かれた画像。拡大縮小しても画質が悪くならない上、JS等でも中身の情報までいじることができるため利用価値は高い。

環境関係

Node.js

サーバーサイドでJSを実行できるようにするもの。
.jsとつくけど、JSライブラリとかのイメージよりは、一つのシステムに近いものという捉え方の方がいいかもしれません。現状のWEBフロントエンド開発では欠かせない技術です。

• npm
  Node Package Managerの略。パッケージ管理システム。CLIでのインストールなどに使います。後述のタスクランナーやWebpack、コンパイラなどをインストールして動かすための土台になります。
• yarn
  npmに似たもので、yarnというものもあります。役割はほぼ一緒。

タスクランナー

CLIで実行させたい処理等をまとめて記載しておき、簡単に実行するツール。「Sassファイルを更新したら自動で"cssにコンパイルしたあとにページを更新する"」といったような作業を行えたりします。

• Gulp(厳密にはビルドシステムらしい)
• Grunt

Webpack

JavaScriptやCSSなどを変換して1つのファイルにまとめるもの。Sass→CSSのコンパイルなどもでき、複数のファイルをまとめる機能などもあります。Gulp等でまとめて指示を出して動かすこともありますが、タスクランナーの代わりとして使用することもあります。

エディター

高性能なメモ帳。制作に必要な様々な機能が入っています。非常に種類は多いです。エディターよりさらに高機能なIDE（統合開発環境）というものもあります。

• Atom
• Sublime Text
• Visual Studio Code

フォーマット関連

書式を揃えるもの。

• ESLint
• Prettier
• EditorConfig(改行や文字コード等を揃える)
• CSScomb(CSSのプロパティ順を揃える)

CMS

Content Management Systemの略。雛形を作り、同じようなページを量産/管理するのに向いている。ブログなどの仕組みがイメージしやすいかと思います。

• WordPress
• Movable Type

Git

バージョン管理システムの一つ。これが利用されていることが多いように感じますが、ほかにもバージョン管理システムはあるようです。コードなどを、変更点や履歴等を残しながら管理できるツールです。

• GitHub
• Bitbucket
• GitLab
  

これらはインターネット上でGitの情報を保持しておけるリモートリポジトリを提供しています。他にもたくさんのサービスがあります。（Gitが主流ですがSVNというバージョン管理システムもあります。）

おわりに

フロントエンド初学者が調べたもの、学んだものを列挙しただけのものになりましたが、何か勉強のきっかけになるようなものがあれば幸いです。きっとこれからも環境は変わり続けていくと思うので、気づいたときに加筆修正していければと思います。
ここに挙げたものでも筆者は触ったこともないものも多いです。職場や案件によって使うものも変わるでしょう。なので、ここに挙げたものが全てではなく、代表的なものの一部とでも思ってください。
冒頭にも書きましたが、間違いや不足がありましたらコメント等いただければ嬉しいです。
これからも勉強を続けて技術的なTipsを公開していきたいですね。