はじめに

フロントエンドの勉強をする上で、言語やフレームワークなど多く存在し、名前は知っているけど詳しくは知らない、1つの言語は深い知識・経験はあるが、幅広い知識がないということがあるかと思います。

今回はHTML、CSS、JavaScriptの基本からJavaScriptのツールやライブラリなどについて、幅広く調べてまとめてみました。

まずはHTMLからおさらい

HTML
- Webページのコンテンツ構造を作るための言語
- タグと呼ばれるコンテンツを階層的に組み合わせることでWebページとなる
- 10年ほど前にHTML5が登場し主流となっていたが2021年に廃止され、現在はHTML Living Standardが標準となっている
- HTML5とHTML Living Standardに大きな違いはないが、使い勝手の良い仕様が追加されている
  - 参考：どうしてHTML5が廃止されたのか
CSS
- Webページの見栄え、デザインを定義する言語
- CSS3が最新で、3というのはバージョンのこと（HTML5も同様）
JavaScript
- クライアント側（Webブラウザ）で実行されるオブジェクト指向型のスクリプト言語
- 動的にWebページの内容を変更したり、入力フォームの内容をクライアント側でチェックしたりできる
- クライアントだけでなく、バックエンド、デスクトップアプリ、モバイルアプリなど幅広い用途で使用可能
- ECMAScript
  - JavaScriptの規格
  - JavaScriptはECMAScriptを標準仕様として作成された
  - バージョンが毎年更新されており、Edition6から年号表記となりES2015と呼ばれている（Edition5はES5）

JavaScriptツール

Webpack
- JavaScriptモジュールと束ねて1つにすることができるツール
- ファイルの依存関係の解決
- １ファイルにまとまることで、通信回数を減らしサーバ負担を減らせる
Babel
- JavaScriptコードを新しい書き方から古い書き方に変換するツール
- ES2015以上の仕様でJavaScriptを記述するとIE11は動作しないため、BabelによりES5に変換することでIE11でも動作させることができるようになる

AltJS

AltJS
- 「Alternative JavaScript」の略（＝代替JavaScript言語）
- JavaScriptで記述するよりも少ないコードで記述でき、可読性や保守性が高まるメリットがある
CoffeScirpt
- 動的型付け言語
- 少人数・高規模開発に向いている
- シンタックスシュガーによりJavaScriptよりもコンパクトに開発や可読性の高いコードを書くことができる
- Ruby on Railsで採用されている
TypeScript
- Microsoftが開発
- JavaScriptと文法はほぼ同じのため、学習コストが低い
- 静的型付け言語
- 大人数・大規模な開発に向いている
- 型チェックなどの機能があるため、コンパイルに時間がかかってしまう
JSX
- DeNAが開発
- 静的型付け言語
- 大人数・大規模な開発に向いている
- 文法がJavaScriptに似ているため、学習コストが低く導入しやすい
Haxe
- ActionScriptやC#に似た文法を持つオブジェクト指向言語
- 汎用性が高くJavaScript以外にもActionScript、C++、C#、Java、PHP、Pythonへ変換することが可能
- コンパイルが高速かつ静的型付け言語であるため、大人数・大規模な開発に向いている
Dart
- Googleが開発
- 動的型付け言語（静的型付けも可能）
- 大規模なWebアプリ開発に向いている
PureScript
- 静的型付け言語
- 関数で記述することができる

JavaScriptライブラリ、フレームワーク

jQuery
- JavaScriptをシンプルに記述できるようにするライブラリ
- JavaScriptでは数十行が必要となる処理が、数行に短縮できる
- HTMLやCSSの操作が行え、動的な表現が簡単に実装できる

React
- Meta（旧Facebook）が開発
- ユーザインターフェイスを構築するためのライブラリ
- SPA（シングルページアプリケーション）やネイティブアプリの開発のベースとして使用することができる
- JSXでコーディングを行える
- ネイティブアプリ用のReact Native、VRアプリ用のReact 360がある

Reactライブラリ
- Preact
  - 軽量React
- Redux
  - ステート管理のデファクトスタンダード
  - レンダリングコストが低いため大規模なWebアプリケーションに向いている
  - 独自用語が多くあり学習コストが高い
- Recoil
  - Metaが開発したステート管理ライブラリ
  - Hooksライクにコーディングできるため、学習コストが低い
- MUI（旧Material-UI)
  - React向けUIライブラリ
  - コンポーネント単位でUIを提供し、ドキュメントやデモも充実しているため、導入及び学習コストが低い

Vue.js
- ユーザインターフェイスを構築するためのフレームワーク
- HTML、CSS、JSONでWebページを作成できるため、学習コストが低い
- MVVMモデルで、ユーザが入力した値が即座に画面に反映される
- SPAが得意だが、大規模なWebアプリ開発には向いていない

Bootstrap Vue
- Vue向けUIライブラリ
- Bootstrap同様、クラスを指定することでデザインを適用させることができる
- コンポーネント単位でもUIを提供している

Angular
- Googleが開発
- コンポーネント指向フレームワーク
- Typescriptで作られている
- SPAの開発に向いている
- フルスタックフレームワークであり、フロントエンド開発に必要な機能が一通り揃っている
- Angular.jsは大規模開発でのパフォーマンス低下と学習コストが高いなどの欠点があったため、１から作り直しAngularが生まれた
- Angularではパフォーマンスは改善されている

Nuxt.js
- Vue.jsベースのJavaScriptフレームワーク
- SPA、SSR（サーバサイドレンダリング）、静的サイトの3つを構築することができる
- ファイルベースルーティング（ファイル名でルーティングを判別するため、ルーティング設定が不要）

Next.js
- ReactベースのJavaScriptフレームワーク
- SSR、静的サイトの２つを構築することができる
- ファイルベースルーティング
- 認証を要しない、外部に公開されるアプリケーションで利用できる

Riot.js
- コンポーネント指向UIライブラリ
- HTMLとJavaScriptを組み合わせたコンポーネントでWebページを構成する
- ライブラリ自体が軽量かつシンプル
- ReactにあるclassNameなどの独自用語がないため、学習コストが低い

Backbone.js
- クライアントサイドMVCを実現するためのフレームワーク
- Backbone（背骨）の名前の通り、MVCを実現する骨組みを用意している

最後に（宣伝）

パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の堀江です。

私はモビリティソリューションデザインチームに所属しており、モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。

いわゆる**「MaaS」**に取り組んでおります。

私たちが「MaaS」に取り組む中で、現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいことなどなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！

また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。

「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）
「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）
「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）

最後まで読んでいただき、ありがとうございました！