フロントエンド開発をする上で、開発フローを理解しておくことは重要です。ではフロントエンド開発は、どのような流れで進められているのでしょうか。この記事ではフロントエンド開発の基本的な流れを説明していますので、フロントエンド開発初心者やこれから目指す人にとってこの記事が参考になれば幸いです。
会員サイト作成、Webフォーム作成、顧客管理を低予算で行いたいときには、CRMプラットフォーム「クライゼル」をローコード開発ツールとしてご利用することもおすすめです。合わせてチェックしてください。
そもそもフロントエンド開発とは？
フロントエンド開発とは、Webサイト・サービス・アプリ制作の際に、ユーザーが直接見る部分や操作する部分のソフトウェアを開発することです。主に「HTML」「CSS」「JavaScript」を利用して、見やすく操作しやすいUI（ユーザーインターフェース）を作成し、操作に必要な機能を実装します。
近年、スマートフォンやタブレットの普及により、様々なデバイスからのアクセシビリティが求められるようになりました。デザインや機能性、パフォーマンスなど、多岐にわたる要素を調和させ、使いやすく魅力的なインターフェースを提供することが、プロジェクトの成功・ビジネスの成功に直結します。
フロントエンドとバックエンドの違い
フロントエンドはユーザーが直接見る部分であり、バックエンドは裏側で動作しているため、ユーザーはバックエンドの処理を直接認識しません。
下記記事にて詳しく記載していますので、合わせてご覧ください。
フロントエンド開発の流れ
では、フロントエンド開発を行う際、どのように進めていくのでしょうか。開発方法は企業や開発チームなどによって異なり、統一されたフローは存在しません。
ここからは、フロントエンド開発の流れを解説しますが、プロジェクトや所属企業により進め方は異なります。一例としてご覧ください。
要件定義
要件定義とは、プロジェクトの目的や開発範囲（スコープ）、機能を定義するものです。アプリケーション開発において非常に重要なフェーズであり、プロジェクトの成功に大きく影響を与えます。
要件定義を基に見積を算出したり、WBS（Work Breakdown Structure）をひいてプロジェクトの進捗管理を行います。
要件定義があいまいだと、開発の漏れが発生したり、開発終盤で大規模な修正が発生することもあります。大規模な修正には時間やリソースが必要であり、スケジュールの遅延や費用に大きく影響します。
デザイン
要件定義を基にデザイナーがデザインを作成します。またどのようなデザインにするのか、クライアントと打ち合わせを行います。主な流れは下記です。
- クライアントからのヒアリング
- ワイヤーフレーム（画面設計）
- UXデザイン
- UIデザイン
- コンポーネントデザイン
- プロトタイプ作成
クライアントからのヒアリング
要件定義を基にプロジェクトの目的や、ソフトウェアの役割を理解します。そのうえで、クライアントとやり取りを行いデザインの方向性について決めます。
具体的には下記のような項目をヒアリングすると良いでしょう。
- ソフトウェアを利用するユーザー層、ターゲット層
- デザインの制約の有無（トンマナ、既存アプリケーションの確認）
- デザインの方向性
また、ソフトウェアの中核であるページを2,3枚デザインしながら方向性を固めると、デザインの手戻りも少なく抑えられるのでおすすめです。
ワイヤーフレーム（画面設計）
要件定義書からワイヤーフレームを作成します。デザインの基本的な骨組みを示すものであるため、不要な詳細や装飾を省き、必要な画面や機能を書き込む程度にします。
具体例としては、下記画像のようなレベルで作成すると良いでしょう。
UI・UXデザイン
作成したワイヤーでユーザーが使いにくいと感じるものはないか確認しましょう。
FigmaやXDなどのデザインツールを用いて、ワイヤーを作成するとクライアントへの画面共有URLを発行出来たり、フィードバックの書き込みや修正管理をできるのでおすすめです。
コンポーネントデザイン
コンポーネントデザインは、再利用可能なUI要素を作成することに焦点を当てています。ボタン、フォーム、カード、ナビゲーションバーなどの基本的な要素がこれに該当します。
具体的には下記のようなデザイン仕様書を作成すると良いでしょう。
bootstrapのUIキットコンポーネントデザイン
デザイナーの作業を高速化するために、Bootstrapなどのフレームワークの知見を得ると良いでしょう。
プロトタイプ作成
デザインツールにて、最終的には下記の用なプロトタイプを作成します。
XDで作成されたプロトタイプ（adobe XD Trailが提供するサンプル）
このようなプロトタイプがあることで、クライアント側はもちろん、実装するエンジニアとの認識を合わせやすいといったメリットがあります。
設計
主にコードやデータ構造、アルゴリズムなど、ソフトウェアの内部の仕組みに焦点を当てた設計です。開発者が実際のコーディング作業を行う前に、ソフトウェアの構造やコンポーネント間の関係を詳細に計画するプロセスです。
内部設計には、モジュールの定義、データのフロー、関数やクラスの設計などが含まれます。これにより、開発者は効率的かつ一貫性のあるコードを書くことができます。
マークアップ
フロントエンド開発におけるマークアップは、ウェブページやアプリケーションのデザインを実現するために、HTMLやCSSなどのマークアップ言語を使用して構造やスタイルを定義します。
ローカル環境のブラウザ上で確認できるようになるため、より一層完成形に近づきます。
プロジェクトによっては、Vue.jsやNext.jsなどのフレームワーク※を用いてマークアップをすることもあります。
マークアップの段階では、指定したデザイン通りにマークアップされているか、テストをすると良いでしょう。特に下記の用な点に注意しましょう。
- レスポンシブデザインであるか
- アクセシビリティは十分か
- ユニバーサルデザインへの考慮は出来ているか
- 様々なブラウザでの表示確認（クロスブラウザテスト）
実装するにあたり、足りていないデザインの定義を発見することもあるでしょう。不明な点はデザイナーと連携して進めましょう。
※フレームワークについては、下記記事にて詳しく記載しています。合わせてご覧ください。
実装
マークアップされたコードを利用して、主にJavaScriptで実装を行います。
- 動的な要素の実装
- バックエンドとの繋ぎこみ
- ドキュメンテーション
動的な要素の実装では、画面設計書や要件定義書を参照しながら機能を実装し、時にはデザイナーやプロジェクトマネージャーと認識を合わせながら開発を進めます。
バックエンドとの繋ぎ込みでも、バックエンドエンジニアと会話する事もあるでしょう。
また、コードを書くだけでなく、コードやプロジェクトのドキュメントを作成することで、他の開発者との協力、メンテナンスを行いやすくします。
テスト・デバッグ
実装の過程で発生したエラーやバグを修正するために、開発者はデバッグツールを使用したり、コードを検証したりします。コンソールログやエラーメッセージを活用して問題を特定し、効果的に修正します。
単体テスト（Unit Testing）
ユニットテストは通常、関数やメソッドなどの小さな単位（ユニット）に焦点を当てます。これにより、個々のコードブロックや機能が期待どおりに機能し、不具合がある場合は修正します。
正常に動作しないプログラムの範囲が明確であることから、修正が効率的に進みます。
統合テスト（Integration Testing）
実装した機能が、正しく作動するか確認します。見た目の動作だけではなく、アプリケーションの全体の流れに焦点を当てます。開発者自身がテストを行う事もありますが、この段階ではテストを行うためのシナリオを用意し、テスターがテストを行う事が多いでしょう。
保守
ソフトウェアは作ったら終わりではなく、定期的なメンテナンスが必要です。
- 脆弱性への対応
- プログラム言語のバージョンの管理・更新
- 障害を引き起こす可能性のあるプログラムの修正
はもちろんの事、クライアントとの契約内容や業務内容によっては下記のような事も必要になるでしょう。
- バグ修正
- 追加機能開発
- UI・UXの変更
まとめ
今回はフロントエンド開発の流れを解説しました。ウォーターフォール型開発の場合、この記事でご紹介した流れを上から順に行います。
開発の流れや、各担当範囲はプロジェクトや企業によって変わります。一例として参考にしていただければ幸いです。
バックエンドエンジニアが不足している？
会員サイト作成、Webフォーム作成、顧客管理を低予算で行いたいときには、CRMプラットフォーム「クライゼル」をローコード開発ツールとしてご利用することもおすすめです。
データベースサービスを基盤とするCRMであり、フロントエンドの知識があればカンタンに会員サイト（マイページ）、Webフォームを作成いただけます。
ご興味がございましたら、こちらからカタログをダウンロードをいただけます。
