ホームページに動きをつける一歩目!JavaScriptの基本について

  • 2017年4月28日
  • web

時間が経つごとに画像が変わったり、ボタンをクリックすると特定の場所に自動的にスクロールしてくれたり、といった動きのあるホームページ。

今では当たり前のようになっていますが、どのように作られているかご存知でしょうか。

あのような動きは『JavaScript』で書かれたプログラムによって実現されています。

JavaScriptはブラウザ上で動作するプログラムことで、時間経過やクリックしたタイミングで画像やテキストを切り替える、ということを表現できるようになります。

ホームページの動きについては、『Flash』というアニメーションを作成するソフトウェアで作られることが多かったのですが、現在はJavaScriptを使った実装が主流となっています。

リッチな表現をしようと思うと、欠かせない存在のJavaScript。

ご自身のホームページにすこしアクセントを加えたいとお考えであれば、一度使ってみるのはいかがでしょう。

これからJavaScriptを始めたいとお考えの方ために、基礎の基礎についてお伝えいたします。

JavaScriptの使い方

JavaScriptは2つの方法で使うことできます。

1つはHTML内に直接書き込む方法、もう1つは、外部ファイルにして、HTML内で読み込む方法です。

そのページだけでしか使わない場合はHTML内に直接書き込んでも問題ありませんが、複数のページ使いまわす場合は外部ファイルとして置いておく方が便利です。

JavaScriptの使い方1. 『HTML内に直接書き込む』

    
    <script>
    // JavaScriptによる何らかの処理
    </script>
    
  

JavaScriptの処理内容を、上記のようにscriptタグで囲み、head要素内、もしくはbody要素内のどこかに置きます。

JavaScriptの使い方2. 『外部ファイルを使用する』

    
    <script src=”ファイルへのパス”></script>
    
  

JavaScriptの処理を書いたjsファイルを用意し、それを読み込むためのscriptタグをhead要素内、body要素内いずれかに記述します。

※HTML5より前はscriptタグにtype属性をつける必要があったのですが、HTML5ではtype属性を省略した場合、デフォルトで「type=”text/javascript”」とみなされるようになっていますので、例では省略しています。

JavaScriptを書いてみる – 文字を出す –

JavaScriptで文字を出す方法は、『コンソール』に書き出す方法、『メッセージボックス』に書き出す方法、ページに直接書き出す方法の3種類あります。

文字や数字を出すのは基礎の基礎であるため、方法を知っておく必要があります!

文字を出す方法1.『コンソール』に書き出す

ブラウザには『コンソール』と呼ばれる、HTMLの内容やエラー情報を表示する機能が付いています。

全てのブラウザについているかどうかは定かではありませんが、Google Chrome、Firefox、Internet Explorerなど、世界中で主に使用されているブラウザには実装されています。

Internet Explorerの場合、ブラウザを開き、F12キーを押すと開発ツールが起動し、コンソールが表示されますので、そこで確認をします。

例:script

    
    <script>
      console.log('コンソールに文字を出すテスト');
    </script>
    
  

表示イメージ

JavaScriptでコンソールに文字を出す例

文字を出す方法2.『メッセージボックス』に書き出す

alert関数という機能を使います。

ブラウザによってメッセージボックスの形状が違う場合がありますが、どれも同じものですので、ブラウザの差異は気にしなくても問題ありません。

ホームページなどで警告文を出す際にもよく使われる方法です。

例:script

    
    <script>
      alert('メッセージボックスに文字を出すテスト'); 
    </script>
    
  

表示イメージ

JavaScriptでメッセージボックスに文字を出す例

文字を出す方法3.ページに直接書き出す

少々複雑な方法ですが、一度覚えてしまうと、いろいろなことに応用が利く方法です。詳細は後に記載しますので、まずは例を挙げます。

例:script

    
    <script>
      body = document.body;
      paragraph = document.createElement('p');
      paragraph.textContent = 'ページに直接文字を出すテスト';
      body.appendChild(paragraph);
    </script>
    
  

表示イメージ

