JavaScriptをはじめよう！まずは最低限のルールを知る

SHARE

はじめ
はじめ

JavaScriptを始めるには何からやれば良いの？

かみさま
かみさま

後で困らないように、まずは最低限のルールを覚えよう。

はじめ
はじめ

何事もはじめが肝心だよね！

この記事はこんな方にオススメ！
  • プログラミング初心者。
  • これからJavaScriptを習得していきたい。
  • JavaScriptの最低限のルールを知りたい。

JavaScriptをはじめるために用意するもの

JavaScriptをはじめるにあたって用意するものは以下の2点になります。

用意するもの
  • テキストエディタ
  • ブラウザ

下記の記事でも説明しているように、JavaScriptを始めるにはこれだけで大丈夫です！

JavaScriptとは？特徴と将来性について

と言っても最初はどのテキストエディタが良いの？どのブラウザが良いの？と思うので紹介します。もちろん無料です！

かみさま
かみさま

ブラウザはWebサイトを表示するためのソフトで、テキストエディタはJavaScriptを編集するソフトだよ。

テキストエディタ

参考 Visual Studio CodeVisual Studio Code
かみさま
かみさま

Visual Studio Codeは、Microsoftが開発したソースコードエディタ（テキストエディタ）だよ。

ブラウザ

参考 Google ChromeGoogle Chrome
かみさm
かみさm

Googleが開発したブラウザで、現在世界で一番使われているよ。

現在使っているテキストエディタやブラウザがある方はそちらををお使いください。

それでは始めていきましょう！

JavaScriptを記述するときの最低限のルール

文の末尾に「;（セミコロン）」をつける

JavaScript 
window.alert('Hello World');

JavaScriptは1つ以上の文から構成されていて、1文の終わりを示すために最後に;（セミコロン）をつけます。

MEMO

本当はセミコロンを省略することも可能ですが、1文を明確化させるため省略しないことが望ましいです。

かみさま
かみさま

JavaScripの内容はまだ理解しなくて大丈夫だよ。

大文字と小文字が区別される

JavaScript 
window.Alert('Hello World');

window.alert()はJavaScriptで用意されているメソッドというものになります。

上記の例だとalertの部分がAが大文字のAlertになってしまっているので、エラーになってしいます。

かみさま
かみさま

alertとAlertでは別のものとみなされるので注意してね。

コメントについて

コメントはJavaScriptに限らず、他のプログラミング言語にもあります。そのぐらい必要な機能になります。

本格的な開発を行っていくと、時間が経つにつれ何の処理を書いていたかわからなるコードが出てきます。それが他人が書いたものであれば尚更です。

そんな時コメントを使うと、スクリプトの動作には関係しないメモ的なことができるようになります。

MEMO

スクリプトとは書いたものをすぐ動かせるプログラムのことをさします。

プログラムを実行するまでに、コンピュータが読み取れるようにコンパイルという変換作業を行いますが、スクリプトの場合はそれをコンピュータが裏でやってくれます。

かみさま
かみさま

言語によっては、コンパイルの作業をしてから動かすものもあるんだ。

コメントの種類

コメントの記述方法は3つあるのですが、1つは特殊なコメントなので、ここでは良く使われる2つを説明します。

「//」単一行コメント

「//」から行末までコメントとみなします。

JavaScript 
// 単一行コメントです。
// JavaScriptのコードもコメントにできます。
// window.alert('Hello World');
window.alert('Hello World');

「単一行コメント」と記述されているところはスクリプトが実行はされません。

もし「//」をとってしまうとコメントとならないため、スクリプトが実行されてエラーになってしまう場合があります。

かみさま
かみさま

ソースコードをコメントにすることをコメントアウトというよ。

「/* */」複数行コメント

「/* */」で囲まれたブロックをコメントとみなします。

JavaScript 
/* 複数行コメント
改行して続けて書くことができます。 */

/* もちろん単一行でも記述できます。 */
window.alert('Hello World');

注意点として、複数行コメントの入れ子はエラーになってしまうので気をつけてください。

JavaScript 
// 複数行コメントの中に複数行コメントはNG
/*
  /*window.alert('Hello World');*/
*/

このように複数行でコメントアウトすると、意図しないところでエラーが起こってしまう場合があるので、優先的に単一行コメントを優先して使うことをオススメします。

それでは、次にどこにどうやってJavaScriptを書くのか説明します。

どこにどうやってJavaScriptを書くのか？

JavaScriptには3つの書き方があります。

JavaScriptの書き方
  • インラインスクリプト
  • 外部スクリプト
  • JavaScript擬似プロトコル

ちなみに上2つに関してはCSSでも同じような書き方なので、CSSを知っている方は理解しやすいかと思います。

インラインスクリプト

インラインスクリプトはHTMLに直接コードを書きます。

HTML 
<!-- HTMLのみ（index.html） -->

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8" />
 <title>はじめてのJavaScript</title>
 </head>
 <body>
   <main>
     <p>Hello World</p>
   </main>
 </body>
</html>

上記のHTMLにJavaScriptを組み込みます。

<script>要素内がJavaScriptの世界になり、JavaScriptのコードが記述できるようになります。

では、実際に上記のコードをindex.htmlというファイル名で作成し、index.htmlをブラウザで実行したらどのような動きになるのか見てみましょう。

