フロントエンド、サーバサイド、インフラの具体例

Last updated at 2016-03-16Posted at 2014-10-13

Webエンジニアの種類は、概ね

に類別できる。
ただし、人によってその担当領域が異なるため、明確な線引はできない。
（サーバサイドエンジニアがインフラをやったりフロントをやることも大いにあり得る）

「クライアント・サーバ」の概念との関係付けをするならば、下記画像のようになると言えるが、普段そういうことを意識することはあまりない。

フロントエンジニア：
- 上記画像の「ビュー」に直接関与する部分を作成するエンジニア
- クライアントサイドに送るデータ（HTML、CSS、JS等）を記述するエンジニア
サーバサイドエンジニア：
- 上記画像の「処理」部分を記述するエンジニア
- DBアクセス・各種ファイルへのアクセス・その他目に見えない動的な処理を記述するエンジニア
インフラエンジニア：
- WebサーバやDBサーバなどを構築するエンジニア
- 上記画像の全体の枠組みを構築するエンジニア
- LB（ロードバランサ）や監視の仕組み、各種サーバのパラメータ管理なども行うエンジニア

1.フロントエンジニアの仕事

主に見える部分を作る。
基本となる技術キーワードは、

などである。
フロントのライブラリとしては、

フレームワーク
- AngularJS：シングルページアプリケーション向き
- Backbone.js：マルチページアプリケーション向き
DOM操作
- Zepto：SP用。jQueryより軽い。
- jQuery：PC＆SP対応。Zeptoに比べ、重い。
- jqLite：AngularJS用。
ユーティリティ（便利なやつ）
- Underscore.js：Backbone.jsの中でも用いられている。配列操作に強い。
- Lo-Dash：Underscore.jsの改良版
テンプレート（サーバサイドテンプレートと混同しないように！）
- Handlebars：サーバサイドテンプレートと同じ記述が可能。
- ng-template：AngularJS用。他のテンプレートと混ぜない。
- Underscore.js_template
CSSプリプロセッサ
- Sass：Compassと併用することで力を発揮
- Stylus
- LESS
コンパイラ
- UglifyJS2：JSのminify化
- CSSO：CSSのminify化
ビルド
- Grunt：タスクの自動化
- gulp：Gruntより新しい
その他
- アニメーション：Create.js
- 可視化：D3.js
- Yeoman：yo、bower、gruntをまとめたプロジェクト

などがある。
フロントエンジニアは、上記などのライブラリを用い、

などといったことがフロントエンジニアの腕の見せどころである。

サーバサイド言語には、大きく分けて

がある。両方に対応するものもあるため、明確な線引が出来ない場合もある。

サーバサイドのライブラリとしては、Javaベースで話すと、

DIコンテナ
- Spring：フルスタックフレームワーク
- Guice：必要な物を都度組み込んで使う
MVC
- SpringMVC
- Jersey
ORM
- MyBatis：SQL文完全制御。学習コスト低め。
- Hibernate：SQLを自動生成する。
ログ出力
- commons-logging（インタフェース） + log4j（実装）
- slf4j（インタフェース） + logback（実装）
テンプレートエンジン
- JSP
- Velocity
- FreeMarker
- Handlebars.java
依存性管理
- Maven：plugin数多い
- Gradle：柔軟に使える
その他
- lombock：ボイラープレートのコンパイル時自動生成
- Jackson2：JSONの取り扱い（JSONとPOJOの行き来）
- Eclipse：Javaの統合開発環境（IDE）

などがある。
Java以外の言語であれば、

などが有名。

インフラエンジニアはミドルウェアの知識に長けている印象がある。

ミドルウェアとは、ソフトウェアの一種で、OSとアプリケーションソフトの中間に位置するもの。

ソフトウェア：目に見えないもの。それ自体は形をもたないプログラムやデータなど。大きく3つに類別される。
- 応用ソフト（アプリケーションソフト）：Word、Excel、Skype、Chrome、Photoshop、Illustratorなど
- ミドルウェア：Apache、Tomcat、MySQL、Vernishなど
- 基本ソフト（OS）：システム全体を管理するソフトウェア。Mac、Windows、iOS、Linuxなど
ハードウェア：目に見えるもの。物理的実体。
- Let's noteのパソコン、iPhone5sなど

Webサーバ（HTTPサーバ）：静的コンテンツを返す
- Apache：定番
- Nginx：リバースプロキシの役割も持つ
- Tomcat（Coyote）
Servletコンテナ：動的コンテンツを返す
- Tomcat（Catalina）：定番
- Jetty：WebSocket利用前提
RDBMS（関係データベース）
- MySQL：定番
NoSQL
- memcached：KVS。揮発性。キャッシュ目的。
- Redis：KVS。キャッシュにも永続化にも使える。
- DynamoDB：KVS。Amazonが開発。
- BigTable：列指向型。Googleが開発。
- Cassandra：列指向型。
- HBase：列指向型。
- MongoDB：ドキュメント指向型。
- CouchDB：ドキュメント指向型。
リバースプロキシ
- Varnish：静的リソースのキャッシュ
- Nginx：Webサーバとしても使える
キューイング
- ActiveMQ：JMSプロバイダとして利用。シンプル。Java用のAPI。古い。
- RabbitMQ：AMQPプロバイダとして利用。柔軟。Javaでなくても使える。今だとAMQPの方がおすすめ。

など。サーバサイドエンジニアやフロントエンジニアをシステム的に支える役割。

本記事の冒頭にも書いたが、これらの役割分担はあくまで目安なので、参考程度にとどめて欲しい。

1415