JavaScriptの役割って何？初心者でも分かる特徴を徹底解説

Webサイトを作ろうと考えた時に、まず学ばなければいけないのがHTML / CSS / JavaScriptなのですが、それぞれの役割や使い分けなどがイマイチ分かりにくいことってないでしょうか？

それぞれが正しい役割分担をしていないと、知らないうちに複雑なソースコードになってバグを引き起こしかねません。

しかし、それぞれの役割ってどのように学んだら良いのでしょうか？

こんにちは！ライターのマサトです。

この記事では、初心者でも今日からHTML / CSS / JavaScriptの役割について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

なお、次の記事ではそもそもJavaScriptとはどんなプログラミング言語なのか、その特徴を将来性も交えて紹介しているので良ければ参考にしてください。

→ JavaScriptとは？初心者向けに特徴・できること・将来性を簡単解説

HTML/CSSの役割

この章では、Webサイトを構成するもっとも基本的なHTML / CSSの役割について見ていきましょう。

主に、HTML / CSSの具体的な使い方・役割について学んでいきます。

HTMLが担当する役割とは

HTMLはHyper Text Markup Languageの略称なのですが、簡単に言うと文章をマークアップして構造化するという意味になります。

どういう意味かと言うと、例えば次の文章を見てください！

サンプルテキスト
サンプルリンク
サンプルボタン

この文章はそれぞれ、テキスト・リンク・ボタンを意味しているのですが、この文章だけだとブラウザはただの文字列としか判断できません。

そこでHTMLによるマークアップが必要になるのです。

つまり、次のような記述になります。

サンプルテキスト

サンプルボタン

< >で囲んだ部分がマークアップしている箇所で、それぞれの文章を意図に合わせたタグで指定するとブラウザが意味を判断できるわけです。

このように文章を構造化していくことでWebサイトの骨組みが構成されるわけです。そのために利用するのがHTMLなんですね。

CSSが担当する役割とは

CSSはCascading Style Sheetsの略称で、簡単に言うとWebサイトの見た目を装飾するために必要な言語と言えます。

そこで、先ほどの例をもう一度だけ見てみましょう！

サンプルテキスト

サンプルボタン

このようにHTMLでマークアップしたおかげで、文章に意味を持たせることができましたね。しかし、文字の色や大きさ、太さ、位置、フォント…など、見た目の細かい調整はまったく設定していませんよね？

そこで、CSSを使ってこのような装飾をまとめて設定するとうわけです。

例えば、次の例を見てください！

p {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #888;
}

この例では、テキスト要素（pタグ）に対して文字の大きさ、太さ、位置、色の装飾情報をまとめて設定しているわけです。

このようにHTMLで骨組みを作り、CSSで装飾情報を設定することでファイルを分割してソースコードの見通しをよくできます。また、そうすることでそれぞれの役割がはっきりするわけですね。

JavaScriptの役割とは

この章では、JavaScriptがWebサイトに対してどのような役割があるのかを見ていきましょう！

主に、基本的な役割内容、DOM操作、イベント処理、Ajaxについて学んでいきます。

JavaScriptが担当する役割とは

JavaScriptはブラウザ上に実行環境がある唯一のプログラミング言語として今もWeb開発には欠かせない存在です。

基本的なWebサイトにおいて、JavaScriptの役割を簡単に言うと動きを付加するということになります。
動きを付加するというのは例えば以下のようなコンテンツを作ることです。

ただし、現在のJavaScriptは実現できることがかなり多くなっており、単純な動きを作るだけでなくサーバーからデータを取得してリアルタイムに情報を処理したり、さまざまなイベント処理を実行できます。

これらの点について、もう少し詳しく見ていきましょう！

DOM要素の操作について

JavaScriptでWebサイトに動きを付加する際に、必ず必要になる処理としてDOM要素の取得があります。

このDOM要素というのは簡単に言うとHTML要素のことです。

例えば、次のようなテキスト要素がWebサイトにあるとします。

こんにちは

このHTML要素をJavaScriptから取得するには、id属性値のtextを使って次のように記述します。

const text = document.getElementById('text');

getElementById()を利用することで取得できます。以降は、変数textを操作することでWebサイトのテキスト要素をJavaScriptで制御できるというわけです。

このような仕組みを利用することで、JavaScriptにはHTML要素をプログラムで制御するという役割があるのです。

ちなみに、DOM要素の制御については次の記事で体系的にまとめているので合わせて参考にしてみてください。

【JavaScript入門】はじめてのDOM操作・取得まとめ！

更新日：2024年5月6日

イベント処理について

Webサイトにはさまざまなイベント処理があります。

例えば、ボタンをクリックした時の処理、画面をスクロールした時の処理、フォームを送信した時の処理…など、1つのWebサイトでさまざまな種類のイベントが発動されているわけです。

このようなイベント処理に対してもJavaScriptから自由に制御することが可能なのです。

例えば、ボタンをクリックした時の処理をプログラミングしたければ、次のような記述になります。

ボタン要素.addEventListener('click', function() {
        
        //ここに処理を記述する
        
});

まずはボタン要素を取得してから、addEventListner()を使いクリックイベント処理を実行するわけです。

同様の手順でスクロールやフォームなどもプログラムできます。このようにさまざまなイベント処理を制御する役割があるのもJavaScriptの特徴でしょう。

ちなみに、イベント処理についてまだよく分からないという方は、次の記事で基本から応用技まで学習できるのでぜひ参考にしてみてください。

【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！

更新日：2024年5月6日

Ajaxによる非同期処理について

JavaScriptは任意のタイミングでサーバーと通信を行い、必要な情報やデータを取得してWebサイトに表示することも可能です。

一般的にこのような処理はAjaxという技術を使って行います。これは、非同期通信を行う技術で、サーバーと通信中であっても別の処理を引き続き行えるのが特徴です。

例えば、Webサイトの任意の箇所をサーバーから取得したデータに差し替えたい場合に、Ajaxを使わなければサーバーとの通信が完了するまで一切の操作ができない状態になります。

まとめると次の通りです！

具体的にどのようなプログラミングを行えばAjax通信ができるのかについては、次の記事で体系的にまとめているのでぜひ参考にしてみてください！

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！

更新日：2024年5月6日

jQueryの役割とは

JavaScriptを勉強する際によく出て来るのがjQueryではないでしょうか。

jQueryはJavaScriptの記述を簡易化し、さまざまなブラウザの違いを吸収して統一した書き方をすることが可能なライブラリになります。

そのため、プログラミング初心者の方であれば通常のJavaScriptを学習するよりも簡単に習得できるので人気があります。

例えば、通常のJavaScriptでWebサイトのテキスト要素を取得してコンソールログに出力するには次のように記述します。

const text = document.getElementById('text');

console.log(text.textContent);

これと同じ処理をjQueryで書くと次のようになります。

console.log( $('p').text() );

わずかな記述だけですが、通常のJavaScriptと比べてその簡単さは一目瞭然ですよね。

jQueryでもJavaScriptでも実現できることは同じなのですが、ソースコードは大きく違うのです。そのため、初心者やプログラムをあまり使わないデザイナーにとって簡単にプログラムを構築できるという役割があるわけです。

まとめ

今回は、JavaScriptの役割についてどのような使い方ができるのかを学習しました！

最後に、もう一度ポイントをおさらいしておきましょう！

・HTMLは骨組み、CSSは見た目の装飾としての役割がある
・JavaScriptはWebサイトの動きを付加することに使うのが基本
・JavaScriptはDOM操作、イベント処理、Ajaxなどで使うことも多い

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！