JavaScriptとは？わかりやすく解説！

2023.02.03 JavaScript / jQuery

JavaScript（ジャバスクリプト）って、なんだと思いますか？

どんなことができると思いますか？

Webサイトを作る際に、HTMLが骨組み、CSSが装飾の役割とするならば、JavaScriptは「動き」の役割があります。

つまり、JavaScriptは”Webサイトの動きを設定するためのプログラミング言語”ということです。

では、この「動き」とは、どのようなことを指すのか、使い方やそもそもJavaScriptとは？という点も踏まえて、解説していきます。

JavaScriptとは？

JavaScriptとは、Webサイトに「動き」をつける役割を持つプログラミング言語です。

略してJS（ジェイエス）などと呼ばれています。

Webサイトを閲覧するために必要なブラウザ上で、スライドやアコーディオンなど、表示されるコンテンツに動きをつける設定を行うのがJavaScriptです。

Webサイト制作を学び始めた人が、HTML・CSSの次に目にする言語だと思います。

また、HTML・CSSとは異なった言語で、２つよりも若干覚えにくいため、苦手意識を持ってしまう人も多いです。

ですが、JavaScriptを取得すれば、フォームの実装やスライドなどの動作に加え、アプリ開発もできるようになり、実現させたいことの選択肢が大きく増やすことができるのです。

JavaScriptでできることの例

・　画像をスライドさせる

・　ポップアップウィンドウを表示させる

・　Googleの地図をWebブラウザ上で自由に動かす

JavaScriptはフロントエンド言語の一種で、サーバーをとおすことなく、ブラウザだけでプログラミングを実行することが可能です。

フロントエンドとは

フロントエンド（front-end）とは、Web制作などで、利用するユーザーが目に触れる部分のことを指します。

一般的なWebシステムは、クライアントとサーバの２面に分かれています。

システムを利用するユーザーは、クライアント側の画面を操作して、サーバにリクエストを送ります。リクエストに含まれるのは、どのページを表示させるかの指示やアカウントやメールフォームでの入力項目の登録・送信などです。

サーバ側はこれらのリクエストに対してのレスポンスを返すことで、画面が切り替わったり、情報が登録されたりします。

このクライアント側のことをフロントエンドと言い、サーバ側のことをバックエンドと言います。

フロントエンドとバックエンドに関しては、こちらの記事で詳しく解説しています。

フロントエンドとバックエンドの違いとは？

JavaScriptはフロントエンド、つまりブラウザ上で動作させるということで、とても使用率が高く世界的に普及しているプログラミング言語なのです。

JavaScriptの書き方

さっそく、書き方を学んでみましょう。

JavaScriptのコードは、下記の二通りの書き方ができます。

・　HTMLファイルに直接記述する

・　外部ファイルをHTMLファイルに読み込む

この点では、CSSと似ています。

<!DOCTYPE HTML>
<HTML>
  <head>
    <meta charset="utf-8">
    <title>今からでも間に合う、初心者入門</title>
  </head>

  ＜本体＞

  </本文> 
</ HTML >

HTMLソースに、直接JavaScriptを書いてみましょう。
下記の3行を</body>タグの直前にペーストして下さい。

< HTML > 
  < head > 
    < meta  charset = "utf-8" > 
    < title > JavaScript 入門</ title > 
  </ head >

  <本文>
    <スクリプト> 
      alert ( "Hello World" ); 
    </スクリプト>
  </本文>
</ HTML >

この状態で、HTMLソースを保存して、ブラウザで開いてみると、ページとは別に、ポップアップ（ダイアログボックス）で「Hello World」という文字が表示されるはずです。

挿入した3行のコードの最初の<script>と最後の</script>は「ここに、JavaScriptが書いてあります」というブラウザへのメッセージです。

JavaScriptだと分かるように<script>タグで囲っているのです。

次に、挿入したコードの真ん中、「alert(“Hello World”);」の部分がJavaScriptを使った命令です。

今回使用した「alert」とは、ポップアップ（ダイアログボックス）で文字が表示させる指示があり、「このページを閉じてよろしいですか？」「入力内容が正しくありません。」など、注意書きを表示させる役割があります。

この「alert」の部分を書き換えれば、ほかの指示に変えることができます。

alertを「document.write」に書き換えてみてください。

< HTML > 
  < head > 
    < meta  charset = "utf-8" > 
    < title > JavaScript 入門</ title > 
  </ head >

  <本文>
    <スクリプト> 
      document.write ( "Hello World" );
    </スクリプト>
  </本文>
</ HTML >

こんな感じです。

上書き保存して、ブラウザで見てみると、今度はポップアップではなく、ページの中に「Hello World」と表示されていると思います。

この「document.write」は、書かれている英語の意味の通りで、「文書を書く」となります。

このように、JavaScriptは英語書かれており、少し書き方を変えた英文とイメージすると覚えやすいです。

また、JavaScriptは、cssファイルと同じく、専用のファイルを作って、HTMLに読み込ませることもできます。

別ファイルで作ることで、同じJavaScriptをHTML ごとに書かなくても、一括で管理でき、変更・修正も楽に行えます。

JavaScriptの拡張子は「.js」です。

※ HTMLファイルが「.HTML」、cssファイルが「.css」

仮に、「test.js」のファイルを作成したとして、作成したファイルをHTMLに読み込ませます。

< HTML > 
  < head > 
    < meta  charset = "utf-8" > 
    < title > JavaScript 入門</ title > 
  </ head >

  <本文>
     < script src = "test.js" ></ script >
   </本文>
 </ HTML >

こんな感じです。

ファイルの中身を先ほどのdocument.write(“Hello World”);と書いておけば、

このように表示されるのです。

今回は、文字列を出力することを例としましたが、他にも「現在時刻を表示する」ことや「条件分岐（if文）」で表示内容を切り替えることもできるのです。

最後に

Web制作を行うことで、一番最初の壁がJavaScriptです。

JavaScriptが理解できずに、苦しむ人は多くいると思います。中には、Web制作を辞める人もいると思います。

ただ、この壁を乗り越えることができれば、あなたができることが多くなり、制作作業が楽しくなります。

また、「エンジニア」の仲間入りで、「フロントエンドエンジニア」と名乗ることもできます。

「フロントエンドエンジニア」として、新たな一歩を踏み出したい、もう一度JavaScriptを学びたい人の参考になるよう、

記事を書いておりますので、ぜひ参考にしていただければ、うれしいです。

CSSとは？...

Webの基本...