Webアプリケーション開発「フロントエンド」編

Tweet

Pocket

ユーザーから見える部分を扱う

Webアプリケーション開発の具体的な仕組みを理解する上で覚えておきたいのが「フロントエンド」の基礎知識です。Webアプリケーション開発における「フロントエンド」とは、サイトのデザイン、サイト内にある検索機能やコメント機能、動画の再生・停止機能など、Webアプリケーションでユーザーが操作する部分、ユーザーから見える部分のことです。フロントエンドは、「クライアントサイド」と呼ばれることもあります。
フロントエンドの開発でよく使用される言語といえば、HTMLやCSS、JavaScriptです。HTMLは、Webページの見出しや文章、文字の大きさや太さ、画像、リンクなどの配置を決定する役割を持つ言語です。CSSはHTMLとセットで使用されることが多い言語で、Webページのデザインを決定する役割を持つ言語です。HTMLのみでWebページを制作することも可能ですが、HTMLのみで制作されたWebページのデザインを変える際には1ページずつ編集する必要があります。この場合、100ページあれば100ページ分の編集をしなければならないので、多くの手間がかかってしまいます。HTMLとCSSを組み合わせて作成されたWebページなら、1つのファイルを編集するだけでデザインを変更することができます。HTMLとCSSで役割分担をすることで、それぞれの言語で組んだプログラムの構造がシンプルで扱いやすいものになります。
JavaScriptは、Webページに動きをつけるための言語です。マウスポインタをあわせると詳細が表示されるスライドショーやフォームに入力した内容が間違っている際に返されるエラーなどは、JavaScriptで実装することが可能です。

フロントエンドで求められる思考とは

フロントエンドは、Webアプリケーションのイメージそのものです。Webアプリケーション開発に携わるなら、ユーザーにとって見やすく使いやすいものなのかどうかを常に考えている必要があります。開発者にとっては使いやすいものでも、ユーザーが同じように感じるとは限らないことも認識しておかなければなりません。ユーザーが実際に見て操作してストレスを感じれば、継続的な利用は見込めないでしょう。ほんのわずかなことが、ユーザーにとっては大きなストレスになる可能性もあります。第三者の視点からWebアプリケーションを見る習慣を持つことができれば、小さな問題点にもすぐ気づくことができるようになるでしょう。