BUNCHO METHOD コードを楽しむプログラミング情報メディア

【レッスン#1】 「JavaScriptの学習環境」を学ぶプログラミング教材

JavaScriptでプログラミングするとはどういうことなのか、その基本をじっくり解説します。ちょっと長めですが難しくはありません。学習環境CodePenの使い方も覚えます。

最初のコードはたったこれだけでOK!

プログラミング教材#1 サンプルコード

<button id="btn">ボタン</button>
var btn = document.querySelector("#btn");
btn.addEventListener("click", sayHello);
function sayHello() {
  alert("Hello world!");
}

一行ごとの意味はのちほど詳しく解説します。とりあえず読み進めてください。

2つあるのはどういうこと?

上のコードはHTML、下のコードはJavaScriptです。こちらも詳しくはのちほど解説します。

このコードをどうすればいいの?

CodePenを使おう!

CodePenはブラウザ上でHTML、CSS、Javascriptを書き込むとリアルタイムで実行、プレビューできるとても便利なWebサービス(無料)です。初心者の方はまずはCodePenを使用してコードの基本に慣れることをおすすめします。

ブラウザでCodePenのサイトへ

CodePenの新規作成画面が開きます

使いやすくちょっとだけ設定変更

右上のChange Viewボタンから画面のレイアウトを変更します。左側にHTML、CSS、JS(JavaScript)の各コード、右側に実行結果が表示されるようになります。

Change View ボタンを押す
左のレイアウトパターンを選択
レイアウトが変更されて左がコード入力フィールド、右が実行結果フィールドになる

ちなみに、各フィールドの境界線部分をドラッグすると幅や高さを調整できます。使いやすいように自由に調整してください。

まずはHTMLを入力してみる

とりあえずサンプルコードをそのままコピペする

左上の「HTML」という入力フィールドにサンプルコードのHTML(1行)をそのままコピペしてください。

数秒後に、右のフィールドに早速HTMLが反映され、小さな「ボタン」が表示されるはずです。いまコピペしたHTMLはまさにこのボタンを表示させるためだけのものですのでこれで成功です。

HTMLの1行をコピペ、すぐに右の実行結果フィールドにボタンが表示される

表示された「ボタン」を押して見る

残念ながらHTMLを書いただけの段階ではボタンを押しても何も起きません…。

HTMLはプログラム?

通常HTMLを書くことはプログラミングとはいいません。HTMLはただの文書です。それに「ここは見出しですよ」「ここからここまでが段落ですよ」といった意味づけや、画像やボタンなどのパーツが追加されているにすぎません。例えるならHTMLを書くというのはWordで資料を作るのと同じぐらいのことです。

HTMLは動かない!

またHTMLはブラウザで一度表示すると基本的にはそれで終了です。動いたりユーザーの操作に反応することはありません。これでは便利なアプリも面白いゲームも美しいアニメーションも作れませんね。

そこでJavaScriptの出番!

JavaScriptは一度表示したHTMLをあとから書き換えたり、ユーザーの操作に反応させたりすることができるのです。これによりブラウザ上で使えるアプリやゲームなどを作り出すことができます。JavaScriptの価値はここにあると言ってもよいでしょう。JavaScriptを書くということは単に文書を作ることとは全く異なり、実現したい動作のためにさまざまなルールや手順を事前にまとめあげる作業です。これこそがプログラミングです。

いよいよJavaScriptを入力!

ふたたびサンプルコードをそのままコピペする

左下の「JS」という入力フィールドにサンプルコードのJavaScriptをコピペしてください。特に実行結果に変化はないように見えますが…

JSフィールドにJavaScriptコードをコピペ

あらためて「ボタン」を押して見る

Hello world!

先ほどはボタンを押しても何も起きませんでしたが、今回は画面にダイアログ(ポップアップする小さなウインドウ)がでてきて、そこに「Hello world!」と書かれています。※ダイアログの形状はOSやブラウザにより異なります。

