フロントエンドを気楽に歩こう
https://gyazo.com/fc1c6168607d9889b143c7deaca9aa1f
ブラウザの高速化とフレームワークの登場により、フロントエンド開発は進化を遂げていますが、「フロントエンド疲れ」をよく耳にするようになりました。
本当は一つ一つ学べばそれほど辛くないのですが、学ぶ事項が多岐にわたるのは大変ですね。
もし、あなたがフロントエンド学習に辛さを感じてしまうのであれば、一歩引いてみてはどうでしょうか。無理をして最前線のフロントエンドフレームワーク構成で頑張らなくて良いはずですよね。
家庭や趣味の時間を大切にしたい人は、CDN版を選んでください。覚えるのも導入も楽です。規模が大きくになってもjQueryよりはこんがらがりません。ワークフローがモダンじゃなくても誰も責めたりしません。それでも辛くなったらVueのコミュニティに助けを求めてください。
なぜフロントエンドの習得は大変なのか
選択肢が山ほど提示される
babelって何？axios？webpackってこれいるの？
sassとかlessとかpostcssとかCSS Modulesとか、これらも必要なの？
検索で引っかかる入門記事がみんな別のことを言ってて参考にならない
公式ドキュメントが何言ってるのか分からない
SPAの常識がわかりにくい
ブラウザ側の問題とフレームワークの問題、ツールチェイン（Node側）の問題、それぞれを別々に学ぶ必要がある
フロントエンドを辛くしない
現在フロントエンドをやっている人には「フロントエンドが辛い」という認識は無いことが多いです。
「追いつく側が辛い」という現状だと思います。
フロントエンドのワークフローは数年かけて進化してきました。数日で一気に追いつくのは難しいです。
必要なものだけを最低限取り入れていき、小さなおもちゃプロジェクトで「素振り」をしましょう。
頭の中を整理しよう
フロントエンドには、使わなくても良いものがたくさんあることを認識することが大事です。
まず、Node.jsもbabelもreactもvuexもaxiosもwebpackもsassも、必要なければ使う必要がありません。
とりあえずみんなが使っているから使わなきゃ、という意識で使うと、却ってそこでハマるなどの辛い目に遭います。
よくGithubに上がっているフルスタックのテンプレートから始めてしまうと、この罠にハマることがあります
フロントエンドの学び方で大事なのは、一気に複数の事項を学習しないことです。
それぞれ何のために使うものなのか？
Node.js
通常フロントエンドではNode.jsを使いますが、使わないルート（スクリプトタグのみで押し通す）もあります。
Node.jsを使う目的には、大きく２つあります。
vue-cliやbabel、webpackなどのツールはJavaScriptで書かれています。それを動作させる実行環境がNode.jsです。
また、Node.jsが同梱しているnpmという「パッケージマネージャ」は、webpackと深く関連しています。npmで外部パッケージをインストールし、JavaScriptから「import文」で参照することが出来ますが、webpackはその解決とビルドを行います。
npm
Node.jsについてくるパッケージマネージャです。
いろいろな便利ライブラリをnpmjs.comというところからダウンロードしてくれます。vueももちろんあります。
npm installをすると、node_modulesというフォルダを作って、そこにライブラリをインストールしてくれます。中を見ると分かりやすいです。
yarnという互換ツールがあります。歴史的経緯でVue関連のツールはyarnを使っていることが多いです。コマンドは違うものの基本的にnpmと互換動作をします。
webpack
npmからインストールしたライブラリを解決し、ビルドするためにあります。
雑に言って、複数のJSをつなぎ合わせ、１枚のbundle.jsにまとめるような動きをします。
設定によっては共通部分を分割することもできます。
出力後のbundleファイルを見てみると分かりやすいです。
vue-cli
vue createというコマンドでvueの雛形を作ってくれます。
また、cli-serviceというwebpackをラップしたツールを含んでいます。基本的には、.vueファイルをJavaScriptに変換してくれます。
vite
vue-cliを置き換える目的で開発されている、Vue, Reactに対応したバンドラーです。
vue-cliに比べて高速ですが、利用しているライブラリによってはビルドが失敗することもあり前のめりな採用は注意してください。
webpack-dev-server
webpack同梱のHTTPサーバです。
基本的にはローカルにHTTPサーバを立て、publicフォルダの内容を返すだけです。
ただし、bundle.jsにアクセスがあった場合には特殊な動きをし、webpackでリアルタイムにビルドしたものを返します。そのために開発中はこれを使うと、サーバを立てっぱなしにして開発をすることが出来ます。
proxyというローカルURLのアクセスを別のURLにリダイレクトする機能があります。
babel
古いブラウザやNode.jsで非対応の新しい文法で書いたJavaScriptを、古い文法にコンバートします。
新しい文法には、async / await, import / export など便利な文法があります。
与太話：Reactユーザは特殊で、JSXという独自記法を有効なJavaScriptに変換するためにbabelを使います。したがってReactにとってbabelは必須です。
Vueを使う上では別に必須ではありません。vue-cliのオプションから有効にすることができます。
TypeScript
babelと同様、JavaScriptにコンパイルするための言語です。
引数や変数宣言などに型を追記することが出来ます。コンパイル時にこの型情報を使ってエラーチェックをすることが出来ます。
Vueを使う上では別に必須ではありません。vue-cliのオプションから有効にすることができます。
sass
CSSに変数やMixin、ネストなど文法を拡張したものです。
SassコンパイラによってCSSにコンパイルされます。
CSSの構造化に役立つ機能が多く、プロダクション時にはよく使われています。
Less, Stylusなどもsassの仲間です。ただし、Sassのシェアが多いので、ほとんど目にするのはSassだと思います。
React等でCSSをJSで組み立てることが増えていることもあり、徐々にWebアプリケーションの分野では使われることが減っています。Web制作の現場ではバリバリ現役のはずです。
tailwind
sass等とはまた違ったアプローチのCSSフレームワークです。
組み込み（あるいはユーザ生成）のCSSクラスを駆使してスタイルを当てていくアプローチです。そのためVueテンプレートへの影響大です。
今後デザインシステムを持つプロジェクトでの採用が増えてくると思われます。
axios
GET, POSTなどのHTTP通信を行ってくれるライブラリです。
jQueryのajaxでも同じことが出来ますが、jQueryのシェア低下もあり新規案件で使われることはまれでしょう。
SPAの場合はブラウザとサーバ間でjsonのやり取りを頻繁に行うことになります。そのために最終的にはaxiosを使うようにすると、コードがスッキリします。
fetch API
axios同様HTTP通信を行いますがこちらはブラウザ標準です。
Node.jsにはまだありません。