サーバサイドの人間が最新のフロントエンドに入門した

cassetteの延澤です！

今回は「サーバサイドの人間が最新のフロントエンドに入門する」について書いていきます。私自身普段はサーバサイドのプログラミングがメインです。しかし、最近事情がありフロントエンドの開発もしております。
元々、マークアップエンジニアの仕事もしていたのでHTML・CSS・jQuery程度は書けました。しかし、進化の激しいフロントエンドにどっぷり浸かるよりも他の分野を優先してきました。ただ、やっと重い腰を上げて(ざっくり言うと仕方なく)フロントエンドやるかーぐらい気持ちで挑みました。
そうして、改めて勉強してみてフロントエンドの現状のベース情報が少ないなと感じましたので、今回ブログにまとめました。

対象ユーザー

以下に書いてある内容はプログラミング初心者には結構難しい内容です。
プログラミング経験2年目以降ぐらいで、そろそろJavascriptを勉強しようかと考えている人に向けて書いてあります。また、JavaScriptはエコシステムは進化が激しいので、2017年12月当時の内容になります。

HTML・CSSをまずきっちりやる。そしてタスクランナー

まず、HTMLとCSSを使ってしっかりマークアップが出来るようにしておきましょう。ここを飛ばすと流行りのReact・Vueのライブラリのベースとなっているコンポーネントについての設計が出来ません。また、最終的なアウトプットが出来ません。
ここではセマンティックなマークアップなどは現状意識しなくて大丈夫です。但し、CSSはSASS・SCSSなどで記述するようにしましょう。Gulpなどを使ってSASS・SCSSをコンパイルしてCSSを吐き出す訓練を今のうちにしてます。ここで意識するのはGulpが何を解決するツールなのか同時に理解しておくことです。

フロントサイドJavaScriptとサーバサイドJavaScriptについて

たぶん、フロントエンドのエンジニアの人は当たり前すぎて特に意識していないのかもしれませんが、ブラウザで使用するJavaScriptとサーバサイドのJavaScirpt(Node.js)が違うことの言及があまりされていないです。どういうこと？と思われるかもしれませんが、例えばDOMなどを操作するAPIはサーバサイドだと不要だし、MySQLを操作するAPIはフロントエンドでは不要です。そして、何が分かりづらいかと言うとサーバサイド(Node.js)でのプログラムの記述とフロントエンドのプログラムの記述が微妙に違っているということです。分かりやすいのが、モジュール管理で使用するrequireでフロントエンドでは使用出来ません。しかし、パッケージ管理のnpmなどは共通で使用しています。互いに重なり合っている箇所もあるが、重なっていない箇所もあるということです。全体的にJavaScriptの各ツールは「互いに重なり合っている箇所もあるが、重なっていない箇所もある」ことが多く混乱します。

もうJavaScriptはコンパイル言語だった

はい、最新のJavaScriptはもう真面目にやろうとすると簡単な動的言語ではもはやありません。まず先程のWebpackの役割はファイルの依存関係を解決して1ファイルにまとめることが主な役割です。ここでややこしいのがどうせ依存関係を解決してJSを1ファイルにまとめるなら、一緒にトランスコンパイルもしちゃおうぜというBabelの存在です。サーバサイド側で分かりやすくいうと、Python3系で記述したのをPython2系の記述に変換(トランスコンパイル)してあげることです。つまり、JSの複数あるファイルを1ファイルにまとめつつ、同時にトランスコンパイルもします。
また、どうせ最後にWebpackで1ファイルにまとめる処理をするなら、素のJavaScriptを書くよりも、型付けがあるTypeScriptで記述した方が良いいじゃねという発想もあります。
そのため、現状の開発はWebpackでファイルの更新をwatchしながら差分コンパイルするような開発スタイルになります。

サーバサイドのMVCとフロントサイドのMVCは違うことの理解

この内容を真面目に書こうとすると、これだけで膨大な文字量になってしまいます。ここで言いたいのは一旦サーバサイドのMVCは忘れましょう。
MVVMやBackborn.jsが必要になった理由を勉強すると分かってきます。

まとめというか雑記

JavaScriptのことを書こうとするとあれもこれも沢山書くことが多くなります。つまり、それだけ勉強することが多いです…
例えば他にも、コンポーネント・非同期処理・イベント駆動・関数型・リアクティブプログラミングなど重量級のテーマが盛りだくさんです…
ただ、それだけサーバサイドと違って新しい概念が次々に起こっているのも事実です。もし、常にプログラミングの最前線にいたいならJavaScriptを学ぶのが良い選択です。それはいくつかの言語に関わってきた、私の感想です。何でそういう感想になるのかというと、サーバサイドで例えばScalaなどの非同期でプログラミングするのが大規模システムや広告システムではない限りそこまでビジネスメリットを感じないからです(個人的には書きたいです)。反対に、JavaScriptの方が開発の小回りが効きやすいので一部導入はサーバサイドに比べて比較的簡単な印象を受けました。最近、プログラミングで刺激を受けることが少なくなってきましたが、改めて面白いなと認識できる良い経験になりました。入門したてて間違っている箇所や印象論あると思いますが、察して下さい。今回、書ききれない内容もありましたのでまた後日書ければと考えてます。