表示されたら何もできないHTMLに対して、先ほどコピペ入力したJavaScriptにより「ボタンが押されたら、Hello world!と書かれたダイアログを出す」という「機能」が追加できたわけです。とてもささやかですが大きな第一歩です。

コードの解説の前に…

「○○されたら△△する」こそプログラミングの本質!

JavaScriptに限らずプログラミングを上手に学ぶおすすめの方法は、この「ボタンが押されたら、Hello world!と書かれたダイアログを出す」のような「○○されたら△△する」パターンの○○や△△のバリエーションを増やし発展させていくことなのです。少し具体的なアイデアをあげてみます。

「○○されたら△△する」のバリエーション例

「○○されたら」「△△する」⇒作れそうなもの
ボタンを押されたら表示している数字を1増やす⇒カウンター(数取器)アプリ
画像にマウスが乗ったら拡張メニューを表示する⇒よくあるウェブデザイン
3分たったら音を鳴らす⇒タイマーアプリ
0.1秒たつ毎にキャラクターを右に1ピクセル動かす⇒アニメーション

これらはどれも地味ですが、この発想を組み合わせていくことで、だいたいのアプリやゲームやウェブデザインは作り出せます。

これが「文鳥メソッド」

言うほどのことではないのですが、この「○○されたら△△する」をベースに、○○と△△のバリエーション(基礎知識、実用パターン、アイデアの引き出し…)を増やしていこうという学習方法が「文鳥メソッド」です。ありそうでなかった勉強法。特に「飽きっぽい」「理屈は面倒」「すぐに成果を出したい」という初心者にオススメです。

一方で、プログラミングは本来は言語の正しい仕様を勉強しておかないと、効率が良いプログラムやセキュリティレベルの高いプログラムは作れません。ただし初心者がいきなりそこを目指すと挫折しがちですので、まずは「文鳥メソッド」でプログラミングの可能性をしっかり体感した上で、少しずつ本格的な学習とスキルアップをしていくのがよいと思います。

「トリガー」と「アクション」

文鳥メソッドでは「○○されたら△△する」の○○を「トリガー」、△△を「アクション」と呼ぶことにします。これは一般的なプログラミング用語ではなく、文鳥メソッドオリジナルの言い方なので、ご了承ください。

トリガー ⇒ 動作のきっかけ、引き金になるもの
アクション ⇒ トリガーによって実行される反応や処理

HTMLコードの解説

サンプルコードのHTML(再掲)

今回のHTMLは1行だけ。そして「ボタンを表示する」ことだけを意味していると先ほどすでに説明しました。

<button id="btn">ボタン</button>

HTMLタグで「意味づけ(マークアップ)」

HTMLはこの講座のテーマではないのであまり詳しくは触れませんが、<button>のようなものを「HTMLタグ」といい、これは「buttonタグ」ですがその他に「titleタグ」や「pタグ」など多くのHTMLタグがあり、それぞれ特定の意味があります。(種類は多いですがそれほど難しいものではないので、各自HTMLの入門講座やリファレンスサイトを検索して学習してください)

HTMLタグは、</button>のようにスラッシュを入れたタグとで文字を挟み込むことで、その文字に意味づけ(マークアップ)をします。

例えば、今回のサンプルコードでタグをまったく書かずに「ボタン」の文字だけにだったとするとブラウザにはただ「ボタン」という文字が普通に表示されるだけです。(興味があったらCodePen上でタグを消してみてください)

ボタンタグで意味づけすることにより、ブラウザは「あ、この文字はただの文字じゃなくてボタンだから、ボタンぽい見た目にして、押せるようにしとかないといけないんだな!」ということを理解し、実際にそのように表示されているわけです。

HTMLタグにつけた「id」がとても重要!

さて、サンプルコードのbuttonタグの中には id=”btn” が付け足されているようです。これはこのbuttonタグに特定の名前(id)をつけるための記述です。つけなくてもブラウザには正しくボタンが表示されますが、JavaScriptでこのボタンに機能を持たせるためには、JavaScriptとHTMLタグを紐付ける目印が必要になります。idはそのために無くてはならないものなのです。

