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


HTML / CSS / JavaScriptそれぞれの役割が分からない
JavaScriptでどんな処理や使い方ができるのか知りたい
JavaScriptとjQueryの役割ってなに?

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

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

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

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

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

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

  • HTML / CSS / JavaScriptの役割を知りたい方
  • JavaScriptでどんな処理や使い道があるのか具体的に学びたい方
  • JavaScriptだけでなくjQueryの役割についても知りたい方

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操作・取得まとめ!
更新日 : 2019年6月25日

イベント処理について

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

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

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

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

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

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

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

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

【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!
更新日 : 2019年2月28日

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

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

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

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

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

  • 同期通信中は他の処理ができない
  • 非同期通信中は他の処理も実行可能
  • Ajaxは非同期通信でサーバーとやり取りできる

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

【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ!
更新日 : 2019年3月28日

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などで使うことも多い

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説