プログラミングは奥が深い。。。@It_is_Rです。
Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるようになったここ数年。
WEB開発で、JavaScriptは必須といっても過言ではありません。
今回から、JavaScript入門講座を始めようと思います。
なんと今回は新企画、初心者の方でも分かりやすいよう、対話形式でお送りしようと思います。
※この記事は、従来のJavaScriptの使い方をメインに書いております。ECMAScript 2015や2016の情報は、後々別の記事で解説します。
オープニング
R
師匠！！JSについて教えて下さい！！
りこ
女子小学生について？まじきもーい。
R
りこ師匠！！今回はおふざけ無しです！！みんな真面目なんです。JavaScriptについてです。
りこ
はぁ〜、しょうがないわね。。。
R
りこ師匠！！高校生はタバコ吸っちゃダメです。まず、どうやって始めたらいいんですか！？ゲーム作りたいです。
りこ
溜め息よ！！吸ってないわ！！あと、いきなりゲームって何言ってんの？プログラミング経験は？
R
プログラミングってなんですか？
りこ
もうどうしようもないわね。。。徹底的にしごいてあげるわ！
【りこ】
JavaScriptにかなり詳しい現役JKギャル。JS(JavaScript)は好きだが、JS（女子小学生）と言われると怒る。ロリフェイスのくせに。。。
あだ名はジャバスク・りこ。
かなり性格が悪く、口も悪い。
しかし、天然でノリがいいので、からかうと面白い。
近い未来、このブログの管理人であるRによって、JavaScriptで操作されることをまだ知らない。
※JavaScriptで人の思考を直接操作することはできません。
JavaScriptを使う方法
まず、JavaScriptはどのように使うのかというところから始めていきましょう。
JavaScriptプログラミングに必要な物
JavaScriptプログラミングに必要な物についてです。
R
師匠！！とりあえず、必要なものって何ですか？
りこ
パソコンは持ってる？
R
当然です！！ディスってんですか！？
りこ
別にディスってないわ。じゃあテキストエディタ。
R
なるほど。他には？ソフトとか。。。
りこ
ブラウザは入ってるでしょ？
R
入ってますけど。。。それだけですか？
R
えぇっ！！これだけですか！？
りこ師匠、JSのくせによく知ってますね！！
りこ
すごいでしょー。それにあたし、JSつまりは女子しょうがくせ……って、てめーこのやろー！！！！(殴
R
ぎえええええっ！！！
JavaScriptは、ブラウザ上で動くプログラミング言語です。
一昔前まではFlashが流行っていましたが、スマートフォンがFlashに対応しなくなり、WEB上のアニメーションなどはCSSやJavaScriptで行われることが多くなっております。
また、JavaScriptプログラミングには、特に開発の準備の必要がないという特徴があります。
テキストエディタとブラウザさえあれば、パソコン上ですぐにプログラミングができてしまいます。
JavaScriptの記述方法
では、JavaScriptの記述方法について見ていきましょう。
りこ
まずJavaScriptの読み込みには2通りの方法があるわ。
りこ
「HTMLファイルに直接記述する方法」と「外部ファイルに記述してそのファイルを読み込む方法」ね。
直接HTMLに記述
直接JavaScriptをHTMLに記述する方法です。
R
JavaScriptはどうやって記述したらいいんですか？
りこ
今から解説するわ。
R
HTMLとかいうファイルに書くんですか？
りこ
そういう方法もあるわね。あと外部ファイルに書いて、HTMLから呼び出す方法もあるわ。
R
なるほど。。。つまりWEBページの中で動くものなのか。。。
りこ
そうね。じゃあまず、HTMLに直接JavaScriptを記述する方法を解説するわ。
りこ
まずHEADタグ内に記述する方法は、直接記述する方法でもお勧めしない記述方法だから気をつけて。
headタグ内に書いています。ただこれは、少し古いやり方です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
console.log("test"); //headタグ内にJavaScriptが書かれている！
</script>
</head>
<body>
</body>
</html>
R
なんでこれじゃダメなんですか！？動かないんですか！？
りこ
動かないわけじゃないけど、基本ブラウザは上から順番にコードを読んでいくの。JavaScriptは重いから、後から読んだ方が効率がいいのよ。
R
りこ師匠は胸が軽そうだから、効率がいいってのと同じですね！！
りこ
そうそう、胸が重いと効率が悪いからあたしはこれでいい……って、てめー、さりげなく気にしてること言ってんじゃねー！！！（殴
R
ぎええええええええっ！！！！
最近では、下の書き方の方が多く見られます。
bodyタグ内の最後に書くやり方です。できる限りこちらを使うことをお勧めします。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
〜省略〜
<script>
console.log("test"); //bodyタグ内にJavaScriptを移動
</script>
</body>
</html>
りこ
今はbodyタグ内の一番下に書くのが一般的ね。これなら、サイトを読み込んでからJavaScriptを読み込む形になって効率がいいでしょ？
R
bodyの一番下に移動したんですね！！頭から体の一番下に移動したんですね！！！（さわさわ
りこ
そうそう。そこから胸を伝って体の一番下に……って、何気に触ってんじゃねー！！！海に沈めるぞ！！（殴
R
ぎえええええええええっ！！！
りこ
てか、みんな真面目だって言ってたのはどこの誰だよ！！！
外部ファイルに記述して呼び出す方法
JavaScriptのソースが長い場合、外部ファイルに記述してそのファイルをHTMLで呼び出すという方法もあります。
headタグ内から呼び出すこともできますが、今はbodyタグ内の一番最後に記述して呼び出すのが一般的です。
りこ
JavaScript部分のソースが長い場合は、別のファイルを作って、それをHTMLから呼び出すこともできるわ。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
〜省略〜
<script src="sample.js"></script><!-- 外部ファイルの呼び出し -->
</body>
</html>
R
scriptタグを使って、「sample.js」ってファイルを呼び出すんですね。
りこ
そう。この「sample.js」にJavaScriptのプログラムを書けばいいの。
R
なるほど。それは分かりやすくなりそうだ。
りこ
ちなみに、「sample.js」のコードはこうなるわ。
sample.js
console.log("test");
りこ
じゃあ、次からはJavaScriptプログラムを作っていくわよ！
console.log()で文字列をコンソールに表示する。
次は、ブラウザに文字列を表示します。
りこ
ところで、さっきからたまに出てくる「console.log()」って何か知ってる？
R
もちろんです。コンソレ、ロゴです。
りこ
なにそれ？
R
すみません。知らないです。
りこ
最初からそう言えばいいのに。ブラウザのコンソールに文字を表示する命令ね。
りこ
Google Chromeならば、画面を右クリックして「検証」を選択すればこの画面が開くわ。
あと、consoleって書いてあるメニューに切り替えてね。
R
他のブラウザを使ってる場合は？
りこ
Safariならば右クリックしてから「要素の詳細を表示」、firefoxならば「要素の調査」をクリックすれば、コンソールってメニューがあるわ。
R
Opera使ってます！！
りこ
ホントにめんどくさい人ね。。。右クリックで「要素の検証」ね。
だいたいどのブラウザでも一緒だから。
R
どのブラでも一緒か。。。
りこ
略すな！誤解されるから！！
まぁ、こうやってコンソールに文字列を表示できたなら、JavaScriptプログラミングの第一歩よ！
コメントを書く
続いて、コメントの書き方について紹介していきたいと思います。
りこ
次はコメントについてなんだけど、コメントって分かる？
R
ノーコメントです。
りこ
イラッ……
R
はっ！！ギャグが通じなかった。。。どうしよう、空気が乱れてしまった。。。とりあえず脱ぐか、いや、それで解決するか。。。
りこ
全部聞こえてるぞ！！（殴
R
ぎえええええ！！！
りこ
コメントってのは、プログラムには反映されない、自分の覚えとして書いておく文章ね。
R
ふーん。プログラムに反映されないなら関係ないやー。
りこ
でも、何百、何千行とソースが長くなったらどこに何を書いたか分からなくなっちゃうでしょ？
R
む、確かに。。。
りこ
そこで、プログラムにコメントを残すのよ。
//を行頭につけることで、コメントとして認識して、実行結果にはなにも反映されないわ。
sample.js
//console.log()は、コンソールに文字列を表示させる命令
console.log("test");
実行結果
test
りこ
コメントを複数行にしたい場合は、/* */の間に文章を入れることで、実行結果には反映されないわ。
sample.js
/*console.log()は、
コンソールに文字列を表示させる命令*/
console.log("test");
実行結果
test
R
つまり、こんな使い方ができます！
sample.js
/*くそ、りこのヤツ、毎日毎日殴りやがって……。
見てろよ、いつかけちょんけちょんにしてやるからな。。。*/
console.log("りこ師匠かわいい！！");
実行結果
りこ師匠かわいい！！
りこ
てめー、心臓に穴開けるぞ！！！ (殴
R
ぎえええええええっっっ！！！！
※ブラウザからJavaScriptのソースを見ることができます。絶対にマネしないでね！！
エスケープ文字で文字列を操作する
エスケープ文字を用いて文字列を改行したりなど、文字列を操作することができます。
りこ
エスケープ文字は文字列を改行したり……まぁ、特殊な意味を持つ記号ね。
R
なんか面白そうだ。。。
りこ
使い方は、バックスラッシュ(\)の後ろに文字を入れることで、記号の役割が変わるわ。このバックスラッシュ(\)がエスケープ文字ね。
R
なんか、よく分からないけど。。。
りこ
実際のやり方はこうよ。
sample.js
console.log("\\nと入力することで、改行ができます。\nほらね。");
実行結果
\\nと入力することで、改行ができます。 ほらね。
R
ちゃんと改行されてますね！
あれ？一番最初の\\nは改行されてないですね。。。
りこ
そう！「\\」って入力すると、「\」って表示させることができるの。
R
だから\nって表示される訳だ。
エスケープ文字(\)を使用すると、次の文字に意味を持たせることができます。
今回の\nや、\\がその一例です。
他にもいくつかありますので紹介します。
| \’ | シングルクォーテーション |
|---|---|
| \” | ダブルクォーテーション |
| \\ | バックスラッシュ |
| \b | バックスペース |
| \t | タブ |
| \n | 改行 |
変数にデータを格納する。
つづいて、変数について解説していきたいと思います。
R
ついに変数か。。。
りこ
あら、変数は知ってるのね。
R
変数仮面……ってよく言うじゃないですか。
りこ
それは変態仮面！！
R
よしっ、言わせた。
りこ
（殴
R
ぎええええええっ！！！
りこ
テンポ悪いからさっさと解説するわよ。
R
よ、よろしくお願いします。師匠！！
りこ
変数はデータを格納する箱ってよく例えられるわ。
R
箱ですか？
りこ
そう、例えばこんな感じね。
sample.js
animal = "dog"; console.log(animal);
R
どうしてanimalって表示されないんですか！？
りこ
もしもanimalって表示させたいならこうね。
sample.js
console.log("animal");
R
そうか、””で挟まれてないんだ！
りこ
そう。””で挟まれていない文字列は変数として扱われるわ。
R
つまり、animalって変数に、dogという文字列が格納されたんですね。これで箱って言われるんですね。
りこ
そうそう。
R
これは便利だ。。。つまり
sample.js
riko = "ブス"; console.log(riko);
実行結果
ブス
りこ
挽き肉にするぞ！！（殴（殴（殴
R
ぎええええええええええっ！！！
変数の宣言について
りこ
ただ、この書き方は本当はあまり良くない書き方なの。
R
えっ、良くないんですか！？
りこ
変数を使うには、まず変数の宣言が必要なのね。
R
変数使いまーす！
りこ
そうそう、そうやって変数を使うってことをプログラムで宣言するの。
R
ふざけたのに！！（泣
りこ
変数の宣言のしかたはこうよ。
sample.js
var animal = "dog"; console.log(animal);
りこ
この「var」ってのが変数の宣言ね。
もう一つ、「let」って宣言もあるわ。
でも、letはJavaScript1.7からのもので、varを使っている講座も多いの。まぁ、とりあえず紹介ね。
sample.js
let animal = "dog"; console.log(animal);
りこ
varとletの違いはまた後で解説するけど、変数を宣言した場所によってその変数が使える範囲がきまるの。
でも、その話ももうちょっとあとね。
R
その前に、話したいことがあるんですね！
りこ
うん。
変数の型について
りこ
変数には型があって、それをしっかり理解しておかないと、後から厄介になるわ。
R
なるほど。変数の型ですね。
りこ
JavaScriptは、変数にデータを入力した時点で、その変数が何の型なのかが決まるの。
例えば……
sample.js
let age = 18; console.log(age);
R
りこ師匠の年齢ですか？……あれ、””で挟まれてないんですね。
りこ
そう。これは数値を代入しているからよ。
R
なるほど。数値を代入するときは””で挟まなくてもいいんですね。
りこ
さっきの文字列が格納された変数は文字列（String）、今回の数値が格納された変数は数値(Number)ね。
こんなこともできるわ。
sample.js
let age = "18"; console.log(age);
R
数値を格納しているからNumber……あれ、””で挟まれてるってことは。。。
りこ
この場合、18という文字列をageに代入しているから、文字列(String)ね。
りこ
ほかにも、trueとfalseが格納される、真偽値(Boolean)なんてのもあるわ。
スコープについて
りこ
つづいて、スコープについて解説するわ。
R
なんだか聞きなれない言葉ですね。
りこ
普段からそれほど使う言葉じゃないからね。
R
スコープって何ですか？
りこ
簡単に言うと、変数の有効範囲ね。
りこ
例えば、このソースを見てみて。
sample.js
let x = 24;
(function() {
let x = 30;
})();
console.log(x);
りこ
functionってのは今回は気にしないで。これコンソールにはなんて表示されると思う？
R
letで変数xが宣言されてて、24が代入されてからの、また変数xが宣言されてて、30が代入されてるから……
R
分かった。30だ！！
りこ
ぶー！！はははっ間違えた。超ウケる。
R
なにっ！！
りこ
24でした。
R
どうして！？
スコープについての基本
りこ
変数には有効範囲があるの。
今回の例では、xを2回宣言してるでしょ？
りこ
(function() { })();の中の変数xと、外側の変数xとは別物と考えていいわ。
sample.js
let x = 24; //この変数xと
(function() {
let x = 30; //この変数xは別物
})();
console.log(x);
りこ
もっと分かりやすい例はこれね。
sample.js
(function() {
let x = 30;
})();
console.log(x);
りこ
(function() { })();の中の変数xを外から呼び出そうとすると、エラーになるの。
(function() { })();の中で宣言された変数は、(function() { })();の中でのみ有効なのよ。
R
りこ師匠のように厄介ですね。。。
りこ
てめー、富士の樹海に捨ててくるぞ！！（殴 （殴 （殴
R
ぎええええええええっっ！！！！
りこ
逆よ。このエラーのおかげで、変数に間違って別の数値を代入しちゃったとか、そういうバグが防げるの。
R
バグが防げる！？
りこ
そう。例えばこんな感じね。
関数については後でみっちり解説するから、今は気にしないで。
sample.js
//りんご情報の関数
var ringo = function() {
color = "red";
size = 15;
}
//オレンジ情報の関数
var orange = function() {
color = "orange";
size = 14;
}
ringo();
orange();
//りんごの情報を表示したい
console.log(color);
console.log(size);
実行結果
orange 14
R
りんごの情報を表示したいのに、オレンジの情報が表示されてしまってますね。
りこ
原因は、colorやsizeという変数が、同じ変数名だからね。
今回は短いソースだからすぐに分かるけど、本番のながーいソースだったら、変数名をいちいち覚えてられないでしょ？
りこ
そこで、そういったバグを防ぐためにも、変数を宣言するのよ。
sample.js
//りんご情報の関数
var ringo = function() {
let color = "red";
let size = 15;
}
//オレンジ情報の関数
var orange = function() {
let color = "orange";
let size = 14;
}
ringo();
orange();
//りんごの情報を表示したい
console.log(color);
console.log(size);
実行結果
エラー
りこ
こうすると、関数の中で変数が宣言されてるから、エラーになるでしょ？
R
そうか、エラーが表示されれば長いプログラムでも、変数が重なってしまった場合に気づけるんだ！！
りこ
そういうことね。ちなみにエラーにしたくない場合はこう。
sample.js
//りんご情報の関数
var ringo = function() {
let color = "red";
let size = 15;
console.log(color);
console.log(size);
}
//オレンジ情報の関数
var orange = function() {
let color = "orange";
let size = 14;
console.log(color);
console.log(size);
}
ringo();
orange();
りこ
これでりんごとオレンジの情報を表示することができるわ。
りこ
次はもっと細かくスコープについて紹介するわ。
varとletの違い
R
ところで、varとletって何が違うんですか？
りこ
そうね。そろそろ解説してもいいかもしれないわね。
さっきは関数を例に使ったけど、今回はif文を使って解説するわ。
R
if文って何ですか？
りこ
いろいろと新しい単語が出てきて大変だけど、後でちゃんと解説するからね。
sample.js
let x = 3;
let y = 14;
if(x === 3) {
let y = 13;
}
console.log(y);
りこ
if文について簡単に解説すると、今回の場合はxが3の時っていう意味ね。
これ実行結果は何だと思う？
R
xが3の時に変数yを宣言して、13を代入していますね。変数xには一番最初に3を代入しているから、これは実行されるわけだと思うけど。。。いや、if文の{}内で変数yを宣言してるから、これは全く別物なのかもしれないな。
R
分かった、14ですね！
りこ
正解！変数のスコープについてちょっと理解してきた様ね。
りこ
じゃあ、これは？
sample.js
let x = 3;
var y = 14;
if(x === 3) {
var y = 13;
}
console.log(y);
R
それディスってるんですか！？letがvarに変わっただけじゃないですか。14です！！
りこ
ぶー！！引っかかった。
実行結果
13
りこ
結果は13よ。ドヤ顔で言ったくせに超ウケる！！きもーい。
R
はっ！！やられた！！
りこ
varはletと違って、if文とかのブロックの中で宣言しても、外から呼び出せるの。
sample.js
let x = 3;
if(x === 3) {
var y = 13;
}
console.log(y);
実行結果
13
りこ
実行結果は13と表示されるわ。
りこ
まぁ、これがvarとletの違いね。でも気をつけて。さっきの関数ではまた違った動きをするわ。
sample.js
//りんご情報の関数
var ringo = function() {
var color = "red";
var size = 15;
}
ringo();
//りんごの情報を表示したい
console.log(color);
console.log(size);
実行結果
エラー
りこ
さっきの例を短くしたものだけど、letをvarに変えても、関数の外から関数内の変数を呼び出すことができずにエラーになるの。
R
なるほど。まだ関数とかif文とかがよくわからないけど、変数には有効範囲があるってことぐらいは理解できました。
りこ
まぁ、難しいからね。何度も言うけど、関数やif文は後でちゃんと解説するからね。
演算について
JavaScriptによる演算について解説していきます。
りこ
じゃあ、JavaScriptで演算をしてみようか？
R
いてて、捻挫した。
りこ
はははっ！！、ざまあ。
R
演算と捻挫って似てますよね！
りこ
は？
R
いや、だから、演算と捻挫って似てますよね！！
りこ
ギャグのつもり？……ウケる。
R
ウケてないじゃないですか！！
りこ
スコープとかと比べたら演算はすごく簡単だから、どんどんやっていくわよ！
代入
りこ
代入はさっきから何度も出てきてるから分かると思うけど、おさらいも兼ねて解説するわね。
sample.js
x = 10;
りこ
これは変数xに10を代入するって意味になるわ。
つまり、xという変数の箱に、10を格納するってことね。今回の10は数値(Number)よ。
加算代入
りこ
代入の他に、加算代入なんてのもあるわ。
sample.js
let x = 10; x += 2;
りこ
この例だと、1行目でxを宣言して、10を代入。
そのあと、xに2を足すって意味になるわ。この例と一緒ね。
sample.js
let x = 10; x = x + 2;
減算代入
りこ
加算代入に対して、減算代入ってのもあるわね。
sample.js
let x = 5; x -= 3;
りこ
この例だと、1行目でxを宣言して、5を代入。
そのあと、xから3を引くって意味になるわ。
乗算代入
りこ
同じ様に乗算代入ってのもあるわ。言ってみれば掛け算ね。掛け算は*を使って表すわ。
sample.js
let x = 4; x *= 8;
除算代入
りこ
対して除算代入。これは割り算ね。割り算は/を使って表すの。
sample.js
let x = 8; x /= 2;
文字列と文字列を組み合わせる
りこ
加算だけは、文字列同士を繋げるのにも利用できるわ。
let serif = "今日も雨か。"; let serif2 = "明日は晴れるかな。"; console.log(serif + serif2);
実行結果
今日も雨か。明日は晴れるかな。
りこ
この例だと、変数serifと変数serif2を足し算して、「+」で繋げて表示しているの。
りこ
まぁ、基本的な部分はこれぐらいね。
条件分岐について
続いて、条件分岐について解説していきます。先ほども少しだけ出てきたif文もここで解説します。
りこ
さて、次は条件分岐よ。さっきもif文ってのが出てきたけど、ここでもっと詳しく解説するわ。
R
待ってました！！
if
りこ
ifは、もしもっていう意味で、条件によって実行するかしないかを判別するものね。
R
「もしも、りこ師匠のバストがx以下ならば、Rの好み」みたいな感じですか？
りこ
そうそう、あたしのバストがx以下……って、てめー、夜の星の一つにするぞ！！！（殴 （殴 （殴
R
ぎえええええええええええっっ！！！！
りこ
ifの使い方はこうよ。
sample.js
let x = 5;
if (x === 5) {
console.log("xは"+ x +"です。");
}
実行結果
xは5です。
りこ
xには5が代入されてるから、ifの中のconsole.log();が実行されてるのね。
R
この===ってのが、等しいっていう意味なんですね！
りこ
90%それでいいんだけど、ちょっと違うかな。
これは比較演算子っていって、===は厳密に等しい場合に使うのよ。
りこ
比較演算子は、一覧表にしておくわ。
| == | 等しい |
|---|---|
| === | 厳密に等しい |
| != | 等しくない |
| !== | 厳密に等しくない |
| > | 〜よりも大きい |
| >= | 〜以上 |
| < | 〜未満 |
| <= | 〜以下 |
R
==と===とか、!=と!==の違いが分からないです。
りこ
そうよね。じゃあ、この例を見てみて。
sample.js
let x = 3;
let y = "3";
if (x == y) {
console.log("xとyは等しいです。");
}
実行結果
xとyは等しいです。
R
変数の型が違うのに、等しいって表示されてますね。でも代入しているのはどちらも3ですよね。。。
りこ
そうね。でも、これだと？
sample.js
let x = 3;
let y = "3";
if (x === y) {
console.log("xとyは等しいです。");
}
実行結果
R
あれ？実行結果になにも表示されないですね。
りこ
そう。これが、==と===の厳密さの違いね。
同じ様に、!=と!==の場合は。。。
sample.js
let x = 3;
let y = "3";
if (x != y) {
console.log("xとyは等しくないです。");
}
実行結果
R
この場合も、実行結果になにも表示されないんですね。
りこ
型は違っても、どっちも3だからね。
sample.js
let x = 3;
let y = "3";
if (x !== y) {
console.log("xとyは等しくないです。");
}
実行結果
xとyは等しくないです。
R
なるほど、これだと型が違うから実行されるわけだ。
りこ
どっちも3だけど、数値と文字だからね。
if else
R
でも、条件を満たさないときは何も表示されないって寂しいですよね。
りこ
そんなときは、if elseを使えばいいわ。
sample.js
let x = 3;
let y = 5;
if (x === y) {
console.log("xとyは等しいです。");
} else {
console.log("xとyは等しくないです。");
}
実行結果
xとyは等しくないです。
りこ
elseは、それ以外のときを表すわ。
x===y、つまり、xとyが厳密に一緒な時じゃない場合ってこと。
R
なるほど、つまりこういうことですね。
sample.js
let riko = "ブス";
if (riko === "かわいい") {
console.log("りこ師匠はかわいいです。");
} else if (riko === "きれい") {
console.log("りこ師匠はきれいです。");
} else if (riko === "セクシー") {
console.log("りこ師匠はセクシーです。");
} else {
console.log("りこ師匠はただの"+ riko +"です。");
}
実行結果
りこ師匠はただのブスです。
りこ
そうそうそう！！elseの後にif文を重ねることで、いくつも条件を組み合わせることができるの。で、rikoはかわいくなくて、きれいでもなくて、セクシーでもなくて、りこ師匠はただのブ……って、てめーチェーンソーで半分にするぞ！！（殴 （殴 （殴
R
ぎええええええええええええええっっ！！！
switch
りこ
条件が多くて、ifだとソースを書くのがめんどくさい場合、switchを使うと楽になるわ。
sample.js
let animal = "ねこ";
switch(animal) {
case "いぬ" :
console.log("dog");
break;
case "ねこ" :
console.log("cat");
break;
case "うさぎ" :
console.log("rabbit");
break;
default :
console.log("英語にできません");
}
実行結果
cat
りこ
switch()の、()に入った変数の中身が、caseの後に書いた単語と一致すれば、console.logで英語を表示するプログラムね。
caseの最後には、break;を付け忘れないでね。これがないと、そのあとの単語まで全て表示されてしまうわ。
R
そうか、break;でswitchから抜け出すってことですね！
繰り返しについて
りこ
同じことを何度も繰り返す時ってあるじゃない？
R
ありますあります。何度同じ過ちを繰り返してしまうんだろうと……。もう夜更かししないって決めたのに！！
りこ
プログラムの話よ。
R
はっ！恥ずかしい！！
りこ
例えば、こんなプログラム。
sample.js
console.log("これを繰り返したい。");
console.log("これを繰り返したい。");
console.log("これを繰り返したい。");
console.log("これを繰り返したい。");
console.log("これを繰り返したい。");
実行結果
これを繰り返したい。 これを繰り返したい。 これを繰り返したい。 これを繰り返したい。 これを繰り返したい。
R
効率が悪いですね。。。
りこ
そんな時に使えるのが、繰り返し命令よ。
for
りこ
今回は5回繰り返したいから、forを使って5回繰り返してみるわ。
sample.js
for (let i=0; i<5; i++) {
console.log("これを繰り返したい。");
}
R
これで5回繰り返されてしまうんですか！？
りこ
そう。まず、letで変数iを宣言して0を代入。i<5ってのは、変数iが5未満の時、{}内のプログラムを動かすってことね。i++ってのは、変数iに1ずつ加えるって意味よ。
R
なるほど、それで5回繰り返されるんですね！！
while
りこ
whileを使っても、繰り返しを行うことができるわ。
sample.js
let i = 5;
while (i > 0) {
console.log("これを繰り返したい。");
i--;
}
りこ
while(){}の、()の中に、繰り返す条件を書くの。今回だったら、iが0よりも大きい場合に繰り返す。
最後にiから1ずつ引いてるから5回繰り返されたわけね。
R
これは便利だ！！
配列について
りこ
同じ様な変数をいくつも用意したい場合とかに、配列を使うと便利よ。
R
配列・オブ・カリビアン
りこ
は？
R
なんでもないです。
りこ
ん。。。配列は、こうやって使うの。
sample.js
let x = [5,2,6]; console.log(x[2]);
実行結果
6
りこ
xに複数の数値や文字列を代入して、その中から好きなものを取り出せるの。
例の場合だと、5と2と6を代入して、console.log(i[2]);で6を表示させているわ。
R
どうして6が表示されるんですか？
りこ
それはね、x[]の、[]の中の数値が、取り出す要素を指定しているの。
ここで気をつけるのは、0から数えて何番目かで指定してるってことね。今回だったら、x[2]で、0から数えるから、3番目の要素をしていしてるってこと。
R
なるほど、2番目じゃなくて3番目だから、6が表示されたんですね！！
りこ
さらに、こんなこともできるわ。
sample.js
let x = [
[1,2,3],
[4,5,6],
[7,8,9]
];
console.log(x[2][0]);
実行結果
7
りこ
これは多次元配列っていうの。今回は、x[2][0]つまり、上から3番目の、一番最初の数値を表示させているの。
R
へぇ、ちょっと複雑だけど、納得です。
関数について
りこ
じゃあ、これが最後。関数について解説していくわよ。
R
待ってました！！
りこ
この例を見てみて。
sample.js
let animal = function() {
console.log("ねこ");
}
animal();
実行結果
ねこ
りこ
今回作ったのは、ただ「ねこ」って表示させるだけの関数だけど、animal();で、animalって名前の関数を呼び出せるの。
R
それで、animal関数の中のconsole.log("ねこ");が実行されて、「ねこ」って表示されたんですね。でもどうしてそんなことする必要があるんですか？
りこ
今回は短いソースだけど、普通はもっと長いソースだったりするでしょ？それをパーツごとに分けて書いて、使いたい時に何度も利用できるようにするのよ。
R
なるほど！！
りこ
ここからはもっと詳しく解説するわよ。
引数と戻り値
りこ
プログラムを作る上で、全く同じパーツを何度も使うことってすくないでしょ？
R
そうですよね。どんなに似てても多少は違いますよね。
りこ
そんな時は、引数や戻り値を使うことで解決できるわ。
sample.js
//足し算をする関数
let addition = function(a,b) {
return a + b;
}
//合計をtotalに代入
let total = addition(3,2);
console.log(total);
実行結果
5
りこ
足し算する関数ってのを作ってみたわ。
りこ
2行目で足し算をする関数を作って、それを7行目で呼び出してるのね。その時、()の中に3と2が入ってるでしょ？これが2行目のaとbにそれぞれ代入されるの。これを引数っていうのね。
さらに、returnでa+bを返すの。返すって表現が分かりにくいんだけど、このa+bの合計が、7行目のtotalに代入されるの。これが戻り値ね。
そのtotalをconsole.log();で表示しているから、実行結果に5と表示されたの。
りこ
かなり複雑だけど、分かるかしら？
R
じゃあ、引数である3と2の数値を別の数値に変えたら、結果は変わってくるってことですか？
りこ
そうよ！分かってるじゃない！
次回予告
りこ
今回は、JavaScriptの基本を勉強したけど、どうだった？
R
りこ師匠はブスだなーと思いました！！！
りこ
そうそう、あたしってぶ……てめー、重い荷物背負わせて火山に落とすぞ！！！（殴
R
ぎえええええええ！！！
りこ
次はもっと奥深く解説してあげるから、覚悟してなさい！！
この企画の一覧はこちら
- JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編！！
- JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。（実践編）
- JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。（実践編）
こんにちは。超初心者でHTMLとCSSはかるーく撫でたくらいです(progateの無料でできるとこくらいまで)その後何か動かした結果を見たいが為にPyrhonを選びましたが(初心者におすすめって見たから)環境構築が出来なくて構築がいらないjavascriptから始めようと色々サイトを漁っていたのですが、It is Rさんのこの説明がどんなサイトより分かりやすく初学者の目線をよくわかってくれていると感激しました。説明で書かれているものを真似て実際に自分で書いて理解を深めていこうと思います。本当にありがとうございます！