尚、btnの部分はまさに「名前」ですので好きな名前に変更してかまいません。例えばnekoという名前をつけたければid=”neko”と書けばOKです。ただし、その場合は後ほど解説するJavaScript側で使っているidも同じ名前にそろえておく必要があります。

JavaScriptの解説

サンプルコードのJavaScript(コメント追加)

//①JSとHTMLの紐付け
var btn = document.querySelector("#btn");

//②「トリガー」の設定
btn.addEventListener("click", sayHello);

//③「アクション」の設定
function sayHello() {
  alert("Hello world!");
}

はじめに「コメント」について。上のコードには//から始まる行が3行追加されています。これらの行(//から改行されるまで)はコメント文と言い実行結果にはまったく影響を与えない、メモ書きのようなものです。試しに先ほどのCodePenのJSフィールドにコメント行を追加コピペしてみてください。実行結果が何も変わっていないことがわかると思います。

また、JavaScriptの書き方のルールの一つですが、コメント以外の通常のコードについては、一文ごとに文末にセミコロン(;)を入れて文を区切ります。

今回のコードは大きく3つの部分に分けられる

コメントを入れたとおり、今回のコードは①JSとHTMLの紐付け、②「トリガー」の設定、③「アクション」の設定、の3つの部分に分けることができるので、その全体像を理解した上で、一つ一つの部分を詳しく見てみましょう。

①JSとHTMLの紐付け

document.querySelectorでHTML要素を紐付け

