はじめに
フロントエンドとバックエンドのフレームワークに関する知識が未熟なので調べていくうちに一般的に使用されているものがあることを知ったので、アウトプットしたいと思います。
フロントエンドとバックエンドの違い
| フロントエンド | バックエンド | |
|---|---|---|
| 違い | Webサービスやアプリの操作画面など ユーザーの目に直接触れる領域の開発 |
ユーザーの目に触れない機 能やデータなど裏側の開発 |
| プログラミング言語 | HTML CSS JavaScript |
Java Ruby PHP |
| 開発の流れ | 画面全体の初期設定 共通パーツの定義 アクションやレスポンスの定義 マークアップの実装 JavaScriptなどを用いたパーツ実装 検証 |
要件定義 基本設計 詳細設計 実装 テスト |
| 需要 | 基本的な言語で実務に携わることができ、案件も多いため需要は高い 参入者は多くライバル多数 |
より難易度の高い言語を駆使する 必要があるのでライバルは少ない |
フロントエンドフレームワークについて
-
メリット
HTML、CSS、Javascriptに直接記述することで柔軟性とシンプル性があるといえる -
デメリット
開発ごとに同じ機能を繰り返し実装しなければならず、非効率で、保守性も低くなる
このデメリットを解消するために、多くの開発現場では再利用可能なフレームワークを採用し、開発が大幅に効率化されています
フレームワークとは
フレームワークは、アプリケーションそのものを構成する「枠組み」の役割になります。そして、ソフトウェアフレームワークとは、ソフトウェア開発によく用いられる汎用的な機能を提供するひな形のようなもので、プログラマーはその骨組みにコードを記述して機能を追加してアプリケーションを開発。
このように、雛形を利用することによって、プロダクトを１から開発せずにすみ、ソフトウェア開発のための時間を大幅に短縮することができます
フロントエンドの3大フレームワーク
| 特徴 | メリット | デメリット | |
|---|---|---|---|
| React | Facebookによって開発 現在最も人気 |
・独立した再利用可能なコンポーネントで時間とコストが削減 ・シンプルな仮想DOMでパフォーマンスを向上 |
・初心者には学習必須 ・UIのレンダリングに特化している分、その他機能は別のツール等を組合わせて使用する必要がある |
| Angular | ・企業規模の大規模アプリケーションに適している ・堅牢な構造を持つ ・Googleのサポートがあるため、長期的に信頼性がある |
・高いスピードとパフォーマンス ・広大なエコシステム ・双方向データバインディング |
・初心者にとっては複雑 ・CLIドキュメントが明確に定義されていない |
| VueJS | ・ReactとAngularのいくつかのアイデアの組合わせ ・学習コストが低い、柔軟で軽量 |
・詳細で豊かなドキュメント ・再利用性とシンプルな統合 |
・過度の柔軟性がプロジェクトの整合性に影響を与える ・限られたサポートコミュニティ |
導入の際には次の3点を考えるのがいいとされています。
- プロジェクトの規模
- デザイン重視 or 機能重視
- 開発チームのバックグラウンド
さいごに
フロントエンドとバックエンドの話から、フレームワークについて簡単にまとめてみました。どのフレームワークを選択するかで開発スピードが変わってくるそうなので、特徴をよく理解したうえで活用できるようになりたいです