VOICE

フロントエンドエンジニアが語る、最近気になるフロントエンドフレームワーク

関連キーワード

「フレームワークを利用してフロントエンド開発を効率的に進めたいけれど、それぞれの特徴やメリットが整理できていない」という方に向けて、フロントエンドエンジニア 松下がわかりやすく紹介。今回は、「Vue.js」「React」「Astro.js」をピックアップして深掘りします。

シンプルさと柔軟性が大きなメリットのVue.js
大規模で複雑なアプリケーション開発に最適なReact

最近耳にすることの多いVue.jsとReactについて、メリットや使い方のコツを整理してみました。入門編ではありますが、利用時の参照情報として書き残したいと思います。

Vue.jsは、シンプルさと柔軟性の高さで手軽に始めやすい、UIを構築するためのJavaScriptフレームワーク。アプリケーションの一部機能への組み込みにも、完全なシングルページアプリケーション（SPA）の開発にも利用できます。そしてMeta（旧 Facebook）が開発したReactは、SPA構築に適したフレームワーク。大規模で複雑なアプリケーション開発にも使用されます。

まず、どのようなフレームワークかを端的にまとめてみます。Vue.jsとReactに共通する魅力は、以下の2点ではないでしょうか。

  • コンポーネントベースのアーキテクチャ
    コンポーネントベースのアーキテクチャは、再利用性と保守性を高めます。コンポーネントを作成して組み合わせれば、UIの部品化が容易になります。
  • 活発なコミュニティと充実のドキュメント
    活発なコミュニティと豊富なエコシステムを持っています。多くのドキュメントやサンプルコード、ツールが利用でき、問題発生時や学習が必要な時にサポートを受けられます。

次に、それぞれの特徴を整理します。
Vue.jsは...

  • 学習コストが低く使い始めやすい
  • シンプルな構文と直感的なデータバインディングが魅力

Reactは...

  • 高速なアプリケーションを構築できる
  • データのフローが一方向で、アプリケーションの状態管理が容易

Vue.jsは厳密にはフレームワークではありませんが、始めやすさが後押しして注目を集めているのかもしれません。ここからは、Vue.jsを少し細かく見ていきます。

  • シンプルな構文
    直感的なテンプレート構文を提供し、HTMLテンプレート内でコンポーネントのロジックを記述できます。そのため学習コストが低く、始めやすいフレームワークです。
  • 柔軟性
    Vue.jsは、徐々に導入できるプログレッシブフレームワーク。既存プロジェクトへの組み込みも、新プロジェクトの構築も可能です。

次にReactのメリットを見ていきます。

  • パフォーマンス
    仮想DOMを使用して効率的なUIの描画を実現。必要な部分だけ更新するため、高速なアプリケーションを構築できます。
  • 単方向データフロー
    データのフローが一方向で、アプリケーションの状態管理が容易。予測可能な方向にデータが変更されるため、バグやデータの競合を回避しやすくなります。

データバインディングは、それぞれのメリット・デメリットがあり、要件に応じて適宜使いわけができそうです。

  • Vue.jsのリアクティブなデータバインディング
    データとUIの同期を簡単に実現する、リアクティブな双方向データバインディング。自動で同期されるため、手動のDOM操作は必要ありません。データの自動反映は便利ですが、実装やテストが複雑になるデメリットもあります。
  • Reactの単方向バインディング
    Reactは単方向バインディングを採用。入力データの反映には機能の実装が必要ですが、要望に合わせて実装できるメリットもあります。

またReactは、HTML構文にJSX（JavaScript XML）を採用しています。JavaScript内にHTMLタグのような記述をするため、コンポーネントの作成時はすべてを1ファイルに記述できて便利です。独自記法ですので、学習コストがかかる点は注意。JSXを利用しない選択も可能です。