document.querySelector(“#btn”)の部分から解説します。

document.querySelector(○)は、HTML上の特定の要素(HTMLタグ)を指定して、それをJavaScript側で扱えるよう紐付けをする命令です。

○の部分にはセレクターと呼ばれる記号を使います。まずは「HTMLのidを指定する場合はidの前に#をつける」ということだけ覚えてください。先ほどボタンにつけたidがbtnでしたので、セレクターは#btnとなります。これをダブルクオーテーション(“)で囲んでカッコの中に書くわけです。※もしidをnekoに変更していたらdocument.querySelector(“#neko”)ですね。

紐付けたHTML要素をvarで変数に入れる

document.querySelector(“#btn”)は何度も書くには結構長いですし、HTMLが複雑になるほどセレクターを使って特定の要素を探し、紐付けるという作業はJavaScriptを実行するブラウザにとってもそれなりの負担になります。できれば同じ紐付け作業は何度もやりたくないものです。

こういう場合は「変数」を使います。var ○ = □;と書くことで、○という名前の変数を新しく用意し、その中に□の内容をそっくり入れておくことができます。

サンプルコードではvar btn = document.querySelector(“#btn”);となっているので、新しくbtnという名前の変数を用意し、その中身として先ほど紐付けたHTML要素をしまっておくことができます。つまりこの1行があることで、それ以降はただbtnと書くだけで、HTMLの例のボタンを指し示し、自由に扱うことができるようになるのです。

この変数名も名前ですので好きに名付けてOKです。もしpochiという変数にしたかったらvar pochi = document.querySelector(“#btn”);と書けばいいのです。※その場合、後半のコードで変数btnを使っているところもpochiに書き換える必要があります。

②「トリガー」の設定

addEventListenerでクリックを管理

次に、btn.addEventListener(“click”, sayHello);の部分を解説します。

btnは先ほど作った変数で中身はHTMLのボタンを入れてあるのでしたね。addEventListenerはそのまま訳すと「イベントリスナーを追加する」という意味です。JavaScriptでは「クリック」や「マウスオーバー」などユーザーの特定の操作などを「イベント」と呼び、あらかじめいくつかの種類に名前がつけられています。代表的なものは次の通りです。

イベント内容
1clickマウスボタンをクリックした時に発動
2mousedownマウスボタンを押している時に発動
3mouseupマウスボタンを離したときに発動
4mousemoveマウスカーソルが移動した時に発動
5keydownキーボードのキーを押したときに発動
6keyupキーボードのキーを離したときに発動
7keypressキーボードのキーを押している時に発動
8scroll画面がスクロールした時に発動
9loadWebページ(画像などのリソースをすべて含む)の読み込みが完了した時に発動

※番号に特別な意味はありません。

プログラムを実行する側(ブラウザなど)から見ると、ユーザーの操作によるイベントはいつ起きるかわからないものなので、常にイベントの発生を監視しておく機能が必要で、それが「イベントリスナー」です。

btn.addEventListener(“click”, sayHello); では、btnに対してclickがされたかどうかを常に監視する機能(イベントリスナー)を追加し、もしイベント(click)が発生したらsayHelloを実行するようプログラムしているのです。※イベント名はダブルクオーテーション(“)で囲む文法ルールなので覚えておいてください。

sayHelloはJavaScriptにもともとある命令ではなく、今回のサンプルコード上で「アクション」用に作ったオリジナルの関数です。詳しくは次の項で。

③「アクション」の設定

functionでユーザー定義関数を作る

トリガーの設定が完了したので、いよいよアクション、ボタンが押されたとき何をするのかを決めます。具体的には先ほど出てきたsayHelloという名前の関数(命令の集まりのようなもの)を作ります。このようなオリジナルの関数を「ユーザー定義関数」と呼び、以下のようにfunctionを使って書きます。

function ○() {
  ……
}

○にはこの関数につけたい名前を書きます。今回の場合はsayHelloにしたいのでsayHelloと書きます。そして、{ }の間に実行したい命令を書いていきます。

function sayHello() {
alert(“Hello world!”);
}

alert(○); というのは、「ダイアログを表示する」ためのJavaScriptの命令で、○に入れたものがダイアログ上に表示されます。今回のコードではHello world!が表示されるわけです。

ちなみに、{ の直後や、}の直前で改行するのは、コードを読みやすくするための慣習です。改行しなくても問題ありません。

以上で、HTMLのボタンがクリックされると(トリガー)、Hello world!のダイアログを表示する(アクション)プログラムが完成しました。

CodePenについて補足

CodePenで書いたコードを「保存」するには

せっかくできあがったコードは保存しておきたいですよね。CodePenはここまで使ってきたようにコードの記述と実行まではユーザー登録無しでできますが、自分の書いたコードを保存するためにはユーザー登録が必要です。もちろん無料プラン(Free)で十分ですので、ぜひユーザー登録をして、書いたコードをストックしていくことをおすすめします。今後「こういうときはどう書くんだっけ?」という時に、自分が過去に書いたコードを流用できるとことは非常に有利です。

CodePenユーザー登録の仕方

右上の「Sign Up」が新規ユーザー登録の入り口です。ここを押すと次のような画面に変わります。(この際、直前まで書いていたコードは消えてしまいますので、ご注意ください。ブラウザの戻るボタンで戻ってもおそらくエラー表示になります。今回についてはユーザー登録後、改めてこのページからコピペすれば問題ないでしょう。)

Free(無料プラン)の新規ユーザー登録画面

TwitterFacebookのアカウントを持っている方はそれらを使って簡単にユーザー登録できます。もしくはEmailでのユーザー登録も可能です。ごく一般的なユーザー登録の流れですので、詳細は省略します。

CodePenの構成を簡単に説明

CodePenの構成は慣れるまでちょっとわかりづらいかもしれません。以下の主要ページ構成を理解しておくとよいでしょう。

【CodePenのトップページ】 https://codepen.io/ どのページでも左上のロゴをクリックするとここへ。世界中のユーザーが公開している「コード」が紹介されているページ。人の書いたコードを好きなだけ参考にできる素晴らしい環境。

【新しいコードを書くページ】 https://codepen.io/pen/ トップページ左のメニューの「CREATE」> 「 Pen」から、もしくは上記URLから。内容はこの記事の前半で説明した通り。ちなみにPenというのはCodePen用語でHTML,CSS,JSのセットのこと。「作品」のような意味です。

【自分が保存したコードの一覧ページ】 https://codepen.io/dashboard/  どのページでも右上にユーザーアイコンがあるのでここをクリックしドロップダウンメニューから「Dashboard」を選ぶ。もしくは上記URLから。自分が過去に作って保存したコードの一覧が出てくる。各タイトルをクリックすれば編集画面に行ける。

埋め込みCodePenについて

プログラミング関連の話題を扱う多くのサイトやブログで、コードや実行結果をわかりやすく見せるためにCodePenの埋め込みが利用されています。このサイトでも使いますので、その活用法をご案内します。

埋め込みCodePenのサンプル

さっそくですが今回のサンプルコードを埋め込みCodePenで以下に表示します。

See the Pen 教材「導入」 by programmingbird (@programmingbird) on CodePen.

PCやタブレットで見ている場合は、左右に2列のレイアウトで左にJavaScriptのコード、右に実行結果が表示されているはずです。スマートフォンなど幅の狭いデバイスで見ている場合は1列のレイアウトでデフォルトではJavaScriptのコードのみが表示されていると思います。どちらの場合も上下の枠内にいろいろなボタンがありますので、この使い方をまとめておきます。

【HTML,CSS,JS,Result】表示内容を切り替えるボタン。Resultは実行結果のことです。尚、CSSは上記サンプルでは入力していないので表示されていません。

【1x,0.5x,0.25x】実行結果の表示倍率を切り替えるボタン。実行結果が埋め込み画面に収まりきらない場合に調整できます。

【Rerun】一度実行し終わったプログラムを再実行するボタン。ブラウザをリロード(再読み込み、更新)することなく、埋め込みCodePenの中だけをリロードできます。

【EDIT ON CODEPEN】一見ただのロゴに見えますが、CodePenのサイトに移動するリンクになっています。該当コードの編集画面に直接リンクしているので、ここでコードを自由に変更して実行させることができます。※スマートフォン表示の場合はEDIT ON CODEPENのかわりにCodePenのロゴマークだけが表示されているのでご注意ください。編集画面上では、他の人が書いたコードでも変更、実行を何度でもできるのでプログラミング学習者には大変ありがたい環境になるはずです。尚、他の人が書いたコードはさすがにSave(上書き保存)はできませんが、まったく同じものを自分のアカウント上にコピーして保存することができます。これをFork(フォーク)といいます。編集画面の上部メニューにForkボタンがあるのでこれを使いましょう。

CSSについての補足

CSSの話は出てこないのか?

さて、今回はたった1行のHTMLにJavaScriptでトリガーとアクションを書くことにより早くも「動く」プログラムを完成させてみました。この教材のメインテーマはJavaScriptなのでそれ以外のことについてはあまり詳しく扱わない予定ですが、HTML、JavaScriptとセットでよく出てくる「CSS」が気になっている人もいるかもしれません。実際CodePenにもCSS入力フィールドがありますしね。少し補足しておきます。

CSSのサンプルコード

以下のサンプルコードを先ほど完成させたCodePenの空欄にしておいたCSS入力フィールドにコピペしてみてください。

body{
   text-align: center;
   background: lightblue;
}

実行結果はこうなります(埋め込みCodePenで掲載)

See the Pen 教材「導入CSS追加」 by programmingbird (@programmingbird) on CodePen.

あらためてCSSとは?

上記実行結果を見ると、まず背景色が水色になり、ボタンの位置がセンター寄せになっていることがわかると思います。CSSはこのように文書(HTML)をブラウザが表示する際の体裁、つまり色や位置や文字サイズなどを指定するためのものなのです。ブラウザはCSSを指定しなくてもボタンはボタンらしい形で、見出しは見出しらしく大きな文字で、リンクはリンクらしく色を変えて、などHTMLによる「意味づけ」にあわせて適切なあしらいをしてくれます。ただ、自分好みのデザインにこだわりたい場合、ブラウザのデフォルトのあしらいでは当然ながら不十分です。そのため多くの場合CSSを使って各要素の表示の仕方を詳細に指定することにより自分の求めるデザインを実現するのです。

この教材ではCSSの詳しい解説はしませんが、CSSに関するわかりやすいレッスンがウェブ上に大量にありますので、ぜひ検索して学習してみてください。