フロントエンド開発とは何かご存知でしょうか。
言葉の通り前の方を開発するのかな？そもそも前とは、、？など
聞いたことはあるが、説明できないという方もいらっしゃるのではないでしょうか。
端的に言うと、開発とついていますが開発手法とは異なり、開発フェーズの1つとして開発する部分を指しております。本記事ではそんなフロントエンド開発について解説しております。
よく比較されがちなバックエンド開発と何が違うのか、その辺りも含めてシステム開発会社として25年経つ会社に所属している私がこれまでの経験から解説します。
ぜひお読みいただき、知識を深めていただけると幸いです。
目次
1.フロントエンド開発とは
システム開発における開発フェーズを示すフロントエンド開発について解説していきます。
1-1 フロントエンド開発は、ユーザーが直接見て触れる場所を開発すること
システムやアプリなどでユーザーが実際に動かす部分や見た目を開発することをフロントエンド開発と言います。
システムやアプリにはユーザーが見える場所と見えない場所があります。
例えば、地図のアプリを想像してください。
行きたい場所の住所を入力して検索ボタンを押すとそこまでの道順や所要時間も瞬時に表示されますよね。
フロントエンド開発では住所を入力する場所や検索ボタン、地図上に目的地までのルート表示などが正しくユーザーから見えるように開発をしています。
ただ、所要時間の計算やルートの捜索などは誰がやっているのでしょうか？
それはユーザーから見えない場所で、つまりスマートフォンなどの内部で行われており、これらはフロントエンド開発とは別な開発フェーズ（バックエンド）で開発しています。
いわゆるUI／UXの部分をフロンドエンド開発で対応していることになります。
UI／UXデザイナーについて興味がある方は UI/UXデザイナーとは？仕事内容、必要なスキル、将来性を解説 の記事も併せてご参照ください。
1-2 バックエンド開発との違い
バックエンド開発とは前項で触れた、ユーザーから見えない場所を開発することです。
つまり、地図アプリでは目的地までの所要時間を計算したり、電車や車などの経路別に料金を算出したり、ユーザーからは見えないが、内部から支えるシステムを開発しています。
フロントエンド開発はユーザーから見える場所、バックエンド開発はユーザーから見えない内部の場所をそれぞれ開発することであり全くの別物と言えます。
バックエンド開発の詳細については、「バックエンド開発とは？フロントエンド開発との違い」の記事をご参照ください。
フロントエンド開発 | バックエンド開発 |
|---|---|
ユーザーが見て触る場所を開発 | ユーザーから見えない場所を開発 |
表側 | 裏側 |
2.フロントエンド開発の流れ
フロントエンド開発の進め方について解説していきます。
2-1 要件定義～保守
まずは要件定義を行います。
機能要件の定義、非機能要件の定義、制約条件の明確化を行い、それらを文書化します。
開発は要件定義で定められた内容を基にPMが管理行い進めていきます。
次に基本設計、詳細設計を行います。
要件定義を基に実装の方法やシステムのインターフェースなどの設計を行います。
これらを基に実装（プログラミング）へ進んでいきます。
そして実装、テストのフェーズへ進み、設計書を基にプログラミング、テストを行います。
主にPGが担当しますが、状況によってSEが担当することもあります。
最後に運用保守を行い必要に応じて改修を実施するなど、システムの完成を目指します。
具体的なシステム開発の進め方については、「システム開発の開発工程とは？10個のフェーズに分けて解説」の記事をご参照ください。
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が求められる案件
- 大量のデータ処理が必要な案件 など
例としていくつか記載をしたこれらの場合は分けた方が良いケースと言えます。
もっと言うと、前項で解説した複雑ではなくシンプルな案件（例えば写真を撮るだけのアプリなど）以外は分ける方が良いと言えます。
「フロントエンド開発」まとめ
フロントエンド開発はユーザーが見る場所を開発することであり、デザイン面など含めて美的センスも関わる部分です。ユーザーが使いやすく、そして見やすくするための工夫は欠かせません。
フロントエンド開発について、まとめてきました。弊社は会社を立ち上げてから25年が経ち、社内にもエンジニアだけでなくデザイナーもいる会社です。長年の経験からシステム開発の手段について様々アドバイスできると思います。システム開発で行き詰った時には、どんな些細なことでも、お気軽にお問い合わせいただければと存じます。相談は無料です！
デザインの外注については、 WEBデザインを外注する際の費用相場、進め方、作業範囲を解説 の記事で詳細を記載しています。
