フロントエンド開発言語まとめ（JavaScript多め）

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

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

## まずはHTMLからおさらい
- HTML
    - Webページのコンテンツ構造を作るための言語
    - タグと呼ばれるコンテンツを階層的に組み合わせることでWebページとなる
    - 10年ほど前にHTML5が登場し主流となっていたが2021年に廃止され、現在はHTML Living Standardが標準となっている
    - HTML5とHTML Living Standardに大きな違いはないが、使い勝手の良い仕様が追加されている
        - 参考：[どうしてHTML5が廃止されたのか](https://future-architect.github.io/articles/20210621a/)

- 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の操作が行え、動的な表現が簡単に実装できる

https://jquery.com/

- React
    - Meta（旧Facebook）が開発
    - ユーザインターフェイスを構築するためのライブラリ
    - SPA（シングルページアプリケーション）やネイティブアプリの開発のベースとして使用することができる
    - JSXでコーディングを行える
    - ネイティブアプリ用のReact Native、VRアプリ用のReact 360がある
   
https://ja.reactjs.org/
	
- Reactライブラリ
    - Preact
        - 軽量React
    - Redux
        - ステート管理のデファクトスタンダード
        - レンダリングコストが低いため大規模なWebアプリケーションに向いている
        - 独自用語が多くあり学習コストが高い
    - Recoil
        - Metaが開発したステート管理ライブラリ
        - Hooksライクにコーディングできるため、学習コストが低い
    - MUI（旧Material-UI)
        - React向けUIライブラリ
        - コンポーネント単位でUIを提供し、ドキュメントやデモも充実しているため、導入及び学習コストが低い

https://mui.com/

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

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

https://bootstrap-vue.org/

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

https://angular.jp/

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

https://nuxtjs.org/

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

https://nextjs.org/

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

https://riot.js.org/ja/

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

https://backbonejs.org/

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

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

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

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

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

[「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）](https://note.com/ppt_msdg_maas/n/naae427dbc37c)
[「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）](https://note.com/ppt_msdg_maas/n/na45c90b2f02f)
[「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）](https://note.com/ppt_msdg_maas/n/n8fd724f7db6c)


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