Web開発におけるフロントエンド技術について

更新:2016/12/30

WEBブラウザの機能は年々と向上し、高度なユーザーインターフェースを活用したサイトが多数生まれました。
ここではそんな、WEBフロントエンド技術について触れたいと思います。
これから勉強する方は、HTMLとCSSはそこそこにして、javascriptを重点的に学んだ方がいいです。
(HTMLやCSSのコーディングについてはWEBデザイナにお願いできますが、javascriptはより技術的かつ専門的になるからです)

フロントエンド・エンジニアという進路

WEBブラウザの機能向上とパソコンの性能向上の結果、Ajaxという技術が使われるようになりました。
また、Ajaxを駆使することで、サーバからデータをリアルタイムに取得して活用する、高度なアプリケーションを構築できるようになりました。
すると、javascriptで実現できることが増え、フロントエンド開発に高い技術レベルが求められるようになってきたのです。
(昔のjavascriptは、ボタンのロールオーバーをさせるとか、そんな程度のものでした)
結果、従来はWEBデザイナーの領分だったフロントエンド開発が、エンジニアが主導となる領域になってきました。
その分野に特化したエンジニアを指して、一部で『フロントエンド・エンジニア』と呼ばれています。

HTML

WEBページのユーザーインターフェース構築に使用する言語です。
HTMLを利用することで、ページ上の文章をはじめ、ボタン画像の埋め込みやフォーム要素などを構築することができます。
基本的にHTMLはページ構造の表現のみに使い、デザイン要素はCSSで表現することが推奨されています。
HTMLはML(Markup Language)の一種であり、他にも、データの交換性に優れたXMLが存在します。

CSS

HTMLから外部読み込みし、デザインを定義するための技術です。
最近では角丸やグラデーションを表現できるようになり、CSSだけで多彩なデザインができるようになりました、
『bootstrap』などのCSSフレームワークを使えば、最小の学習コストでベストプラクティスを利用できます。
また、大規模なサイトになるとCSSが複雑になってしまうため、『CSSプリコンパイル』技術が利用されることがあります。『CSSプリコンパイラ』である『less』や『SCSS』などを使えば、制限のあるCSS文法を拡張して、効率的にコーディングを行うことができます。

javascript

フロントエンド開発の主役です。
jqueryというライブラリが実績豊富かつ使いやすいものとなっています。
最近では、サーバサイド開発の考え方を取り入れた、大規模開発用のフレームワークが出てきました。
(react、angularなど)
これらは双方向データバインディングという技術を軸に、スピーディかつ効率的なjavascript開発を可能としています。
いまだデファクトスタンダードはなく、動きが早い界隈になっています。
それでもフロントエンド・エンジニアとしてやっていくようでしたら、どれかひとつはマスターすべきです。
そうでなければ、まずはjqueryを使えればなんとかなるでしょう。

このページをシェア Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn