【JavaScriptの基礎がわかる】概要から基本的な使い方までまるっと解説
この記事では、JavaScriptの概要から基本的な使い方までを分かりやすく解説しています。
JavaScriptは、Webデザイナーが触れることも多いプログラミング言語だぜ！
そうなんだ！拒否反応が出ないように、優しくかみ砕いてよね！
JavaScriptの概要について
JavaScriptとは？
JavaScriptとは、Google ChromeやFirefox、SafariといったWebブラウザー上で動作するプログラミング言語です。
主に、HTML/CSSで作成したWebページに動きを付けたり、Webアプリやスマホアプリを作成するときに用いられます。
Javaと名前が似てるけど、全く別の言語なので混同しないように頼むぜ！
そうなんだ！てっきりJavaから派生した言語かと思ってた！
JavascriptとJavaは何が違うの？
早速、回答が難しい質問が来たぜ！Here we go、俺！
JavaScriptとJavaの違い
いきなりJavaScriptとJavaの違いを理解するのは難しいかもしれません。
でも、ここで両者の違いを理解しておく必要はないので、気にならなければ読み飛ばしてもOKです。
JavaScriptはブラウザ上で動作するプログラミング言語って言ったよね？
一方Javaは、サーバー上で動作するプログラミング言語なんだ。
うん、え？よくわかんないよ！
だよね。
そんなときは、イメージ図だ！
う～ん、イメージ見てもよくわかんない！
だよね、だよね。
例えばさ、サーバー側（Java）で「10+10」っていう処理をしたとするよ？
そうすると、以下のような流れで処理が進むんだ。
- サーバー側（Java）で10+10の計算がおこなわれる
- 結果（20）がブラウザに渡される
- ブラウザに20と表示される
ここまではOK？
おうよ！
でね、ブラウザは、サーバー側の処理結果が表示されるけど、処理過程部分を表示することはできないんだ。
つまり、Javaが実行した「10+10」は見ることができないわけ。
一方JavaScriptは、ブラウザに表示されたデータに対して処理を実行することができるんだ。
上記例に続いて、JavaScriptで50を足してみると以下のような流れになるぜ！
- サーバー側（Java）で10+10の計算がおこなわれる
- 結果（20）がブラウザに渡される
- ブラウザに20と表示される
- ブラウザ側（JavaScript）で20+50の計算がおこなわれる
- ブラウザに70と表示される
3番以降は、ブラウザ側で処理しているから、処理過程も確認できるぜ。
ふんふん、でもこの例だと、ブラウザに20と70両方が表示されちゃわない？
最終的に70しか表示させたくないときは、20を表示させなければ良いだけの話さ。
簡単な違いを表に記載するとこんな感じかな。
| プログラミングコード・ソース | Java：ブラウザで確認できない JavaScript：ブラウザで確認できる |
|---|---|
| ブラウザ上の文字 | Java：編集できない JavaScript：編集できる |
| アニメーションなどの動き | Java：動きを付けることができない JavaScript：動きを付けることができる |
う～ん、まだあんまりピンと来てないけど、、、何となくわかった。。。かな？
ここを詳しく深掘りすると、JavaScriptの基礎講座までたどりつけないから、理解できなければ、「JavaとJavaScriptは完全に別物」とだけ覚えておけばいいよ。
なかなかイメージするのも難しいからさ。
このあたりは実装を進めていくと、そのうち嫌でもわかるようになるぜ！
サーバーとクライアントという言葉はよく出てくるので、覚えておきましょう。
JavaScriptって何ができるの？
JavaScriptでできることは多数ありますが、ここでは5つの例をご紹介します。
1. 動きのあるWebサイト
会社のホームページや商品紹介サイトなどで、スクロールするとコンテンツが出てきたり、スライドショーのように自動で画像が切り替わったりするサイトを見たことはありませんか？
これらは、JavaScriptで実装されていることがほとんどです。
CSSだけでもアニメーションを付けることは可能ですが、複雑な動きになるとJavaScriptを用いる必要があります。
JavaScriptを使うと、下記のように見ているだけで楽しいウェブサイトができますよ。
何このウェブサイト…すご…
グルグル動くじゃん。
2. ポップアップウィンドウ
何かの予約をキャンセルしようとしたり、サイトをログアウトしようとしたりすると、 「本当にキャンセルしますか？」「ログアウトしてもいいですか？」のようなポップアップが表示されることがありますよね。
何か難しい技術を使っているように見えますが、こういったポップアップウィンドウもJavaScriptを使えば数行で実装することができます。
▼例▼
3. 非同期通信処理（Ajax：エイジャックス）
何やら難しそうな言葉が出てきましたが、あなたがWebでプログラミングをおこなうなら、ほぼ間違いなくAjaxを利用することになるでしょう。
非同期通信処理（Ajax）とは、ページ遷移をすることなく、一部だけ更新する技術を指します。
Google MapがAjaxの例としてよく出されます。
ページ移動してないのに、ドラッグアンドドロップでマップを移動すると、移動先の地図が表示されますよね。
これがAjaxです。
変更された箇所だけを更新するから、表示スピードが速かったり、サイトの使いやすさを向上させられたりすることがメリットなんだ。
4. ハイブリッドアプリ
通常スマホアプリはSwiftやJavaといった言語で開発します。
最近はWebviewという機能を利用することで、「HTML5＋JavaScript」で開発可能な“ハイブリッドアプリ”が注目を集めています。
Webサイトを作るような感覚で、スマホアプリを作成することができるのです。
5. ゲーム
Web上でできるちょっとしたゲームもJavaScriptで作成することができます。
例えば、おみくじや診断ゲーム・シューティングゲームなどです。
下記サイトでは、JavaScriptで作成したゲームが多数載っていますので、ぜひ参考にしてみてください。
West Mira JavaScript
今回は5つだけ紹介したけど、JavaScriptを使えば本当に様々なプログラムを作成することができるんだぜ。
よく見るカッコいい動きのWebサイトって、JavaScriptでできていたんだね！
そうともさ。難しそうに見えるプログラムも、JavaScriptを使えば簡単にできてしまうケースもあるよ。
早く何か作ってみたい！！
じゃあ、さっそく次項からJavaScriptを使って実装してみよう！
JavaScriptの使い方｜前準備編
まずは、JavaScriptを実装するための前準備をおこないましょう。
- ソースコードエディタを用意する
- HTMLファイルを作成する
- JavaScriptの書く場所を宣言する
1. ソースコードエディタを用意する
はじめに、JavaScriptのソースコードを書くエディタを用意しましょう。
優秀なソースコードエディタは多数ありますが、特に筆者がおススメしたいのはMicrosoftが提供する「Visual Studio Code」です。
無料にも関わらず、起動の速さ・使いやすさが有料級です！
※他にも無料エディタはありますので、すでに使用しているエディタがあればVisual Studio Codeを入れなくても大丈夫です。
Visual Studio Codeのインストール手順
Microsoft Azureの公式サイトへアクセスし「無料でダウンロードする」をクリック
OSにあったファイルをダウンロード
ダウンロードが完了したら、次はセットアップを行います。
「同意する」にチェックを入れ「次へ」をクリック
そのまま「次へ」をクリックし続ければ問題ありませんが、もしアイコンをデスクトップ上に置きたい場合は「追加タスクの選択」画面にて「デスクトップ上にアイコンを作成する」にチェックを入れておきましょう。
下記画面で「完了」をクリック
これで、Visual Studio Codeのインストールが完了しました。
早速、立ち上げてみましょう。
2. ひな形となるHTMLファイルを作成する
よし、早速HTMLを作成しよう！
え、JavaScriptじゃないの？
焦るなさ！
JavaScriptは単体でも動かせるよ！
でも、基本的にJavaScriptはHTMLと一緒に使うからね。
HTMLファイルの中で使う形で進めていこう！
Visual Studio Codeを立ち上げたら、メニューバーの「ファイル」＞「新規ファイル」を選択します。
※ショートカット[Ctrl + N]でも大丈夫です。
そして、次のようにHTMLを記述し、拡張子「.html」※でファイルを保存します。
https://www.pc-master.jp/sousa/kakuchousi.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<!-- ここにJavaScriptを使うためのコードを書いていきます -->
</body>
</html>
サクラエディタのような別のエディターを使っている場合は、保存時の文字コードを「UTF-8」にしてな！
じゃないと、ブラウザで開いたときに、文字化け起きちゃうことあるから！
Visual Studio Codeは、標準でUTF-8になるから安心だぜ！
3. JavaScriptの書く場所を宣言する
「私はここにJavaScriptを書きます！」って、叫べばいいの？
それは単なる変態だわ。
HTMLソースの中に<script>っていう文字を書くことで、「ここにJavaScriptを書きます」っていう宣言ができるのさ。
HTMLの<body>内に次のコードを記述してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
<!-- JavaScriptのコード -->
</script>
</body>
</html>
上記のように<script></script>タグを置くだけで、その間にJavaScriptのコードを記述できるようになります。
ここまでは簡単っしょ？
これだけでJavaScriptが使えるんだね！すごい！
今回は「インラインスクリプト」というHTMLファイル内にJavaScriptを書く方法を紹介したけど、実務ではJavaScriptが膨大になるから、HTMLファイルとJavaScriptのファイルを分けることがほとんどだぜ！
JavaScriptの使い方｜基礎編
これで前準備が整いました！
すぐにでも何かゲームを作成したいところですが、 プログラムを書く上でやはり基本中の基本は確認しておく必要があります。
“文法”と聞くと拒否反応が起こる方もいらっしゃるかと思いますが、ある程度理解しておかないと後々苦労することになりますので、ぜひ辛抱強く取り組んでみてください！
プログラミング全般に言えることだけど、文法を丸暗記する必要はないよ。“こういうときはこう書くんだな”とフワッと覚えておくだけでOK。
そっか、分からなくなったら調べればいいんだもんね！
その通り。プログラミングはカンニングOKなので、文法“そのもの”を覚えるのではなく、“考え方”を身に付けるようにしてね。
では、早速実装開始だ！
まずは定番のHello World!
まずは定番の「Hello World」を表示させてみよう！
以下のように書いたHTMLを保存してみて。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
window.alert('Hello World!');
</script>
</body>
</html>
保存したよ！
保存したHTMLファイルをダブルクリックしてみ。
ブラウザーが開いて、以下のような画面が出れば成功さ！
※Google Chromeの例
表示されない…
おそらくタイプミスかな？プログラミングは、文字ミスがあると表示されないぜ！
よくあるのは、半角文字で書かないといけないところを全角で書いちゃうとか、1文字抜けてる、みたいなパターンかな。
Hello Worldの前後には、半角のシングルクォーテーション（もしくはダブルクォーテーション）が必要だぜ！
あ、後半のシングルクオーテーションが抜けてた！直したら表示されたよ！
いいね！別の文字を表示させたい時は、Hello Worldの文字を変えればOKだぜ！
- window.alert()というのが、「アラートを出す」という命令。
- ;（セミコロン）は、処理の終了を意味する。
- 文字列はシングルクオーテーション、またはダブルクオーテーションで囲む。
半角スペースやタブスペース、改行は無視される
<script>
window.alert('Hello World!');
</script>さっき、JavaScript部分を上記みたいに3行で書いたよね？
これ、実は以下のように1行でも問題なく実行できるんだ。
<script>window.alert('Hello World!');</script>ほんとだ、1行でもブラウザで動くね。
かといって、コードを全部1行で書いてしまうと、超読みづらくなっちゃうよね。
だから、改行とかタブ（インデント）を使って、なるべくソースコードを読みやすい状態で保存しておくことが大切だぜ！
コメント（メモ）を残すには？
ねーねー、こんな風に書いたら、アラートが出なくなったんだけどー
<script>
ハローワールドと表示
window.alert('Hello World!');
</script>メモを残したかったのかな？日本語をそのまま書いてしまうと、エラーになってしまうから、アラートが出なくなるよ。
なにー！じゃあメモを残すにはどうしたらいいの？
コメントを使おう。コメントを使うと、プログラミングの処理時に無視してくれるんだ。
<script>
// ハローワールドと表示
window.alert('Hello World!');
</script>こんな感じで、行頭に半角スラッシュをふたつ書けばOKさ！
あ、ほんとだ、これなら動いた！
半角スラッシュだと1行しかコメントを残せないから、複数行コメントを残したいときは、「/*」と「*/」で囲めばOKさ！
<script>
/*
ハローワールドと表示。
こんな言葉よりも叫びたい想いがある。
待ってろよキャバコ、いつか君に届けるからな。
*/
window.alert('Hello World!');
</script>なんか、コメント見たら吐き気してきた…
飲み込んでくれっ！
変数を学ぼう
プログラミングには、ソースコードを効率良く書くための「変数」というものがあります。
よく“箱”に例えられたりしますが、変数（箱）に名前をつけて、その中に文字列や数値などのデータを入れて扱うことができます。
早速実装例を見ていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
let name = "さかし";
window.alert(name);
name = "キャバコ";
window.alert(name);
</script>
</body>
</html>上記をHTMLに保存して開いてみて。
あ、ポップアップで「さかし」って出て、そのあと「キャバコ」って出た！
1行ずつ解説していくぜ。
まずは、
let name = “さかし”;
この命令を分解して日本語で表すとするなら、
- let → 「変数を宣言します！」
- name → 「nameという名前の変数を作ります！」
- =（イコール） → 代入します！
- “さかし” → さかしという文字列を！
っていうイメージ。
変数nameは、自分の好きな名前を付けられるけど、冒頭文字に数字を入れられないから気を付けてくれぜ！
＝（イコール）って、数学の授業では「等しい」っていう意味で習った気がするけど、違うの？
プログラミングにおける「＝」は“等しい”じゃなくて、代入っていう意味になる。
「name」という変数の中に「さかし」という値を入れるよ！という意味なので注意してくれだ！
なるほどだ！
で、次の
window.alert(name);
は、Hello Worldを表示した時と同じ書き方だね。
Hello Worldの時と違うのは、alertの中身が変数になっているということ。
だから、代入された「さかし」がポップアップに出てくるんだ。
ふんふん、なるほど。
3行目のname = “キャバコ”;は、letが付いてないけどいいの？
すでに宣言済みの変数に代入する場合は、letを書かなくて良いのさ！
letは宣言するときだけ書けばOK！
なるほど、2回目のポップアップに「キャバコ」が表示されたのは、変数が上書きされたってことなのね～
変数宣言の書き方
変数宣言は「let」の他に、「var」「const」も使うことができます。
let
再代入可能な変数を用いるときに使うキーワードです。
先ほどの例では、「さかし」を代入したあとに「キャバコ」を再代入しました。
変数は再代入されることが多いので、letは使用頻度が高いです。
var
let同様、再代入可能な変数を用いるときに使うキーワードです。
letとの違いは、同じ名前の変数を宣言してもエラーが出ないということ。
もし、間違って同じ名前の変数を宣言した場合は、後から宣言した値に上書きされてしまうということです。
一方letは、同じ名前の変数を再度宣言しようとするときちんとエラーが出ますので、 特にこだわりがなければletを使うことをおすすめします。
const
再代入しない変数を用いるときに使うキーワードです。
正確には、変数と言わず「定数」といいます。
「固有名詞」や「消費税」など、変数の値が変わらないと分かっている場合には定数を使うようにしましょう。
計算してみよう
足し算
さぁ、これも基礎中の基礎。
定番の足し算も、書き方を知っておこう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
let love_power = 120 + 50;
console.log(love_power);
</script>
</body>
</html>変数名キモいなぁ。
あれ？これをHTMLに保存してブラウザで開いたけど、何も表示されないよ？
love powerは、愛の力さ。
僕の愛120と、キャバコの愛50が足されて…
いや、そこの説明はいらねえ。
ブラウザに何も表示されないよ？真っ白！
ふっふっふ、今回はwindow.alertじゃなくてconsole.logというものを使ったのさ。
alertはポップアップで表示されるけど、console.logは表側には表示されないんだ。
実務でよく使うから、覚えておこう！
で、どこに表示されるの？
デベロッパーツールに表示されるぜ！
キーボードのF12を押してみそ！
以下みたいな画面出るでしょ？
※Google Chromeの例
わ、ほんとだ。HTMLが見えるね！
そうそう。
で、Elementsってとこの右横に「Console」ってのがあるでしょ？
それクリックしてみて。
あ、170って見えた。
そう、そこにconsole.logで指定した値が出力されるのさ。
alertポップアップだと、毎回OKボタン押さないといけないから面倒でしょ？
実際の開発時は、console.logを多用するぜ～覚えときなっ！
「+」は文字列の結合もできる
以下を実行すると、どうなると思う？
<script>
let man = "さかし";
let woman = "キャバコ";
let answer = man + woman;
console.log(answer);
</script>えっ、文字と文字を足すの？
ってか、さかしとキャバコは足されたくない。
やめて！足さないで！
エラーでしょ、こんなの。受け入れたくないもの。エラー！エラー！
あれ、なんでだろう、なんだか胸が苦しい。
さて、正解は…
エラーは起こらず、コンソールに「さかしキャバコ」と表示されるんだ！
うそ…うそよ！
ほんとだって（笑）
＋は、文字列を結合することもできるんだ。
結構使うから覚えといてね～
引き算
もちろん、足し算だけではなく、引き算も可能です。
<script>
let num1 = 100;
let num2 = 20;
let answer = num1 - num2;
console.log(answer);
</script>変数に代入したもので計算することもできるんだね！
かけ算（乗算）
かけ算をおこなうときは、*（半角アスタリスク）を使います。
<script>
let num1 = 10;
let num2 = 30;
let answer = num1 * num2;
console.log(answer);
</script>割り算（除算）
割り算をおこなうときは、/（半角スラッシュ）を使います。
<script>
let num1 = 50;
let num2 = 5;
let answer = num1 / num2;
console.log(answer);
</script>割り算って余りが出ることあると思うけど、余りを知りたいときはどう書くの？
%を使えばOKだぜ！
<script>
let num1 = 101;
let num2 = 10;
let answer = num1 % num2;
console.log(answer);
</script>上記だと、余りの「1」がコンソールに表示されたっしょ？
ほんまにゃあ！
関数について知ろう
JavaScriptを学ぶ上で避けては通れないのが「関数」。
関数とは、処理をまとめるための箱のようなものです。
例えば、何かアプリを作るときに、“ユーザーが入力した文字列を表示する”という処理があるとします。
そしてこの処理には、1. ユーザーが入力した文字列を取得するという処理と、2. 取得した文字列を画面に表示するという2つの処理が含まれているとします。
もし、“ユーザーが入力した文字列を表示する”という処理を色々なところで使いたい場合、毎回同じ処理を書くのはとても面倒です。
また、修正が入ったときにはすべての箇所を修正する必要があります。
この作業を効率よく行うのが「関数」です。
2つの処理をまとめて「Display」のように名前をつけておけば、 どこかで同じ処理を行うときにDisplayという名前を呼ぶだけで同じ処理を行ってくれるのです。
と、文字だけで説明してもイメージが湧かないと思いますので、早速実装例を見てみることにしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
// 2つの数字を足すaddNum関数を宣言
function addNum(num1, num2) {
// 合計値を格納する変数を宣言
let sum = num1 + num2;
// 合計を返却（返却しないと足し算をして終わるだけの関数になってしまう）
return sum;
}
// 関数の呼び出し（12がnum1、34がnum2に該当する）
let answer = addNum(12, 33);
// 出力
console.log(answer);
let answer2 = addNum(20, 30);
console.log(answer2);
</script>
</body>
</html>ブラウザで試したら、コンソールに「45」と「50」が表示されたよ！
でも、上記のソースをどう読んだらいいのか。。。
解説プリーズ！
まずは関数宣言の書き方を提示しよう！
処理の内容;
}
引数って何て読むの？
”ひきすう”って読むぜ！
function addNum(num1, num2)
の
addNum
は、好きな関数名が付けられる。
引数（num1・num2）は、カンマ区切りで何個でも指定できるんだ。
今回の例では、2つの引数を指定してるぜ！
function addNum(num1, num2) {
let sum = num1 + num2;
return sum;
}
ふんふん。
でも、よくわからないのが、関数内に
let sum = num1 + num2;
の足し算があるじゃん？
これが実行されるときって、まだnum1もnum2も値がない状態だと思うんだけど、何でエラーにならないの？
良い気づきだ！
関数はすぐには実行されないのさ。
実行されるタイミングは呼び出されたとき。
呼び出されるのは、関数が宣言されている場所より下にある
let answer = addNum(12, 33);
の部分さ。
呼び出された時に、引数（12と33）が関数に渡されて、関数の処理が走るんだ。
ふむふむ！だからエラーにならないのね！
今回の例では関数の便利さがあんまりわからないかもだけど、もし関数がなかったら、何回も足し算をするプログラミングソースを書かないといけないわけよ。
でもaddNumという関数を作ったおかげで、足し算したい時はaddNumを呼び出せばよくなる。
これが関数の良いところだぜ！
条件分岐をマスターしよう
プログラミングの世界では、もし〇〇だったら△△の処理を行うという「条件分岐」と呼ばれる文法が存在します。
条件分岐は使用頻度が高いため、ぜひ使い方を覚えておいてください。
※この後作成するプログラムでも使用します。
では、早速サンプルコードを見ていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<script>
// 合否を判定するpassed関数を宣言
function passed(score) {
if (score >= 80) {
// スコアが80点以上の場合
return "合格点です！おめでとう！";
} else {
// スコアが80点以上ではない（80点未満）の場合
return "残念！不合格…";
}
}
// passed関数を呼ぶ
console.log(passed(85));
</script>
</body>
</html>やったー「合格点です！おめでとう！」って、コンソールに出た～！
今度は、passedの85を72に変えて実行してみ？
あっ。。。不合格になった。。。
これが条件分岐ってやつだ。
例えば、会員サイトでログインするときにパスワードを打ち間違えたらログインできないでしょ？
あれは条件分岐で、「ログインIDとパスワードが合っていたらログイン成功！間違えてたらログイン失敗！」っていう風に処理を分けてるから、実現できるんだ。
なるほど、条件分岐って超実用的！
条件式に該当する場合の処理;
} else {
条件式に該当しない場合の処理;
}
JavaScriptの使い方｜プログラム作成編
前項までで、JavaScriptの導入と基本の文法を学ぶことができました。
ということでここからは、実際に何かプログラムを作成していきましょう。
JavaScriptでは色々なものを作成することができるのですが、難しいものからチャレンジすると挫折しやすいです。
そのため今回は、比較的簡単に作れてかつJavaScriptについてしっかり学ぶことができる「おみくじ」を作っていきましょう。
まだ文法について理解していないので、プログラムが書けるか不安…。
不安な気持ちは分かるけど、プログラムは“手を動かしてなんぼ”。
インプットをしたらすぐにアウトプットすることが大事だぜ。
3ステップだけだから、一緒に頑張ろう！
そっか…。ガンバール！
STEP1 : ひな形ファイルを作成しよう
はじめに、ひな形となる3つのファイルを作成していきましょう。
1つのファイルに「HTML/CSS/JavaScript」をすべて記述することもできますが、可読性向上のためにも言語別に分けた方が賢明です。
そのため、はじめに「Omikuji」という名前でフォルダを作成し、その中に「index.html」「styles.css」「main.js」というファイルを作成してみてください。
それぞれのソースコードはこのようになります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>
styles.css
/* まだ何も書かない */main.js
/* より正確なエラーチェックが行われるstrictモード（厳格モード）にしておく */
'use strict';これで下準備は完了です。
このままではブラウザに何も表示されませんので、ここからどんどんコードを追加しおみくじの形に仕上げていきましょう。
STEP2 : 押すと結果が表示されるボタンを作っていこう
ここでは、クリックすると「大吉・中吉・小吉」のいずれかが表示されるボタンを実装していきましょう。
それぞれのファイルは以下のように記述してください。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ボタンを追加 -->
<div id="button">Let's おみくじ！</div>
<script src="main.js"></script>
</body>
</html>style.css
/* 背景色の指定 */
body {
background: #efefef;
}
/* ボタンの装飾 */
#button {
text-decoration: none;
background: #ff7f50;
color: white;
width: 200px;
font-size: 20px;
height: 200px;
line-height: 200px;
margin: 30px auto;
border-radius: 50%;
text-align: center;
overflow: hidden;
box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
font-weight: bold;
border-bottom: solid 3px #ff7f50;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.65);
transition: .1s;
}
/* ボタンを押したときの装飾 */
#button:active {
-webkit-transform: translateY(3px);
transform: translateY(3px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
border-bottom: none;
}main.js
'use strict';
{
// buttonの値を取得し定数に代入
const button = document.getElementById('button');
}記述できたでしょうか？
では、とりあえずこの辺で、どんな風に表示されるか見ていきましょう。
表示イメージ
おお！おみくじっぽい！
これだとまだ動かないから、次はいよいよJavaScriptを追加していくよ！
ちなみに、さっきJavaScriptのコードで出てきた「getElementById」って何？
よし、じゃあまずはそっちを説明していこうか！
セットで登場する「getEventListner」というのもあるから、一緒に説明していくぜ！
const button = document.getElementById('button');
document.getElementByIdとは
getElementByIdとは、HTML内でID指定した要素を取得するメソッドです。
今回の場合は、
<div id=”button”>Let’s おみくじ！</div>
を取得しています。
addEventListenerとは
addEventListerとは、イベントが起こったときに何か処理を行うことができるメソッド。
”ユーザーが〇〇のボタンをクリックしたら△△という処理をしてね”ということを命令するために使います。
イベントはクリックだけでなく、スクロールやキーボード入力など、色々な操作に反応させることができます。
なるほど…動きをつけるためには必要なメソッドなんだね。
そうともさ。じゃあ、ラストスパート！JavaScriptで動きを追加していこうか！
STEP3 : JavaScriptでくじの結果が表示されるようにしよう
HTMLとCSSだけだと「Let’sおみくじ」ボタンを押しても何も変化を起こせないので、JavaScriptを追加して動きを付けていきましょう。
下記のコードを追加するだけで一気におみくじらしくなりますよ。
main.jsの追記（htmlとcssは変更無しです）
'use strict';
{
const button = document.getElementById('button');
// 追加ここから
// クリックイベントを追加しています
button.addEventListener('click', () => {
// 0～100までの乱数を生成し小数を切り捨てる
let randNum = Math.floor(Math.random() * 100) ;
if (randNum < 10) {
// 生成された乱数が10より小さい場合
button.textContent = '大吉';
} else if (randNum < 50) {
// 生成された乱数が50より小さい場合
button.textContent = '中吉';
} else {
// それ以外
button.textContent = '小吉';
}
});
// 追加ここまで
}この状態で、ブラウザで動かしてみて。ボタンを押したら、大吉・中吉・小吉のどれかが出るでしょ？
ほんとだ～
じゃあ、追加箇所を解説していこう！
button.addEventListener('click', () => {
// A：ここに処理を書く
});イベントの定義をしているところだね。
こうすることで、ボタンをクリックしたときに、Aに書かれた処理が動くようになるぜ。
書き方ムズいんだけど、これ覚えないとダメ？
覚えなくて大丈夫さ。「クリックした時に何か処理を加えたい時は、イベントを定義すればいい」ってことだけ頭の片隅に置いておけばいいよ。
そしたら使いたい時に検索してコピペすればいいっしょ？
ひとつひとつ細かく覚えるのはしんどいからさ。
それによく使うものは、実装しながら覚えられるしね。
よかったぁ～
// 0～100までの乱数を生成し小数を切り捨てる
let randNum = Math.floor(Math.random() * 100) ;
これ、見たことないのがいっぱいあって読みたくなくなるなぁ～
諦めないで！
こういうのは、ひとつひとつ検索で調べていけばOKよ。
まず、Math.random()から見ていこうか。
これは、「0以上、1未満の少数をランダムで生成する関数」なんだ。
console.log(Math.random())
って打ち込んでみると0.59265456みたいな数字が出てくるから試してみるといいぜ！
で、それに100を乗算して、Math.floor()で小数点を切り捨ててるんだ。
なるほどね。
Math.random()とかMath.floor()っていう関数は覚えてなきゃダメ？
これも覚えておく必要はなくて、都度調べればいいのさ。
「javascript ランダム」って検索すれば、Math.random()が出てくるし、
「javascript 小数点切り捨て」って検索すれば、Math.floor()が出てくるよ。
ランダム数字や小数点切り捨てができるっていうことを知っていれば十分なんだ。
僕だって、関数を細かくは覚えてないぜ！
あんしんしたぁ～
if (randNum < 10) {
// 生成された乱数が10より小さい場合
button.textContent = '大吉';
} else if (randNum < 50) {
// 生成された乱数が50より小さい場合
button.textContent = '中吉';
} else {
// それ以外
button.textContent = '小吉';
}あとは、条件分岐するだけだね。
randNumに入ってる数値によって、ボタンに表示するテキストを変えてるのさ。
textContentの中に文字を代入すると、HTMLを書き換えることができるんだ。
<div id="button">Let's おみくじ！</div>上記のように書かれていた部分が、button.textContent = ‘小吉’;とすることで、以下に変わるぜ！
<div id="button">小吉</div>問題：おみくじを応用してみよう
最後は応用問題ね。おみくじの結果をinputタグ（<input type=”text”>）の中に表示させてみよう。
答えは出さないから、自力で検索しながら解いてみよう！
HTML/CSSはこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="button">Let's おみくじ！</div>
<!-- 追加ここから -->
<p class="text-center"><input type="text" id="target"></p>
<!-- 追加ここまで -->
<script src="main.js"></script>
</body>
</html>
/* CSSの追加はこれだけ */
.text-center{
text-align:center;
}