JavaScriptでページに直接文字を出す例

若干わかりづらいのですが、各行で行っていることを簡単に説明すると、次のような意味があります。

行数 記載内容 意味
2行目 body = document.body; bodyという変数にbody要素を代入しています。
3行目 paragraph = document.createElement(‘p’); p要素を作成し、paragraphという変数に代入しています。
4行目 paragraph.textContent = ‘ページに直接文字を出すテスト’; 作成したp要素に文章を追加しています。
5行目 body.appendChild(paragraph); 作成したp要素をbody要素に追加しています。

詳細は別の記事でお伝えしますが、HTMLの要素は、JavaScript上でDOM(Document Object Model)と呼ばれ、『element 型オブジェクト』として扱われます。

element 型オブジェクトはプロパティやメソッドと呼ばれる値や関数を持っており、それらを操作することで、ホームページに動きをつけられます。

JavaScriptの基本 -変数-

JavaScriptでは数字や文字を『変数』に代入して使います。

変数は、“箱”のようなもので、代入は、数字や文字を箱の中に入れるとイメージして頂ければわかりやすいと思います。

代入の例

    
    <script>
      ab = '文字';
    </script>
    
  

それぞれ次のような意味があります。

記載内容 意味
ab 変数の名前
= 変数に右側の値を代入しますという宣言 (後述の代入演算子)
‘文字’ 変数に代入する値
; 変数の設定終わり

※『値』について注意点

JavaScriptは、『'(シングルクォーテーション)』、または『”(ダブルクォーテーション)』で囲まれてない文字を変数として扱う仕様です。

文字列として扱いたい場合はどちらかで囲むことを忘れないようご注意ください。

JavaScriptの基本 -演算子-

プログラムには演算子と呼ばれる、演算の種類を決めるための記号があります。たとえば、加算を意味する「+」や減算を意味する「-」など。

これらを組み合わせて処理の内容を決めていきます。初めに覚えておいた方が良いのは以下の通りです。

算術演算子

算術演算子とはどのような計算をするか示すもので、次の5種類あります。

演算子 意味
+ a1 + a2 a1にa2を足す
a1 – a2 a1からa2を引く
/ a1 / a2 a1をa2で割る
* a1 * a2 a1にa2を掛ける
% a1 % a2 a1をa2で割った余り

算数や数学で習うものと違う書き方をするものもあるので、混乱しやすいのですが、慣れるしかありません…!

JavaScriptだけでなく、プログラミング言語で必ず登場する演算子なので、ここで覚えてしまえば他のプログラム言語を使う際にも役立ちます。

代入演算子

代入演算子とは、変数に代入する際に使用する記号のことです。

数値や文字をそのまま代入したり、先に計算をしてその結果を代入したりする可能になります。

『=』と『+=』の2つはよく使う代入演算子です。

演算子 意味
= a=0; 変数『a』 に0を代入します。
+= a+=2; 変数aの値が、2足された数値になります。
加算代入を行う前に何らかの数値を代入している場合にのみ使えます。

加算代入の適切な書き方の例

    
    <script>
      a = 0;
      a += 2;
      console.log(a);
    </script>
    
  

加算代入を行う前に変数『a』に0が代入されているため、適切に処理されています。

正しく代入されない例

    
    <script>
      a += 2;
      console.log(a);
    </script>
    
  

変数『a』に数字が無いため、エラーが出ます。

この2つ以外にも代入演算子はありますが、それらは必要になった際に改めて調べる方が良いと考えております。

MDN(Mozilla Developer Network)というリファレンスサイトがありますので、そちらを参照するのもお勧めです。

MDNによる代入演算子の解説

MDNによる代入演算子の解説

JavaScript 言語のすべての演算子、式、キーワードについて記述しています。

比較演算子

比較演算子とは、演算子の左右の値を比較して、true(正)もしくは false(誤)を返す演算子のことで、等号や不等号などの記号を組み合わせて書きます。

