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