未経験者のためのJavaScript入門ガイド

未経験・初心者向けのJavaScript入門ガイドです。JavaScriptはウェブプログラマやウェブデザイナにとって必須知識です。JavaScriptを学習しようと考えている方にとって、このページが始めの一歩となればと思います。

JavaScriptとは何か?JavaScriptで何ができるのか?

最終更新日:2021/4/20

JavaScriptはプログラミング言語です。ですので、計算、データ解析、文字列操作、通信など様々な事ができます。JavaScriptが使える場面も、ウェブサイトのブラウザ上(フロントエンド)だけでなく、ウェブサイトのサーバサイド、デスクトップやスマホアプリなど様々です。

ただ、ここでははウェブサイト制作入門者、プログラミング未経験者、初心者向けに話していますので、ウェブページのブラウザ上のJavaScriptについて話していきます。

HTMLとは何か?」で、HTMLとはウェブページ(Webサイト)を作るための言語という説明をしました。
そして、「CSSとは何か?」で、CSSとはウェブページ(HTMLのタグ要素)に装飾(スタイル)を与える事ができるものという説明をしました。

ただ、HTMLとCSSだけではウェブページの表現に限界があります。JavaScriptを使う事で、HTMLとCSSだけでは出来なかった表現をウェブページに与える事ができます。HTMLやCSSを操作してウェブページがダイナミックな表現をできるようにするのがJavaScriptの役割です。

HTMLとCSSとJavaScriptの3スキルの習得が、ウェブ開発の世界・Webエンジニアのスタート

HTMLとCSSとJavaScriptの3スキルが、ウェブサイトやWebサービスを作り始めるための必須スキルです。みなさんが普段ブラウザで見ているYouTubeやヤフーなどのサイトも当たり前のようにHTMLとCSSとJavaScriptが使われています。ブラウザ上のゲームなどもそうです(もちろん他の技術も使われていますが、この3つが基本になっている)。

プログラミング未経験者にとっては、JavaScriptはHTMLやCSSよりも少し敷居が高く感じるかもしれません。ですが、プログラミングにチャレンジしてみたい方、JavaScriptを使ったサイトを作ってみたい方、将来Webサービスを作ってみたいと考えている方にとっては、JavaScriptは絶好の勉強機会になるし、とても役に立つスキルになるはずです。

JavaScriptの例、実際のJavaScriptのソースコード

JavaScriptがどのようなもので、どんな感じでHTMLを操作して表現を与える事ができるかを簡単なサンプルコード例で示します。

<script>
  $(function() {
    $("button#tog").click(function(){
      $("p#jssample").slideToggle();
    });
  });
</script>

このJavaScriptのソースコードは、下の青いToggleボタンを押した時に実行されます。ボタンを押すたびに文章の表示・非表示を切り替える命令を書いています。実際にボタンを押すと、動作が確認できます。

javaScriptのサンプルコードです。
ここでは、jqueryというjavascriptのライブラリも使っています。
ボタンを押すたびに表示・非表示が切り替わります。

この例は、JavaScriptができる事のほんの一部です。実際にJavaScriptがプログラミング言語であって、ウェウページにダイナミックな表現を与える事がわかってもらえたと思います。

プログラミング未経験の方は、上のJavaScriptのソースコードが何なのかがさっぱりわからないと思いますが、それは知らないから当たり前です。プログラミングの世界やウェブサイトやWebサービスの作成の世界に飛び込んで見たい方は、是非これからチャレンジしてみてください。

[広告] JavaScript入門者向けの本の紹介

確かな力が身につくJavaScript「超」入門 第2版
JavaScript初心者用の入門書です。説明がとても丁寧ですので、プログラミング自体が初めてという人にとってもいいと思います。また、最後の方ではJavaScriptでよく使うjQueryについても書いています。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
ウェブサイト制作の入門書です。HTML,CSS,JavaScriptの3つを同時に1から学習したい入門者にとっては良い本だと思います。

JavaScript入門者向けのサイトの紹介

はじめてのJavaScript
動画を見ながらJavaScriptが学習できます。JavaSciprtでどんな事ができるか、どんな感じで学習していったらいいのかがわかると思います。