HTML 
<!-- JavaScriptを組み込んだHTML（index.html） -->

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8" />
 <title>はじめてのJavaScript</title>
 </head>
 <body>
   <main>
     <p>Hello World</p>
   </main>
   <script type="text/javascript">
     // JavaScriptのコードを記述する場所
     window.alert('Hello World');
   </script>
 </body>
</html>

実行結果

window.alert(‘Hello World’)の実行結果

正しくJavaScriptが動いていれば上記のようなダイアログが表示されます。

かみさま
かみさま

window.alert()はカッコ内の文字列をダイアログで表示することができるんだ。

JavaScript 
<script>  // type="text/javascript"は省略可能
  window.alert('Hello World');
</script>
MEMO

<script type=”text/javascript>のtype=”text/javascriptの部分に関しては、HTML5では省略可能となっています。

インラインスクリプトは、簡単なものであれば書いても問題ありませんが、コードが長くなってくるほど、HTMLやJavaScriptのコードが混ざって可読性が悪くなってしまいます。

そんな時にオススメな書き方が外部スクリプトになります。

外部スクリプト

HTMLに直接書くのではなく、JavaScriptファイルを別で作成し、外部ファイルとしてHTMLに組み込みます。

HTML 
<!-- JavaScriptを外部ファイルで組み込んだHTML（index.html） -->

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8" />
 <title>はじめてのJavaScript</title>
 </head>
 <body>
   <main>
     <p>Hello World</p>
   </main>
   <!-- JavaScriptのファイルをインポートする -->
   <script type="text/javascript" src="script.js"></script>
 </body>
</html>
JavaScript 
<!--  JavaScriptの外部ファイル（script.js） -->
window.alert('Hello World');
かみさま
かみさま

JavaScriptファイルの拡張子は「.js」だよ。

あと、JavaScriptファイルに<script>要素を書く必要ないよ。

index.htmlと同じ階層にscript.jsというファイル名を作成し、index.htmlをブラウザで実行してみましょう。

正しく動いていればインラインスクリプトと同じようにダイアログが表示されます。

外部スクリプトは、レイアウト（HTML）とスクリプト（JavaScript）を分けられるので、本格的な開発をする上で、可読性も良くなり開発効率が上がります。

このようなことから、JavaScriptは基本的に外部ファイルで書いていくことをオススメします。

<script>要素を組み込む位置はどこが良い？

これまでにインラインスクリプトと外部スクリプトについて説明しましたが、共通することはどちらも<script>要素をHTMLに組み込みます。

ではHTMLのどこの位置に<script>要素が組み込めるかというと

  1. <head>要素の閉じタグの直前
  2. <body>要素の配下（任意の場所）
  3. <body>要素の閉じタグの直前

上記3つの位置ならどこでも書くことができ、さらに何個でも書くことができます。

HTML 
<!-- <script>要素を記述する場所 -->

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8" />
 <title>はじめてのJavaScript</title>
<!-- 1.<head>要素の閉じタグの直前 -->
 <script type="text/javascript"></script>
 </head>
 <body>
   <!-- 2.<body>要素の配下（任意の場所） -->
   <script type="text/javascript"></script>
   <main>
     <p>Hello World</p>
   </main>
   <!-- 3.<body>要素の閉じタグの直前 -->
   <script type="text/javascript"></script>
 </body>
</html>

ただ気をつけて欲しいことが、ブラウザはスクリプトの実行が完了するまでそれ以降の描画を行いません。もしJavaScriptが1,2の位置にあって、その処理が重かった場合、ページの描画の遅れに直結します。

なので、基本はブラウザが描画を終えた後にスクリプトを実行する流れにするため、基本的に3の<body>要素の閉じタグの直前の位置にJavaScriptを書くことが望ましいです。

JavaScript擬似プロトコル

それではJavaScriptの書き方に戻って、JavaScript擬似プロトコルについて説明します。

JavaScript擬似プロトコルに関しては、前の2つとは記述方法が異なります。

前の2つは<script>要素内でJavaScriptのコードを書いていたのに対して、JavaScript擬似プロトコルは、アンカータグの<a>タグのhref属性にJavaScript:という形式でスクリプトを埋め込みます。

JavaScript 
<!-- JavaScript擬似プロトコルで組み込んだHTML -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <main>
      <p>Hello World</p>
      <!--- aタグにJavaScript:を埋め込む -->
      <a href="JavaScript:window.alert('Hello World')">ボタン</a>
    </main>
  </body>
</html>

このファイルをブラウザで開いて、「ボタン」をクリックするとダイアログが表示されます。

前の2つはブラウザを開いた時にJavaScriptが実行され、ダイアログが表示されましたが、JavaScript擬似プロトコルに関しては、ボタンをクリックするという動作でJavaScriptが実行されていることになります。

まとめ

以上がJavaScriptの最低限のルールになります。最後にポイントをまとめておさらいをしましょう！

JavaScriptの最低限のルール
  • 1文の末尾には;（セミコロン）をつける。
  • 大文字と小文字が区別される。
  • コメントは優先的に単一行コメントを使う。
  • JavaScriptの書き方は基本的に外部スクリプトを使う。
  • 基本的に<body>要素の閉じタグの直前に<script>要素を書く。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

JavaScriptとは？特徴と将来性について

次の記事

JavaScriptのconsole.logの使い方