技術者のキャリアってどうやって積み上げるんでしょう？
新人のときに経験を積んだジャンルのまま変えないケースが多いのではないでしょうか。
3年ぐらい経験積んじゃうと、もう他に行けないって思いがちですが、
新しく覚えるのが大変な反面、やる気があれば色々なキャリアを積むことももちろん可能。
「今、組み込みエンジニアなんですが、実はWEBエンジニアに憧れてる」なんて人に見て欲しい記事になります。
今回、WEBエンジニアのタイプ毎の特色をご紹介します。
この記事で解決できること
- WEBエンジニアタイプ毎の特色がわかる。
エンジニアタイプとは？
WEBエンジニアの3タイプを色分けしました。詳しい説明は後ほど出てきますので今はざっくり捉えてみてください。
フロントエンド、サーバサイド、インフラは連携して動作しますので、概要レベルの知識をひととおり知っておくことをお勧めします。
| 赤字 | フロントエンドエンジニア | GUIなど目に見える部分をつくる。 |
| 緑字 | サーバサイドエンジニア | サーバ上で動くプログラムをつくる。 |
| 青字 | インフラエンジニア | サーバーOS、データベース、ネットワークなどの環境を整える。 |
フロントエンドエンジニア
WEB開発と言うとフロントエンド開発を指すことが多いです。WEBページ（GUI）を開発します。
厳密にいうとHTML（文章コンテンツ作成）とCSS（基本のデザイン）はフロントエンドエンジニアではなくマークアップエンジニアが担当します。マークアップエンジニアはSEO（Search Engine Optimization）の責任も持ちます。
ではフロントエンドエンジニアは何をするのか？
ちょっと雑に言うとWEBページをユーザが操作したときの処理を作り込みます（厳密に言うとユーザ操作だけでなくタイマー処理など非同期イベントもあります）。
たとえばJavaScriptでマウスクリックなどのイベントを受けたときに、CSSのプロパティを動的に変更することで背景とか文字の色を変えたり、DOM（Document Object Model）を操作してHTMLの文字を書き換えたり、フォームに入力されたデータをサーバに送ったりします。
以下はWEBページの構成要素ですが、フロントエンドエンジニアは青字のCSSとJavaScriptを作り込みます。
| HTML | えいちてぃーえむえると読む。Hyper Text Markup Languageの略。WEBページの文字（コンテンツ）を書く。 |
| CSS | しーえすえすと読む。Cascading Style Sheetsの略。WEBページの装飾（色とか幅とか）を規定する。 |
| JavaScript | じゃばすくりぷとと読む。WEBページの動作（ボタン押したときの処理とか）を規定する。 |
クライアント側だけでなくサーバ側でフロントエンド開発を行うケースも増えています。
例えば、クライアント側の要求（HTTPリクエスト）に対してサーバ側でPHPやJavaScriptなどを動作させ、必要な情報をデータベースから集めて動的にWEBページを生成してクライアントに返却（HTTPレスポンス）するケースです。サーバ側で処理するためクライアントやネットワークの負荷を下げることが出来ます。WordPressはサーバ側でフロントエンド開発を行う好例です。サーバ側で動作するプログラムがMVC（Model View Controller）モデルで構築されている場合、V（View）がフロントエンド開発です。
JavaScriptは便利なライブラリ、フレームワークが充実しており、これらを活用することで開発効率を上げることができます（要はカンタンになるということ）。
| JQuery | ライブラリ | JavaScriptのイベント処理などのコードを簡単に書けるようにするライブラリ。 |
| React.js | ライブラリ | Facebookが開発。Facebook、Instagramみたいなアプリを作れる。 |
| Backbone.js | ライブラリ | RESTfulJSONインタフェースとMVP（Model View Presenter）で設計されてる。複数ビューを持つアプリの同期が楽。 |
| Angular.js | フレームワーク | Googleが開発。クライアントサイドのMVC、MVVCを簡単に作れる。単一ビュー向け。 |
| Vue.js | フレームワーク | ユーザインタフェース（GUI）を簡単に作れる。 |
| Polaris | フレームワーク | ページ表示速度を最大34%高速化する。 |
JavaScriptを学習したい方はコチラ（当ブログ記事です）。
サーバサイド
サーバ側で動作するプログラムがMVC（Model View Controller）モデルで構築されている場合、M（Model）とC（Controller）がサーバサイド開発です。GUIに絡まない裏方的な役割を担うためバックエンド開発と呼ぶこともあります。
一般的にサーバサイド開発というと、UNIXの経理システムなど（WEBではない）基幹システムを指すことがあることに注意してください。世の中全てがWEBではないのです。
代表的な開発言語は、Java、PHP、Ruby、Perl、Python、JavaScript、C、C++などが挙げられます。最近ブログで活用事例が増えているWordPressはPHPで書かれています。
フロントエンド開発と同様にサーバサイド開発もライブラリ、フレームワークを活用することで開発効率を上げることができます。
| Java | Struts | WEBサーバで有名なApacheが開発してる。 |
| JSF | Java Server Faceの略。WEBアプリフレームワーク。 | |
| Java EE | エンタープライズ向けアプリケーションサーバの規格及びAPIを規定したもの。 | |
| PHP | Symfony | Model View Controller パラダイムに従ったWebアプリケーションフレームワーク。 |
| CakePHP | OSSのWEBアプリフレームワーク。Ruby on Railsの概念を多く取り入れている。 | |
| Laravel | OSSのWEBアプリケーションフレームワーク。MVCアーキテクチャ。 | |
| Ruby | Ruby on Rails | OSSのWEBアプリケーションフレームワーク。MVCアーキテクチャ。 |
| HANAMI | OSSのWEBアプリケーションフレームワーク。DDD（ドメイン駆動開発）。 | |
| Sinatra | OSSのWEBアプリケーションフレームワーク。MVCアーキテクチャを採用しておらず小さく軽量。 |
インフラ
インフラ開発はOS、データベース、ネットワーク、クラウドサービスなどが対象です。純粋な開発というより環境設定がメインの仕事。WEB開発の範疇から外れていくため、キーワードを挙げるに留めます。
| OS | Linux / UNIX |
| Windows | |
| Mac OS | |
| Android | |
| データベース | Oracle |
| MySQL | |
| PostgreSQL | |
| SQL Server | |
| ネットワーク | DNS |
| HTTP / HTTPS | |
| Cisco | |
| クラウドサービス | AWS |
| Azure | |
| Google Cloud Platform |
まとめ
WEB開発はフロントエンド開発、サーバサイド開発、インフラ開発のどれが欠けても成り立ちません。冒頭でも述べましたが概要レベルの知識をひととおり知っておくことをお勧めします。
