JavaScriptではじめるプログラミング入門

自己紹介

宇都宮 諒(Utsunomiya Ryo)

Webエンジニア@アシアル株式会社

今日のテーマ「プログラミング入門」

そもそもプログラムとは？

プログラムとは、料理のレシピのようなもの

プログラムの中で、コンピュータに実行させるものを、特にコンピュータ・プログラムと呼ぶことがある

なぜ、コンピュータにプログラムを実行させるの？

コンピュータは、決められた手順を正確に実行するのが得意

誰がやっても同じ結果が得られる、決まりきった処理（例：計算）は、コンピュータにやらせよう

プログラムの作り方

コンピュータが理解できる形式？

プログラミング言語

• 機械語
• アセンブラ
• C言語
• JavaScript
• その他、多数のプログラミング言語が存在する

JavaScript

• Webブラウザー上で実行可能なプログラミング言語
• このスライドも、JavaScriptで出来ている

実際に書いてみよう

http://jsfiddle.net/

hello html

hello javascript

var out = document.getElementById("out");
out.innerHTML = "hello javascript";
					

ポイント：JavaScriptによって、HTMLを書き換えることができる

変数

• 好きな値を入れることのできる箱のことを「変数」と呼ぶ
• 変数の名前は英単語を使うことが多い
• 初めて使う変数をコンピュータに教えることを「変数の宣言」という
• JavaScriptでは、変数の宣言には「var」キーワードを使う(variableの頭3文字)

var out は、「outという変数を使うよ」とコンピュータに教えている

代入

• 「=(イコール)」を使って、右辺の値を左辺に「代入」する
• 「x = 1 + 1」のイメージ
• JavaScriptでは、「=(イコール)」は「代入」
• 「等しい」という意味では、「==(ほぼ等しい)」又は「===(完全に等しい)」を使う

※ == と === の違いは両辺の値の型を比較するか否か。1=='1'はtrue、1==='1'はfalse

document.getElementById()

• documentとは、HTML文書全体のこと
• .(ドット)の左側の要素に、右側の命令を実行させる
• getElementByID()は、idを目印に要素を取得する命令
• getElementByID()の()の中には、取得させたい要素のidを書く
• JavaScriptのプログラムの中に文字を含める場合は、'(クォート)又は"(ダブルクォート)で囲む。'又は"で囲まれた一連の文字を「文字列」と呼ぶ

文字列の例："s", "こんにちは", "123", ""(空文字列)

セミコロンと改行

• JavaScriptの行の区切りは「;(セミコロン)」
• 改行も行の区切りとみなされる
• セミコロンを付けなくても動くが、不具合の原因になることがある

// セミコロン無しでも動くけど…
var out = document.getElementById("out")
out.innerHTML = "hello javascript"

// 改行を無くすと動かなくなる
var out = document.getElementById("out")out.innerHTML = "hello javascript"

// セミコロンが付いていると、改行を無くしても動く
var out = document.getElementById("out");out.innerHTML = "hello javascript";
					

1行目のまとめ

var out = document.getElementById("out");
					

※outは初めて使う変数なので、varキーワードで変数宣言をしている

innerHTML

var out = document.getElementById("out");
out.innerHTML = "hello javascript";
					

• HTMLの要素の中には、様々な値が「変数」として格納されている
• 要素の持っている変数にアクセスするには、.(ドット)を使う
• innerHTMLは、「HTML要素の内側」に入れる内容を格納する変数
• <div> <!-- ここがinnerHTML --> </div>
• JavaScriptの実行前には、innerHTMLには「hello html」が入っている
• innerHTMLに、=で「代入」すると、「hello html」が「hello javascript」に書き換えらる

代入ではなく、追加するには？

「+=」を使う

var out = document.getElementById("out");
out.innerHTML += "hello javascript";
					

文字列の連結

• 文字列を連結するには、+(プラス)を使う
• +=を使うと、左辺の文字列に右辺の文字列を追加する
• +の両辺が数値である場合には、+は文字列連結ではなく加算になる

var out = document.getElementById("out");
out.innerHTML = 1 + 1; // 「2」と表示
out.innerHTML = 1 + "1"; // 「11」と表示
out.innerHTML += 1; // innerHTMLの中身は文字列とみなされるので、必ず連結になる
					

改行を付け足したい

<br>タグを使う

var out = document.getElementById("out");
out.innerHTML += "";
out.innerHTML += "hello javascript";
					

課題1: 各行に、1から10までの数字を1つずつ表示するプログラムを書きなさい

解答例

問題点：めんどくさい

10くらいなら手でもやれるけど、10000くらいになると、手ではやってられない

繰り返し数字を表示するような、決まりきった作業は、コンピュータにやらせるべき

繰り返し（ループ）

var out = document.getElementById("out");
var n = 1; // nという変数を宣言し、1を代入
while (n <= 10) { // nが10以下のとき、{}で囲まれた部分を実行する
	out.innerHTML += n; // innerHTMLに数字を追加
	out.innerHTML += ""; // 改行を追加
	n += 1; // nに1を足す
}
					

• 「while(){}」でひとまとまりの「文」
• 「n <= 10」のように、真／偽いずれかの判定が可能なものを「条件」と呼ぶ
• ()の中の条件が「真」である間(while)、{}で囲まれた部分の処理を実行する
• 「n += 1;」を書き忘れると、永遠に同じ処理を実行し続けるので注意（無限ループ）