開発の効率化という観点で、使い方のコツもまとめました。

  1. ライブラリやエコシステムの選択
    周辺のライブラリやツール選択も重要です。公式の推奨ライブラリや人気のコミュニティパッケージを活用して、開発の効率化を図れます。
  2. パフォーマンスの最適化
    大規模アプリケーションを構築する場合、パフォーマンスの最適化にも注意が必要。仮想DOMの利用や不要な再レンダリングの回避など、パフォーマンスのベストプラクティスを学ぶと良いでしょう。
  3. コンポーネント設計と再利用
    再利用可能なコンポーネントの作成を考えながら、コードの可読性と保守性を高めましょう。
  4. ドキュメントとコミュニティの活用
    公式ドキュメントやチュートリアル、コミュニティのフォーラムやソーシャルメディアで情報収集し、問題解決や学習に役立てましょう。

私もプロジェクト要件やチームのニーズに合わせて、適切に取り入れたいと思います。現在はVue 3が最新メジャーバージョンですが、Vue 2にはない新機能が追加された一方で、互換性のない破壊的な変更も含まれています。利用したいライブラリがある時は、バージョン対応の確認も忘れないように！

今後は、APIで取得した集計データをグラフィカルにグラフ表示するような、ダッシュボードの作成で利用したいです。データ項目が多い時は、データの差し替えだけで画面に反映できると、作業効率化につながりそうです。

また、APIのサーバーサイドとフロントエンドの責任範囲を明確にできれば、インタラクティブな画面表示やUXを意識した画面構成など、フロントエンド側は本来の役割に注力できると思います。

静的サイト構築に特化したフレームワークAstro.js

今回もう1つ取り上げたいのはAstro.js。
「効率化のために、Webサイトはコンポーネントベースで作成したい。でも、SPAやサーバーサイドレンダリング（SSR）ではないし、Next.jsやNuxt.jsのような高度な機能は必要ない。」そんな要望に応えて、静的ジェネレートに重きを置いたAstro.jsが2021年に登場しました。

主な特徴は以下の3つが挙げられます。

  • 動作が高速
  • 導入のしやすさ
  • 優れた開発体験

ここからは、Astro.jsについて細かく見ていきます。

  • 動作が高速
    ビルド後に作成されるJavaScriptのバンドルサイズを小さくして送信量をおさえ、クライアント側のJavaScript処理の負荷を軽減することで高速化を実現しています。ページに含まれるJavaScriptは、ビルド過程で可能な限り取り除かれます。
  • 開発者が導入しやすい
    独自のテンプレート構文を持ちますが、ReactのJSXと同じような記述や、Vue.jsのようにテンプレート内にコンポーネントロジックを書くことができます。また、必要に応じてReactやVue.jsのコンポーネントも使える設計です。ReactやVue.jsの経験者には、導入の敷居が低いかもしれません。
  • 開発環境の快適さ
    TypeScriptに対応し、モジュール追加の際の設定ファイル自動更新など、開発者に快適な環境が準備されています。コミュニティも活発で、モジュールライクな機能の提供も増えています。

使い方のコツや注意事項もまとめました。

  1. 静的ジェネレートに特化
    静的ジェネレートを目的としたフレームワークのため、動的コンテンツの表現やWebアプリの構築には向いていません。
  2. SPAならではの表現は苦手
    作成ページは必ずマルチページアプリケーション（MPA）になります。画面遷移にアニメーションを絡めるような、SPAらしい演出表現は苦手としています。
  3. 発展途上のフレームワーク
    登場が比較的最近のため、まだまだ発展途上と言えます。頻繁にアップデートされていますが、追従する後発のフレームワークに主導権を奪われる可能性も！？今後も動向をチェックする必要があります。

ジークスの静的HTML作成は、EJSやPugといったテンプレートエンジンを使用しています。Astro.jsを利用すれば、より豊かな表現力を持ちながら、アプリケーション開発に近い環境で制作できるので、今後は静的サイトを扱うプロジェクトで積極的に利用したいと考えています。Vue.jsやReactの開発資産を活かしながら、モダンな環境で開発したければ、使う価値は十分にありそうです。

今回はフロントエンドエンジニア目線で、代表的なフレームワークの特徴を振り返ってみました。デザインから開発まで1チームで対応するジークスは、両者をつなぐ重要な役割としてフロントエンドエンジニアが存在し、活躍の場も広がっています。フロントエンド技術に興味がある仲間を募集していますので、興味がある方は面談にぜひ応募してみてください！

フロントエンドエンジニアの募集