フロントエンド開発は何をするのかご存知でしょうか。
聞いたことがあるけど、説明できるほどは知らないという方もいらっしゃるのではないでしょうか。
端的に言いますと、開発とついていますが開発手法とは異なり、開発フェーズの1つとして開発する部分を指しております。
本記事ではそんなフロントエンド開発について解説しております。
弊社はIT企業として20年以上の実績を保有しており蓄積したデータなどを活用しながらまとめております。
ぜひお読みいただき、知識を深めていってください。
目次
1.フロントエンド開発とは
システム開発における開発フェーズを示すフロントエンド開発について解説していきます。
1-1 システムやアプリのユーザーが直接見て触れる場所を開発すること
システムやアプリなどでユーザーが実際に動かす部分や見た目を開発することをフロントエンド開発と言います。
システムやアプリにはユーザーが見える場所と見えない場所があります。
例えば、地図のアプリを想像してください。
行きたい場所の住所を入力して検索ボタンを押すとそこまでの道順や所要時間も瞬時に表示されますよね。
フロントエンド開発では住所を入力する場所や検索ボタン、地図上に目的地までのルート表示などが正しくユーザーから見えるように開発をしています。
ただ、所要時間の計算やルートの捜索などは誰がやっているのでしょうか？
それはユーザーから見えない場所で、つまりスマートフォンなどの内部で行われており、これらはフロントエンド開発とは別な開発フェーズで開発しています。
1-2 バックエンド開発との違い
バックエンド開発とは前項で触れた、ユーザーから見えない場所を開発することです。
つまり、地図アプリでは目的地までの所要時間を計算したり、電車や車などの経路別に料金を算出したり、ユーザーからは見えないが、内部から支えるシステムを開発しています。
なので、お分かりだと思いますが、フロントエンド開発はユーザーから見える場所、バックエンド開発はユーザーから見えない内部の場所をそれぞれ開発することであり全くの別物と言えます。
フロントエンド開発 | バックエンド開発 |
|---|---|
ユーザーが見て触る場所を開発 | ユーザーから見えない場所を開発 |
表側 | 裏側 |
2.フロントエンド開発の流れ
フロントエンド開発の進め方について解説していきます。
2-1 要件定義～保守
まずは要件定義を行います。
機能要件の定義、非機能要件の定義、制約条件の明確化を行い、それらを文書化します。
開発は要件定義で定められた内容を基にPMが管理行い進めていきます。
次に基本設計、詳細設計を行います。
要件定義を基に実装の方法やシステムのインターフェースなどの設計を行います。
これらを基に実装（プログラミング）へ進んでいきます。
そして実装、テストのフェーズへ進み、設計書を基にプログラミング、テストを行います。
主にPGが担当しますが、状況によってSEが担当することもあります。
最後に運用保守を行い必要に応じて改修を実施するなど、システムの完成を目指します。
2-2 フロントエンド開発に必要なスキルと言語
フロントエンド開発では「HTML/CSS」「JavaScript」などの開発言語に加えてデザイン面のUI/UXとコーディングのスキルが基本的には必要となります
バックエンドと比較すると求められるものの難易度は低いですが、フロントエンドだけでなくバックエンドの知見程度の知識を持っておくとより重宝できます。
3.なぜフロントエンド開発とバックエンド開発に分ける必要があるのか
同じシステム開発なのになぜ分ける必要があるのか。
もちろん理由があって分けているのです。
当然分けないで進める場合もありまので、それも含めて解説していきます。
3-1 必要なスキルが異なるため分けている
この両者では必要となるスキルが異なるため、分けて開発されています。
フロントエンド開発を主に担当している者はフロントエンドエンジニアと呼ばれることもあり、
よくHTML・CSS・JavaScriptの言語を扱い、UI/UXやテストやデバッグの知識が求められます。
またバックエンド開発を主に担当する者はバックエンドエンジニアと呼ばれることもあり、JavaやPython、Rubyなど開発内容に合わせた言語を扱い、
APIの設計やデータベースの知識などが求められ、業界的にはバックエンド開発ができる者は重宝されがちです。
求められるものが異なることから、それぞれの開発フェーズとして分けて開発を進めた方が効率よく進められるため分けられております。
3-2 フルスタック開発との関係性
フルスタック開発とはフロントエンドとバックエンド開発を分けることなく、まとめて開発を行うことです。
フルスタックエンジニアと呼ばれることもあり、広い知識を持ちフロントエンド・バックエンド開発の両方を対応することができます。
そうすると、フロントエンドとバックエンド開発を分ける必要がない、そもそも片方しかできないエンジニアっていらないのではと思う方もいるかと思いますが必ずしもそうではありません。
専門性という部分と、費用面において分けた方が得策であるケースも多々あるためです。
まず、専門性の部分ですが、通常フルスタックエンジニアは広い知識を持っていますが、フロントエンドエンジニアやバックエンドエンジニア程の専門性はないケースが多いです。
それでも、優秀なフルスタックエンジニアもおり、引けを取らない専門性を有している方もおりますが、
その分人件費が高く、フロントエンドエンジニア1名、バックエンドエンジニア1名の計2名の方が安くなるなんてこともあります。
もちろん程度や状況にもよりますが。
例えばそこまで複雑で高度な開発内容ではないケースであればフルスタック開発、それ以外はフロントエンド・バックエンド開発に分けるといったような使い分けが必要となります。
3-3 フロントエンド開発とバックエンド開発を分けた方が良いケース
前述している通り、大規模なプロジェクトなど下記のケースであれば分けましょう。
- 大規模なプロジェクト
- 金融業界などのセキュリティが特に厳しい案件
- 高度なUI/UXが求められる案件
- 大量のデータ処理が必要な案件 など
例としていくつか記載をしたこれらの場合は分けた方が良いケースと言えます。
もっと言うと、前項で解説した複雑ではなくシンプルな案件（例えば写真を撮るだけのアプリなど）以外は分ける方が良いと言えます。
4．フロントエンド開発のまとめ
フロントエンド開発はユーザーが見る場所を開発することであり、デザイン面など含めて美的センスも関わる部分です。
ユーザーが使いやすく、そして見やすくするための工夫は欠かせません。
もしフロントエンド開発でお困りなら弊社に相談してみてはいかがでしょうか。
弊社では高品質なシステム開発を売りとしており、機能要件ももちろん非機能要件も正しく分析し、お客様にご満足いただけるシステム開発をご提案しております。
システム開発をご検討されている方は、下記よりご連絡をお待ちしております！
