WEB ネットワーク 初心者向け

【WEBエンジニア】タイプ毎の特色と覚えるべきスキル

技術者のキャリアってどうやって積み上げるんですか?

新人のときに経験を積んだジャンルのまま変えないケースが多い。

3年ぐらい経験積んじゃうと、もう他に行けないっていうか、

新しく覚えるのが大変ってのが正直なところ。

でも、やる気があれば色々なキャリアを積むことも可能ってことですね。

今、組み込みエンジニアなんですが、実はWEBエンジニアに憧れてるんです。

いろいろ教えてください。

この記事で解決できること

  • WEBエンジニアタイプ毎の特色がわかる。

エンジニアタイプとは?

WEBエンジニアの3タイプを色分けしました。詳しい説明は後ほど出てきますので今はざっくり捉えてみてください。

フロントエンド、サーバサイド、インフラは連携して動作しますので、概要レベルの知識をひととおり知っておくことをお勧めします。

赤字 フロントエンドエンジニア GUIなど目に見える部分をつくる。
緑字 サーバサイドエンジニア サーバ上で動くプログラムをつくる。
青字 インフラエンジニア サーバーOS、データベース、ネットワークなどの環境を整える。

 

フロントエンドエンジニア

WEB開発と言うとフロントエンド開発を指すことが多いです。WEBページGUIを開発します。

 

厳密にいうとHTML文章コンテンツ作成)とCSS基本のデザイン)はフロントエンドエンジニアではなくマークアップエンジニアが担当します。マークアップエンジニアはSEOSearch Engine Optimization)の責任も持ちます。

 

ではフロントエンドエンジニアは何をするのか?

 

ちょっと雑に言うとWEBページをユーザが操作したときの処理を作り込みます(厳密に言うとユーザ操作だけでなくタイマー処理など非同期イベントもあります)。

たとえばJavaScriptでマウスクリックなどのイベントを受けたときに、CSSのプロパティを動的に変更することで背景とか文字の色を変えたり、DOMDocument 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を学習したい方はコチラ(当ブログ記事です)。

≫参考:【初心者向け】JavaScript無料学習(前編)

≫参考:【初心者向け】JavaScript無料学習(後編)

サーバサイド

サーバ側で動作するプログラムがMVC(Model View Controllerモデルで構築されている場合、M(ModelC(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開発はフロントエンド開発、サーバサイド開発、インフラ開発のどれが欠けても成り立ちません。冒頭でも述べましたが概要レベルの知識をひととおり知っておくことをお勧めします。

  • この記事を書いた人
  • 最新記事

ペイヴメント

ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。

-WEB, ネットワーク, 初心者向け

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.