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

はじめに

フロントエンドの勉強をする上で、言語やフレームワークなど多く存在し、名前は知っているけど詳しくは知らない、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 後編）

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