フロントエンドとは
フロントエンド・バックエンドという概念があるが、広義の意味でユーザが目に見える部分をフロントエンド、データベースとの通信やシステムの基幹処理を行うのがバックエンドという風に分類できる。
フロントエンドにもWebアプリ、ネイティブアプリがあり、別のフレームワークや言語を使うことが多い。
※共通化できるフレームワークも出てきている
Webアプリ
ブラウザ上で動くアプリケーション。
PCやスマホの各ブラウザからのリクエストをWebサーバがHTTPで返す。
※HTTPでの通信をベースに、websocketなど別のプロトコルも使用可能
OSやブラウザが異なっても、１ソースである程度動く
【OS】
・Linux
・Windows
・MacOS
【ブラウザ】
・Chrome
・Safari
・Edge
・FireFox
・InternetExplorer
挙動やデザインが完全に同じではないこともある
ネイティブアプリ
スマホやタブレット上で動くパッケージアプリで、AppStoreやPlayStoreに公開されたアプリをダウンロードして使用する。
スマホを持っているのが通常の今日、最も使用される頻度が高いのはネイティブアプリである。
上述のようにiOSとAndroidでストアが分かれていることからも分かる通り、iOS仕様・Android仕様に合わせた異なるパッケージ(IPA/APK)となる。
OSで提供されているものを使用するため、OSの種類や、OSのバージョンにより挙動が異なることがある。
フレームワーク
フレームワークのトレンドでは
React.JS
Vue.js
Angular.js
が上がってくるが、中でもReact.JS/Vue.jsがツートップなのが現状。
これらが、SPAで作られているのに対し、従来ながらのPHP、Ruby on Rails、ASP.netのMVCモデルのWebアプリケーションもある。
その他プロジェクトの選択肢として覚えておくべき技術
- PWA (Progressive Web Apps)
- ハイブリッドアプリ
- SSG (静的サイトジェネレーター)
- Jest
- Storybook
まとめ
プロジェクトの規模や予算により様々な選択肢が可能なように現在広く使われている技術の吸収が大事である。
JestやTestCafeは自動テストを取り入れることで、テストコストの削減につながる。
モックやワイヤーフレームを用いてUIの要件定義をすることで実装コストを下げるのも有効で、
sketch・figma・XD・Cacoo・InVisionなどのツールを使いこなすことも必要。