これから学ぶWEBサイト制作フロントエンド #JavaScript

はじめに

後輩への資料を想定してさくっと書いて見たのでペタっとしておきますね。

転職してWEB業界に入ってから1年ちょっと。仕事を通してこのあたりの技術を使いました、という紹介です。初心者向けに、どんなものどの程度勉強すれば良いかという案内になります。

前に似たような記事を書いたんですが、これだと色々と列挙しただけだったので、もう少しピンポイントにどのあたりが役にたったかとかを軽くまとめていければと思います。

また、作業環境によっては使用する技術も変わってくると思うので、もしすでに環境があれば（先輩などがいれば）、デファクトスタンダードを学ぶより、まずはその環境に慣れることを優先した方が良いと思います。

あと、WEBサイトの制作と、WEBアプリケーションの制作で結構毛色が変わると思うので注意です。

HTML

HTMLはまずはある程度 HTML5 のタグに慣れましょう。

pug

あとは Pug を覚えておくといいんじゃないかと思います。

index.html

<div class='hoge'>
  hello
  <span>world</span>
</div>

これが

index.pug

.hoge hello
  span world

こんな感じになります。
実際の開発ではこうやって省略できたりするメタ言語と呼ばれるものを使用することが多いです。
とりあえず基本的な記法がわかればOKです。
ほかにもmixinやblockなど、色々な機能があるので、余裕ができてきたら調べてみましょう。

CSS

CSSもまずはCSS3の基本的な書き方を押さえましょう。
ある程度できるようになったら以下のようなところから勉強してみてください。

CSSメタ言語

こちらは SCSS がデファクトスタンダードになるかと思います。

style.css

.box {
  background-color: blue;
}

.box-yellow {
  background-color: yellow;
}

.box .inner {
  padding: 10px;
}

これが

style.scss

.box {
  background-color: blue;

  &-yellow {
    background-color: yellow;
  }

  .inner {
    padding: 10px;
  }
}

こんな感じで入れ子に（ネスト）できたりできます。こういった機能によってコードを整理しやすくなります。
覚えたら便利になりますが、ひとまず素のCSSも書けるので、焦らなくても大丈夫です。
そのほかにも色々な機能があるので、こちらも基本的な記法を覚えたらmixinなどを調べてみるのも良いですね。
ちなみにSCSSと書きましたが、「SASS」と呼ばれることもあります。
これは、もともとSASSという言語があって、ただそれが使いづらいとのことで紆余曲折あってSCSSという記法も使えるようにした、という経緯があるからです。なので呼ぶときは「サス」と呼ばれることもありますが、大抵はこちらのSCSS記法を指すんじゃないかと思います。（ちなみに正式名称は「サース」らしいです）
ちなみに個人的には Stylus の方が好きです。

CSS設計手法

このあたりは規模なんかによっても変わってくるのでなんともですが、ひとまず FLOCSS （と一緒に MindBEMding ）を覚えておくと、他の手法なんかも理解しやすくなってくると思います。
設計というと大仰に聞こえますが、CSSのデータのフォルダ分けや命名のことです。ちなみに、SCSSなどのメタ言語と一緒に使うことが多いと思うので、まずはSCSSの基本的な記法などから先に覚えた方が良いと思います。

JS

これについてはフレームワークやAltJSの勉強も良いですが、ひとまず ES2015 と jQuery をちゃんと使えるようにしておいた方が汎用性は高いかな、という気がします。
特にES2015の書き方はわかるようになっていないと混乱しやすいところもあるので早めに覚えられるといいでしょう。
フレームワークやAltJSは、プロジェクトで使う場合にはそれに合わせたものを勉強するというくらいで大丈夫だと思います。使うものが環境によって大きく変わるので、周りの人に聞いてみてください。
また、周辺技術として webpack, babel などはよく使う技術なので合わせて調べておきましょう。

その他

Git

Git というバージョン管理システムです。今現在、デファクトスタンダードになっている技術なので基本的な使い方は必修と思っていいと思います。
コマンドを覚えても良いですが、初心者には Sourcetree などのソフトを使った方が優しいと思います。
ある程度わかるようになったら合わせて ブランチモデル などを勉強しておくと役に立つと思います。
また、合わせて GitHub や GitLab などのホスティングサービスも使えるようになっておくと良いと思います。 Issue や Pull Request の使い方を覚えましょう。

MarkDown

簡単な記法でHTMLのようなマークアップがかけるというものです。

## その他
### Git
`Git` というバージョン管理システムです。...

こんな感じで書いて行きます。
簡単に書ける分、出来上がるのは簡素なものですが、GitHubなどで使えたり、Qiitaの記事もこれで書かれていたりと、何かとお世話になります。

開発環境関係

Homebrew, nodenv(anyenv), Node.js, npm, Webpack, Gulp あたりの単語をサクッと検索してそれぞれの役割を覚えておくといいと思います。
このあたりは1から環境を作るのは少し大変なので、まずは周りの人を真似して同じ環境を作りましょう。
最初は「魔法の呪文で起動できる」で構わないです。まずは使えるようになりましょう。

まとめ

学ぶことは色々ありますが、焦らず急がず順番に覚えていけば大丈夫です。

まずはマークアップの基本として HTML5 と CSS3 を押さえましょう。
それができたら、既存の開発環境に慣れながら Git の使い方を覚えていく感じが良いと思います。
ある程度わかるようになってきたら、 Pug や SCSS を勉強してみましょう。効率がグッと上がると思います。
ここまでできればある程度仕事ができるようになっていると思います。
あとは Pug や SCSS を深く掘り下げていくなり、 CSS設計 や 開発環境関係 の技術を勉強してみるなり、気になったところのスキルアップを目指しましょう。

と、これから勉強していく人向けとしてはこんな感じでしょうか。
ご意見ご感想をコメントよりお待ちしてます。