T-CREATORなぜフロントエンドエンジニアなのか｜フロントエンドエンジニアを目指すべき理由 #1-2-2
エンジニア入門
本連載FE入門 - 未経験からコーダーではなくフロントエンドエンジニアになるために - では
未経験からフロントエンドエンジニアになるための最短ルートを提示し
そこに到達するまでの内容を記事として紹介していきます。
連載トピックス
- フロントエンドの用語集
- 連載についての紹介
- 第1章 マインドや道筋の理解
- 第2章 必要スキルの学習
- 第3章 アプリケーション構築
- 第4章 チーム開発やプロダクト開発の理解
- 第5章 これからのキャリア
第1章 マインドや道筋の理解
- 1. フロントエンドエンジニアとは？
- 2. フロントエンドエンジニアを目指すべき理由
- 3. フロントエンドエンジニアになるためのロードマップ
- 4. フロントエンドエンジニアを目指すために必要な考え
今日のゴール
今日のゴールはなぜフロントエンドエンジニアなのかについて
理解できるところを目指します。
なぜフロントエンドエンジニアなのか
なぜフロントエンドエンジニアなのかを考えていきます。
Why フロントエンドエンジニア？
- 専門スキルがなくても目指すことが可能
- フロントエンドの重要性がかなり高い
- フロントを制するものが全てを制する
それぞれ一つずつ詳しく見ていきます。
専門スキルがなくても目指すことが可能
専門スキルがなくとも目指せる理由
- 学歴や特別な資格が必要ない
- 独学でスキル習得が可能
学歴や特別な資格が必要ない
学歴について
フロントエンドエンジニアになるために 学歴は必要ありません。
あったほうがいいという意見もあるかと思いますが 学歴がなければできない業務ではありません。
大事なのは学歴よりもポテンシャルになります。
何事にも意欲的に挑戦していくことと
志し高く継続的に成長していくことが求められます。
資格について
フロントエンドエンジニアになるために
特別な資格は必要ではありません。
あった方が良い資格（基本情報技術者試験）などはありますが
ないから仕事ができない、働けないというとはありません。
働く上で資格より大事なことはスキルです。
プロダクト開発やプロジェクト開発では以下が重要になります。
プロダクト開発やプロジェクト開発で重要なこと
- 仕様に沿って実装ができること
- 要求を満たす実装ができること
そのためためしっかりと対応ができるスキルを身につけることが大事になります。
独学でスキル習得が可能
フロントエンドエンジニアのスキルは独学で身につけることが可能です。 理由は以下になります。
スキルを独学で身につけることが可能な理由
- スキル習得は難しい勉強ではなくドキュメントを参照して書く力
- スキル習得の１つの判断はどういったアプリを作ったか
スキル習得は難しい勉強ではなくドキュメントを参照して書く力
フロントエンドエンジニアのスキル習得に
難しい勉強は必要ありません。
大事なことはドキュメントを参照して書く力です。
エンジニアというと理系ゴリゴリで
難しい計算を解いて答えを導き出していくような印象を
お持ちの方もいらっしゃるかもしれませんが
それらは研究職やギークな精鋭の方々になります。
というのも最近はエコシステムといって 専門の知識がなくても簡単に高度なプログラムを書くことができる フレームワークやライブラリが登場しています。
詳しくはフレームワークやライブラリについては後述の記事で紹介します。
そのためこれらを活用して如何に品質が高いものを作っていけるかが重要であり
難しい知識よりもライブラリやフレームワークを活用する力が必要になります。
また一般的によく利用されているライブラリやフレームワークは
ドキュメントが充実しています。
そのためドキュメントを見ながら実装していくことができる力が ライブラリやフレームワークを活用する力になります。
スキル習得の判断の１つのはどういったアプリを作ったか
スキルがあるかないかを判断する指標として
これまでにどういったアプリケーションを作ったことがあるか
ということが重要な指標になってきます。
というのも一般的な評価軸としては どういった処理ができるか、どういったUIが作れるかです。
どういった処理ができるか
処理については以下の様な処理をどう設計して実装できるかです。
どういった処理ができるかの例
- 非同期処理（データの取得、送信）
- ルーティング
- Dom操作
- ページング
- 状態管理
どういったUI（ユーザーインターフェース）
UIについては以下の様なUIをどう設計して実装できるかです。
どういったUIが作成できるかの例
- パーツ（ダイアログ、スケルトンスクリーン、タブ）
- フォーム（入力エリア、ボタン、チェックボックス）
- アニメーション（canvas、SVG、WebGL）
- レスポンシブ
アプリケーションからスキルの評価
これらの評価軸が含まれるアプリケーションを作っていくことで
どのスキルがあるかの判断軸になり評価につながってきます。
フロントエンドエンジニアになるためには専門スキルがなくても目指すことが可能
このようにフロントエンドエンジニアになるためには学歴や特別な資格が必要ありません。
必要なことは独学で身につけることが出来るドキュメントを参照して書く力とどういったアプリを作ったかです。
フロントエンドの重要性がかなり高い
昨今フロントエンドの重要性がかなり高くなってきました。
その理由は下記になります。
フロントエンドの重要性がかなり高い理由
- アプリケーション開発の変化
- ユーザー体験の重要性
アプリケーション開発の変化
- Webページの多様化
- LAMPからへSPAへ
Webページの多様化
ひと昔まえはPCサイト一択だったWebページですが
最近はものすごい多様化が進んでいます。
多様化の例
- 複数のOS、ブラウザアップデートによる差分
- スマホ、タブレットなどの端末によって違う画面サイズ
- インターネットが搭載された様々な機器の登場（ゲーム、テレビなど）
フロントエンドエンジニアはこれらの多様化に対して
それぞれ対応していく必要がありそのためのスキルが必要になってきます。
LAMPからへSPAへ
これまでの開発はLAMPが主流
ひと昔まえのWebアプリケーションは
LAMP（Linux + Apache MySQL + PHP）といわれる構成で開発されていました。
LAMPが主流だった理由
LAMPが主流だった理由はオープンソースで利用でき構築や開発が比較的簡単にできたことがあると思います。
LAMPのアーキテクチャパターンはMVC
そしてこのLAMPでは主にMVCという役割分担で開発します。
MVCにおけるエンジニアの役割分担
MVCにおけるModel（データ処理）とController（ロジック）などのコアな実装はバックエンドエンジニアが担当します。
フロントエンドエンジニアはView（見た目）のみを担当します。
そうするとフロントエンドが行うことはバックエンドから受け取ったデータを出力するだけです。
そのためプログラムをゴリゴリ書いて実装するのはバックエンドエンジニアの役割でした。
SPAの登場
時代の流れは早いです。
これまではLAMPのような構成から
UI/UXを含めたユーザー体験をよくしていくことが重要視され
SPAというパターンが登場しました。
SPAとはシングルページアプリケーションのことで
単一のページでコンテンツ切り替えを行うアーキテクチャになります。
SPAのアーキテクチャパターンはMV〇〇
SPAを構築するためのフロントエンドのライブラリやフレームワーク（ReactやVueやAngulerなど）があるのですが
これらはMV〇〇というアーキテクチャパターンになります。（代表的なものはMVVM）
MV〇〇におけるエンジニアの役割分担
そしてフロントエンドにおけるMV〇〇は
画面上でデータを制御するため基本的にフロントエンドエンジニアが全て実装を行います。
フロントエンドの実装
具体的にフロントエンドの実装はAPIへデータ取得のリクエストから
受け取ったデータを整形して画面に表示するところ
ルーティングといわれるリクエストされたURLに対して
どのページを表示するかどうかといったテンプレート管理まで含みます。
最近のアプリケーションはフロントエンドが中心
このように最近主流であるアプリケーション設計で開発されるアプリケーションは
フロントエンドが実装する役割の重要性が高い傾向にあります。
ユーザー体験の重要性
先程のSPAが登場した背景にもありましたが
昨今ユーザー体験をあげる重要性が非常に高くなりました。
ユーザー体験をあげる重要性
Amazonが過去に行った調査で
「サイト表示が0.1秒遅くなると売り上げが1%減少し、1秒高速化すると10%の売上が向上する」
という結果が報告されました。
仮に売り上げが10億円のECサイトだった場合
1秒高速化することで1億円売り上げがプラスになることになります。
ここまで売り上げに大きく影響するとなると
ビジネスとして非常に重要度が高いことが理解できると思います。
ユーザー体験はフロントエンドが担当
このユーザー体験は基本的にフロントエンドの役割になります。
フロントエンドが担当するユーザー体験
- ページの遷移の快適さ
- サイトの見やすさ
- フォームの入力しやすさ
そのためフロントエンドが担当する領域のユーザー体験をあげる重要性が 強く求められるためフロントエンドの役割が非常に重要になってきます。
Webアプリケーション開発する上でフロントエンドの重要性がかなり高い
このようにアプリケーション開発の変化したことと ユーザー体験の重要性がどんどん高くなっていることを踏まえると フロントエンドに求められる役割がかなり高いことがわかります。
フロントを制するものが全てを制する
フロントエンドを制するものが全てを制するといっても過言ではありません。
というのも今現在におけるアプリケーション開発は煩雑なサーバー構築、運用、監視、障害対応といったことが不要になり
アプリケーションの開発のみへ注力する仕組みが充実してきています。
またバックエンドの開発においてもフロントエンドエンジニアが開発できる仕組みが整備されています。
最近のアプリケーション開発
- インフラ→フルマネージドサービス
- バックエンド→サーバーレス + Node.js
インフラ→フルマネージドサービス
フルマネージドサービス
フルマネージドサービスとはサービス開始に必要なサーバ構築、監視・障害対応・セキュリティ対策まで
サーバ運用に関する全ての作業代行を提供するサービスのことをいいます。
フルマネージドサービスの活用
フルマネージドサービスを利用することで
インフラにおける煩雑な部分は全てベンダー（サービス提供会社）が実施し
本来注力するべきアプリケーション開発に力を入れられるようになっています。
フルマネージドサービスはインフラエンジニアが不要
フルマネージドサービスを利用することで
結果的にインフラエンジニアがいなくても安定したサーバーでアプリケーションを運用することが可能になります。
バックエンド→サーバーレス + Node.js（ノードジェイエス）
サーバーレス
サーバーレスもフルマネージドサービス同様に
サーバーの管理はベンダーに任せアプリケーションの部分のみ開発するモデルになります。
サーバーレスの活用
サーバーレスは一般的に有名なAWSのサーバーレスアーキテクチャパターンでいうと
API Gateway + Lambdaで構築できます。
※AWS以外にもMicrosoft AzureやGCPでも同様のサービスがあります
API Gateway（エーピーアイ ゲートウェイ）
API GatewayとはAPIのリクエスト先をまとめて管理できるもので
管理画面から設定が可能です。
アクセスを制限したり、リクエストに応じて呼び出す先を設定します。
Lambda（ラムダ）
Lambdaとは呼び出しがあったら起動し
必要に応じて処理を行い結果を返す仕組みです。
一定時間ごとの処理の実行やリクエストに応じてDB（データベース）へ問い合わせをして
結果をもとにデータを加工して結果を返すことができます。
サーバーレスはフロントエンドエンジニアで開発可能
API Gatewayについては管理画面から設定可能です。
そしてLambdaについてはNode.jsというサーバで実行できるJavaScriptでコードをかけるため
フロントエンドエンジニアがサーバー側の処理も担当できます。
最近のアプリケーション開発は全てフロントエンドエンジニアで実施することができる
このように最近のアプリケーション開発は
インフラ、バックエンドの部分をフルマネージドサービス、サーバーレス + Node.jsを利用することで
専任のエンジニアが不要になり全ての開発をフロントエンドエンジニアが担当することができるようになりました。
まとめ
なぜフロントエンドエンジニアなのかについて理解いただけましたでしょうか。
今回のポイントは以下になります。
今回のポイント
専門スキルがなくても目指すことが可能
フロントエンドエンジニアになるためには学歴や特別な資格が必要ありません。
必要なことは独学で身につけることが出来るドキュメントを参照して書く力とどういったアプリを作ったかです。
フロントエンドの重要性がかなり高い
アプリケーション開発の変化したことと
ユーザー体験の重要性がどんどん高くなっていることを踏まえると
フロントエンドに求められる役割がかなり高いです。
フロントを制するものが全てを制する
最近のアプリケーション開発はインフラ、バックエンドの部分をフルマネージドサービス、サーバーレス + Node.jsを利用することで
専任のエンジニアが不要になり全ての開発をフロントエンドエンジニアが担当することができるようになりました。
理解を深めるために
いきなり全てを理解することは難しいと思います。
内容を理解し知識として定着いくためには、繰り返しの学習が必要になりです。
さらに理解を深めていただくため改めて読み返すことをお勧めします。
終わりに
最後までご覧いただきありがとうございます。
この記事ではなぜフロントエンドエンジニアなのか｜フロントエンドエンジニアを目指すべき理由 #1-2-2について紹介させていただきました。
これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。
