WEB開発入門、HTML、CSS、JavaScript がわかる記事

クライアントのイメージ画像 技術コラム

HTML、CSS、JavaScriptがなんなのか、それぞれの役割とメリットが理解できれば、自分の思い通りにWEB開発が出来ます。

細かい文法はさておき、まずは一気に流れを理解して行きましょう。全貌を真っ先に掴む事で、それぞれの学習意図や必要性を明確化でき、モチベーションを高く保てます。

WEB開発入門、HTML、CSS、JavaScript がわかる記事

今回は、ブラウザ側のお話です。 – WEB開発入門

前回、『WEB開発入門、サーバーとクライアント、http通信の流れ』でご紹介した通り、WEBサービスは、サーバーと、クライアント(ブラウザ)の相互通信で成り立ちます。

リクエストとレスポンスのフローチャート画像

「HTML、CSS、JavaScript」は、ブラウザ側で動作する言語です。イメージとしては、上図で示された「②サーバーからのレスポンス」にHTMLが含まれており、そのHTMLをブラウザ(例えばChrom)が解読して、ディスプレイ画面に描画を行っています。

主な役割と、学習メリット – WEB開発入門

HTML、CSS、JavaScript の役割

近年WEBページの装飾(見かけ)がどんどんカッコ良くなっているのは、ブラウザ側で動作しているこれらの言語が、物凄いスピードで進化し続けているからです。

開発者がより簡単にWebサービスを構築出来る様に、様々なフレームワーク(便利キット)が、日進月歩で生み出され続けています。

HTML、CSS、JavaScriptが担っている役割は、「ページの構成やデザイン」、「ユーザーにとってより便利な機能を盛り込む手段」です。

フレームワークとは、ある特定の言語を更に使いやすい様に工夫を凝らした、開発者向けの便利キットです。まずは、基本となる言語そのものを扱い、ある程度理解した後にフレームワークを触ってみる、といった学習の進め方がおすすめです。

例えば、現在主流なJavaScriptのフレームワークの具体例としては、「vue.js、 react、 angular」の3つがあります。求人募集でも、特にこの3つが多くなっています。

※ 以前まで大人気だったjQueryは、一転して不人気となっています。主な理由としては、処理の流れがごちゃつきやすく、メンテナンスしずらい物になりやすいからです。

一時期流行った、「Flash」という技術を知っている方は想像しやすいですが、Flashが多用されていた時代に比べて、出来る事が更に増えています。また、セキュリティ上のリスク対策も考慮され、より安心で快適なWEBサービスを作りやすい環境になっています。

HTML、CSS、JavaScript の学習メリット – WEB開発入門

技術の進化スピードが非常に速い今だからこそ、まずはWEB開発の基礎知識をしっかりと抑えておくことで、時代の荒波に付いて行く事が出来ます。

「HTML、CSS、JavaScript」は、クライアント側における基礎知識の3種の神器です。

早速、これらについて順を追って理解を進めて参りましょう。

HTMLとは? – WEB開発入門

HTMLとは、クライアント(ブラウザ)が読む言語です。サーバー側でページごとに予め用意しておき、クライアントの要求に応じて、サーバーは要求に見合うHTMLコードが記述されたファイルを探し、返答します。

ページの骨組みを示した内容となっており、見出しの内容や、ページの構成要素をHTMLファイルに記述します。

HTML言語だけでWEBページを作る事も可能です。しかし、文字だけのとても無機質なページになってしまい格好悪いので、この問題を解決する為にCSSという言語が必要となってきます。

CSSとは? – WEB開発入門

CSSとは、HTML言語で構成したWEBページの外観を、装飾(カッコ良く)する為の言語です。

一番初めの見出しは赤い枠で~、文字は太字の黒で~、補足文章は少し小さめの文字で~、といった感じで簡単に操作できます。

特に画像素材を用意しなくても、ボタンを作って、キラキラ光らせるアニメーションも作る事が出来るも、CSSの大きな魅力の一つです。

少し話はそれてしまいますが、CSS達人になると、HTMLとCSSだけで、マインスイーパーゲームを作る事も出来てしまいます。すごい世の中になりました。

CSSを使わずにHTMLだけでも、外観の調整を行う記述方法があります。

しかし、外観調整に関する記述を、CSSファイルでまとめた方がメンテナンス性が高い(構造が分かり易く、後で調整変更し易い)というメリットがあります。

HTML、CSSを使えば、文字やボタン、背景設定などの調整が出来る事がわかりました。

更に、ボタンを押した後に何かアクションを起こしたい、例えばクレジットカードの決算ボタンを追加したいとか、そういったアイディアを実現する為に必要になるのが次に紹介する「JavaScript」です。

JavaScriptとは? – WEB開発入門

JavaScriptを使うと、HTMLとCSSで構成された”静的な”Webページを、”動的な”ページへと進化させる事が出来ます。

専門的な表現ですが、予め用意された通りにしか描画されない(決まった内容や文言しか出ない)ページは静的なページと表現されます。(例:世界地図の画像が表示されるだけ)

逆に、ユーザーのアクションによって、Webページがその要求通りに変化するページを、動的なページと表現します。(例:Googleアース)

また、JavaScriptは、近年凄まじい進化を遂げており、サーバー側でも扱える言語となっています。(Node.jsというWEBサーバーで、JavaScriptを用いてサーバーを構築出来ます。)

まだ、プログラミング言語に触れたことが無い方は、まずはJavaScriptを学習して見る事をおすすめ致します。後に取れる選択肢が多く、自身の可能性を大きく広げる事が出来ます。

まとめ – WEB開発入門、HTML、CSS、JavaScript がわかる記事

・「HTML、CSS、JavaScript」は、ブラウザ側で動作する言語です。

WEBページの外観をカッコ良くできる上に、多機能なサイトを構築出来る。

WEB開発における、クライアント側の最低限の基礎(流れ)を抑える事が出来ました。

コメント