演算子 意味
== a == b aとbが等しい場合にtrue
!= a != b aとbが等しくない場合にtrue
> a > b aがbより大きい場合にtrue
>= a >= b aがb以上の場合にtrue
< a < b aがbより小さい場合にtrue
<= a <= b aがb以下の場合にtrue

JavaScriptの基本 -条件分岐と繰り返し-

何かのプログラムを考える上で最も重要なものは、条件分岐と、繰り返しだと考えています。

無駄のない綺麗な書き方を望まないのであれば、この二つの処理の基本形さえ覚えていれば、殆どの場合なんとかできるのではないかなという印象もあります。

実際のところ、そんなはずはないのですが、そう思わせるほど重要で、プログラムの基本なのです。

JavaScriptの条件分岐は『if ~ else』、繰り返しは『for』が基本形です。この二つを覚えると出来ることがとたんに広がります。

条件文 『if ~ else』 – 条件によって処理を分けたいときに –

if~else文は条件の欄がtrueだった場合にifブロックの処理を実行し、falseだった場合にelseブロックの処理を実行するプログラムです。

条件の欄には前述の比較演算子をよく利用します。

例 if ~ else

      
      <script>
        if(条件){
          //条件に合う時に実行する処理
        }else{
        //条件に合わない時に実行する処理
        }
      </script>
      
    

例 if ~ else if ~ else

より複雑な条件で分けたい場合は『if ~ else if ~ else』を利用します。

      
      <script>
        if(条件){
          //条件に合う時に実行する処理
        }else if(条件2){
          //ifの条件に合わないがelse ifの条件に合う時に実行する処理
        }else{
          //どの条件にも合わないときに実行する処理
        }
      </script>
      
    

繰り返し文 『for~』 – 同じ処理を繰り返したいときに –

『for』は変数が繰り返す条件を満たしている限り延々と繰り返し処理をします。

絶対に満たされないような条件を設定してしまうと、いつまでも処理を続けてしまいます。

これは『無限ループ』や『永久ループ』などと呼ばれています。

      
      <script>
        for(変数;繰り返す条件;繰り返す直前に実行する演算){
          //繰り返し実行する処理
        }
      </script>
      
    

より実践で使用する形に近い繰り返し条件を書くと次のようになります。

      
      <script>
        for(i=0;i<10;i++){
          console.log(i);
        }
      </script>
      
    

forの括弧内を簡単に説明すると次のような意味になります。

記載内容 意味
i=0; 変数『i』に0を代入する。
i<10; 変数『i』が10より小さい間処理を繰り返す。
i++ 処理が完了するごとに『i』に1を足す。

実際にJavaScriptのプログラムを組む

これまでお伝えした内容をもとに、簡単なプログラムを組んでみます。

1~30までの間の奇数だけをページに表示するプログラム

    
    <script>
      body = document.body;//変数『body』にbody要素を代入
      for(i=1;i<=30;i++){//処理を30回繰り返す
        if((i%2) != 0){//iの値を2で割ったあまりの数値が0でなければ処理
          paragraph = document.createElement('p');//p要素を作成し、変数『paragraph』に代入
          paragraph.textContent = i;//作成したp要素にiの値を追加する
          body.appendChild(paragraph);//作成したp要素をbody要素に追加する
        }
      }
    </script>
    
  

表示イメージ

1~30までの間の奇数だけをページに表示する例

DEMOページのソースコードを見て頂けたら、HTML上に1~30までの奇数を書いているわけではなく、JavaScriptで自動的に出力していることが分かりやすいと思います。

まとめ

ここまでJavaScriptの基本の基本をお伝えしましたが、実際には演算子も他にもあり、条件文、繰り返し文の書き方もいくつかあります。

それから、申し訳ございませんが、ここでお伝えした内容だけでは実際にホームページに動きをつけたいという要望は叶いません。

とはいえ、この内容を知っているのと知っていないのとでは、JavaScriptへの理解は大きく変わります。

より深く理解するために、ここでは一旦こらえて頂き、理解が進んできたころに、ホームページを思い通りに動かせる喜びを味わいましょう!