課題2：九九の1の段を表示するプログラムを書きなさい

＜出力例＞

ヒント：JavaScriptの四則演算記号は以下の通り。

1 + 1; // 加算
1 - 1; // 減算
1 * 1; // 乗算（掛け算）は、*(アスタリスク)を使う
1 / 1; // 除算（割り算）は、/(スラッシュ)を使う
					

解答例

var out = document.getElementById("out");
var n = 1;
while (n <= 9) {
    out.innerHTML += "1 × ";
    out.innerHTML += n;
    out.innerHTML += " = ";
    out.innerHTML += 1 * n; // 掛け算の結果を追加
    out.innerHTML += "";
    n += 1;
}
					

課題3：九九を表示するプログラムを書きなさい

ヒント：while文を2つ組み合わせると楽ができる

解答例

var out = document.getElementById("out");
var n = 1;
var m;
while (n <= 9) {
    m = 1;
    while (m <= 9) {
        out.innerHTML += n;
        out.innerHTML += " × ";
        out.innerHTML += m;
        out.innerHTML += " = ";
        out.innerHTML += n * m;
        out.innerHTML += "";
        m += 1;
    }
    n += 1;
}
					

課題4：掛け算の式と答えを表示するプログラムを書きなさい

ヒント：次のページで書き方を教えます

function(関数)

• functionは、「処理に名前をつけて保存する」機能
• functionの定義には、function(){}という構文を使う
• ()の中で、functionの中で使用する変数を宣言する
• return の後に書かれた値が、functionの値として「返る」

var out = document.getElementById("out");

// add という名前のfunctionを定義する
function add (n, m) { // nとmという変数を宣言
	return n + m; // n + m の結果を「返す」
}
out.innerHTML = add(1, 1); // 「1 + 1」の結果である「2」が表示される
					

掛け算の式と答えを表示するfunction

function printMultiply (n, m) {
    var out = document.getElementById("out");
    out.innerHTML += n;
    out.innerHTML += " × ";
    out.innerHTML += m;
    out.innerHTML += " = ";
    out.innerHTML += n * m;
    out.innerHTML += "";
}
printMultiply(4, 2); // 4 × 2 = 8
printMultiply(593, 320); // 593 × 320 = 189760
					

条件分岐

n <= 9 のような「条件」に基いて、処理を実行するか否かを決定する構文

var out = document.getElementById("out");
var hour = 12;
var greeting = "";
if (hour <= 9) { // hour は 12 なので、 12 <= 9 は 偽
	greetnig = "Good Morning!";
}
if (hour <= 19) { // hour は 12 なので、 12 <= 19 は 真
	greeting = "Hello!";
}
if (hour > 19) { // hour は 12 なので、 12 > 19 は 偽
	greeting = "Good Afternoon!"
}
out.innerHTML = greeting; // greetingには"Hello"が入っているので、"Hello"と表示される
					

if (条件) {条件が真の時実行される処理} という構造になっている

…が偽なら、あるいは…

if()の条件が満たされなかった場合に実行される処理を書くelse文

var out = document.getElementById("out");
var hour = 12;
var greeting = "";
if (hour <= 9) { // hour は 12 なので、 12 <= 9 は 偽
    greetnig = "Good Morning!";
} else { // 1つ前の条件が偽だったので、こちらが実行される
    greeting = "Hello!";
}
out.innerHTML = greeting; // greetingには"Hello"が入っているので、"Hello"と表示される
					

else if

if文を連続させる

var out = document.getElementById("out");
var hour = 12;
var greeting = "";
if (hour <= 9) { // hour は 12 なので、 12 <= 9 は 偽
    greetnig = "Good Morning!";
} else if (hour <= 19){ // 1つ前の条件が偽だったので、次に判定される
    // hour は 12 なので、 12 <= 19 は 真となり、greetingには"Hello"が入る
    greeting = "Hello!";
} else if (hour > 19) { // 1つ前の条件が真だったので、ここは判定も実行もされない
    greeting = "Good Afternoon!"
}
out.innerHTML = greeting; // greetingには"Hello"が入っているので、"Hello"と表示される
					

複数の条件を組み合わせる

条件を複数組み合わせたい場合、&&(かつ)、||(または)を使う

var out = document.getElementById("out");
var hour = 12;
var minute = 0;
if (hour === 12 && minute === 0) {
    out.innerHTML = "正午です";
}
					

最終課題：FizzBuzz

• nが3で割り切れる場合は、"Fizz"と表示する
• nが5で割り切れる場合は、"Buzz"と表示する
• nが3と5の両方で割り切れる場合は、"FizzBuzz"と表示する
• いずれにも当てはまらない場合は、nの値を表示する

ヒント：割った余りを調べるには、%(パーセント)を使う。例：1 % 2 は 1、 2 % 2 は 0、3 % 2 は 1、4 % 2 は 0

解答例

プログラミングのコツ

• 繰り返しやることは、コンピュータにやらせる
• 同じ処理を何度も繰り返すなら、その処理に「名前をつけて保存」し、何度も使い回す
• コンピュータにやらせた方が楽なことは、コンピュータにやらせる

さらに学びたい方へ

• ドットインストール - JavaScript入門
• 【宣伝】『スラスラわかるJavaScript』（監修：アシアル株式会社）

ご清聴ありがとうございました。