.svg)
近年、グローバル市場の競争激化とデジタル技術の急速な進歩により、WebサイトやWebアプリケーション開発がますます盛んになっています。しかし日本においては、教育体制の整備が追いついておらず、プログラマーやエンジニア不足といった問題が起こっています。
Webアプリケーションの開発には様々な人が関わりますが、今回は「フロントエンド」と「バックエンド」に焦点を当て、それぞれの概要や開発言語、開発の流れ、そしてバックエンドをサポートするクラウドサービスのBaaSについて解説していきます。ぜひ、最後までご覧ください！
フロントエンドという言葉を分解し日本語訳すると、フロント＝表側、エンド＝部門に分けることができます。つまりフロントエンドとは、ユーザーから「見える」部分を指します。デバイスを通じて外部へ出力を行い、ユーザーは画面に触れて情報入力といった操作をする、データのやりとりを行う最前線とも言えます。またフロントエンドは、ユーザーに対して視覚的な情報を与えるため、「見やすさ」や「使いやすさ」に焦点を当てて開発が行われています。
このフロントエンドの開発を行うのが、「フロントエンドエンジニア」です。Webデザイナーやコーダーをはじめとする開発に関わるメンバーと連携をとりながら、ユーザーが見やすく使いやすい見た目＝フロントエンドの設計・構築・実装していきます。そのため技術力だけでなく、コミュニケーション能力も必要になります。
ユーザーから見えるフロントエンドに対して、バックエンドという言葉を分解し日本語訳すると、バック＝裏側、エンド＝部門と分けることができます。つまり、バックエンドはユーザーからは「見えない」サーバーサイドの内部的な処理のことを指します。
このバックエンドの開発を行うのが、「バックエンドエンジニア」です。サーバーサイドの作業を行うことから、サーバーサイドエンジニアと呼ばれることもあります。サーバーの構築や開発、運用・保守管理、セキュリティ管理をしています。バックエンドエンジニアは細かいミスまで気づく注意力とロジカルな思考が求められます。
ここでは、フロントエンドとバックエンドで使われる開発言語を紹介します。
【フロントエンド】
・HTML
HTMLはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、文章構成や役割を示すマークアップ言語です。ちなみにマークアップとは、テキストの構造や装飾といった情報をコンピュータが正しく理解できるよう、タイトルなどの各要素に「タグ」と言われる識別の印をつけていくことです。文章・写真などをどのように表示するのかの指示を出すことで、基本構造が把握しやすくなります。
・CSS
CSSは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、テキストサイズやカラー、背景などをつけることで、見た目を整える言語です。
・JavaScript
JavaScript（ジャバスクリプト）は、Webページに動きをつけるプログラミング言語です。ポップアップウィンドウやスライドショーなど多様なアニメーションによって、より視覚的に訴える効果が期待できます。また、システム開発のバックエンドでも用いられます。
【バックエンド】
・Java
Java（ジャバ）はプラットフォームに依存せず実行可能、オブジェクト指向、処理速度が早い、ライブラリが豊富、セキュリティが高いといった特徴を持っている言語です。世界中で使われている人気プログラミング言語の1つで、Googleが開発に用いる三大言語（Java、C++、Python）のうちの1つでもあります。フロントエンドで紹介したJavaScriptと名前が似ていますが、JavaScriptはブラウザ上で動作する言語であり、全くの別物です。
・Rudy
Rudy（ルビー）は、オブジェクト指向の言語で、コードがシンプルで分かりやすく、不具合の原因の特定も容易で、初心者でも取り組みやすい言語と言われています。開発者のまつもとゆきひろ氏が「プログラミングを楽しむこと」に焦点を当てて開発したということで、シンプルかつ自由度の高いRudyは現在も人気があります。また、日本で開発されたプログラミング言語で初めて、国際規格の国際電気標準会議（IEC）認証されたプログラミング言語でもあります。
・Python
Python（パイソン）はインタプリタ言語で、少ないコードで書けるためミスが起こりづらく、開発効率が向上するという特徴があります。ちなみに、インタプリタ言語とは、人が書いたプログラムをコンピュータが読み込みながら即座に機械語に翻訳して実行する言語です。
ここで、フロントエンドとバックエンドの関係性を「ネットショッピング」を例にまとめていきます。
【ユーザー】
フロントエンドが表示している情報を閲覧し、欲しい商品リストに追加したり、カートに入れて購入手続きを行う
⇅
【フロントエンド】
・ホームページ、商品ページ、カート、お支払いページなどの画面を表示する
・ユーザーが購入ボタンを押した場合や登録情報の変更をした場合はその要求を受取り、バックエンドへ渡す
⇅
【バックエンド】
・データベースへの商品情報の保存・取得やユーザー認証といったユーザーからは見えない処理などを行う
・フロントエンドから受け取ったユーザーの要求（注文など）を処理し、フロントエンドに返す
フロントエンドとバックエンドのどちらも、企画・設計・実装・テストといった基本的な流れは変わりません。
【フロントエンド】
フロントエンドはユーザーの目に触れるため、見た目に関するデザインが必要になるという点が、バックエンド開発の流れと大きく異なる点です。
初期設計
仕様書や設計書をもとに画面全体の設計を行います
▼
コンポーネントの定義
ヘッダーやフッター、ボタンなど繰り返し使われる共通のパーツを定義します
▼
アクション・レスポンスの定義
ボタンを押すなど、ユーザーからの要求に対してのアクションやレスポンスを定義します
▼
マークアップ実装
これまでの設計や定義をもとに、HTMLやCSSで実装を行います
▼
JavaScriptやTypeScriptで実装
共通パーツの動きをつける、JavaScriptやTypeScriptで実装を行います
▼
テスト
全ての実装が完了したら、画面の表示に乱れなどの不具合がないか確認します
【バックエンド】
バックエンド開発はシステム開発と大きな差はなく同じような流れとなっています。過去のブログでシステム開発について書いていますので、そちらもあわせてご覧ください。
企画・要件定義
使用や要件を把握し、その上でバックエンド開発の企画、要件の詳細を定義します
▼
設計
まとまった要件通りに、詳細に設計していきます
▼
開発
設計をもとに開発し、要件全ての開発が完了したら、開発のフェーズは終了です
▼
テスト
開発チーム内でのテストだけでなく、ユーザー側の環境でも問題なく動作するかテストします
.png)
開発するWebアプリケーションそれぞれにデザインをする必要があるフロントエンドに対して、バックエンドは比較的共通している部分も多いため、バックエンドの開発は行わず、BaaSを使うという手段もあります。BaaSを導入することで、バックエンド開発分の時間短縮やコスト削減も見込めます。ちなみに、BaaSとはBackend as a Serviceの略で、Webアプリやモバイルアプリのバックエンド機能を、アプリケーションサーバー側で代行するクラウドサービスです。BaaSはサービスによって提供内容が違いますが、ここでは一般的な機能例を挙げていきます。
・ユーザー認証機能
サービスのユーザー登録やログインの管理を行う機能で、ソーシャルメディアアカウントを使用したログインも含まれます。また、セキュリティ機能も含まれていて、トークンベースの認証や2要素認証などが提供されることもあります。
・データストア機能
写真などのデータや、ユーザー情報などのサービスに関わる様々な情報を保存・共有することができます。
・サーバーサイド処理実装機能
BaaSで提供されている機能のみならず、サービス固有のサーバーサイド処理をカスタムして実装することができます。
他にも様々な機能があり、BaaSサービスごとに特徴もあるため、活用を検討する場合はいくつかの選択肢を用意して、サービスの要件に合致するものを選択しましょう。
ちなみに、似たような言葉で「MBaaS」がありますが、これはMobile Backend as a Serviceの略で、モバイルアプリ向けのバックエンド構築を目的としたBaaSです。
フロントエンドとバックエンドを簡単にまとめると、フロントエンドはユーザーから見ることができて、情報をやりとりをする画面、バックエンドはユーザーから見えない部分で、ユーザーからの要求を処理する画面です。開発にあたっては様々な言語があり、どちらも技術力だけでなく、コミュニケーション能力やロジカルな思考などといった、それぞれの開発の特徴に合わせた能力が求められます。また、BaaSというクラウドサービスを活用し、バックエンドを開発しないという選択肢も誕生しています。
JIITAKでは、フロントエンドとバックエンドともに常に最新の技術にアンテナを張り、優れたフレームワークを使用しながら、効率的かつ柔軟なフロントエンド開発や幅広いバックエンドの要件に対応しています。Webアプリ開発でお困りごとがありましたら、ぜひ一度JIITAKまでご相談ください！
システム開発の種類についてはこちらの記事で詳しく解説されています。あわせてご確認ください。
