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

自己紹介

宇都宮 諒
(Utsunomiya Ryo)


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

asial_blog

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

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

教育者, 将軍, 栄養士, 心理学者, 親はプログラムする

―『計算機プログラムの構造と解釈 第二版』序文

sicp
ある物事の進行状態についての順序・組み合わせ・筋などのこと。
Wikipedia 日本語版

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

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

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

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

robot

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

プログラムの作り方

  1. コンピュータにやらせたいことを決める
  2. コンピュータに対する指示を、コンピュータが理解できる形式で書く

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

プログラミング言語

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

JavaScript

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

実際に書いてみよう

http://jsfiddle.net/

hello html


hello html
hello_html

hello javascript


hello html

var out = document.getElementById("out");
out.innerHTML = "hello javascript";
					
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");
					
  1. document(HTML文書全体)に対して、"out"というidの要素を取得する命令を実行させる
  2. 取得した要素を、outという変数に入れる

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

innerHTML


hello html

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";
					
add

文字列の連結

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

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";
br

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

解答例

exam1

問題点:めんどくさい

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の段を表示するプログラムを書きなさい

<出力例>

1nodan

ヒント: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

  1. 変数nを定義し、1から始まって15まで、1ずつ増加するwhileループを書きなさい
  2. whileループの中で、nの値を調べ、以下の条件に基いて表示を行いなさい
    • nが3で割り切れる場合は、"Fizz"と表示する
    • nが5で割り切れる場合は、"Buzz"と表示する
    • nが3と5の両方で割り切れる場合は、"FizzBuzz"と表示する
    • いずれにも当てはまらない場合は、nの値を表示する

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

解答例

プログラミングのコツ

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

さらに学びたい方へ

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