Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

これはドワンゴ Advent Calendar 2018 12/24の記事です。

プログラミング研修教材

ドワンゴを含むカドカワグループでは、エンジニア職以外の社員に簡単なプログラミングを学ぶ機会を提供しています。その教材やカリキュラムの作成と講義をわれわれ技術コミュニケーション室で担当しています。

プログラミング未経験のみなさんにコードを書いて問題を解決する、ということを教えるのはとても有意義だが難しい仕事でした。ソフトウェアエンジニアという仕事を長く続けていると、プログラミングに関する多くのことを自明として片付けてしまい、初学者にわかりやすくかつウソのない説明をするのはなかなか困難です。先日ご恵贈いただいた「かんたんRuby」という本の書評でもその難しさについて触れました。

このようなミッションに取り組む方がいたら、少しでも参考になればと思い公開します。

教材の内容

既卒社員向け研修

既卒社員向けに行った勉強会の資料です。

  • 1_1_homework.md
    • 研修参加者に事前課題として配布したものです。この内容をやっておくことで「文字や記号を全角で打ちこんでしまい発生するエラー」を大幅に減らすことができました。この課題を配布す前の年までは、エラーのたびにTA陣が会場を走っては「ほら が全角ですよ」などと対応に追われたものでした。
  • 1_2_javascript_basic.md
    • 研修教材です。これを見ながら講義と実習を繰り返し、実際に手を動かしながら進めていきます。所要時間は約2時間ですが、長いと感じる人も足りないと感じる人もいたようです。

このあとSQLについても簡単な講義を行いました。

新卒社員向け研修

新卒社員向けに行った座学研修の資料です。この分量で所要時間はおよそ1日半ほどでした。

  • 2_1_javascript_basic_1.md
    • コンソールでの計算と変数の定義、操作を学び、BMIを計算してみます。
  • 2_2_javascript_basic_2.md
    • HTMLとJavaScriptを組み合わせ、ブラウザで動作するBMI計算フォームを作ります。
  • 2_3_javascript_basic_3.md
    • ループと配列について学びます。このあとGoogle Apps ScriptとSpread Sheetを使った演習を行うための布石です。

まとめ

まったく未経験のところから、ほんの少しでも「プログラムに仕事をさせる」という経験をしてもらうために作った教材ですが、未経験の度合いによってさまざまな感想があったようです。

次回からはそれぞれ新たなアプローチで研修をしていくので、機会があればご紹介したいと思います。

事前課題

やること

  • Google Chromeを起動し新しいタブを開く
    • Google Chromeのインストール方法はこちら
  • JavaScriptコンソールを開く
    • Windows : Ctrl + Shift + J
    • Mac : Command + Option + J
  • 以下のコードを入力・実行する

注意事項

  • すべて英数字です(日本語入力はoffにしましょう)。
  • 1行入力するごとにEnterキーを押します。
  • 大文字小文字は区別されます。
  • 「(あなたの名前)」は、実際のあなたの名前に置き換えます。
  • コードの意味は現時点ではわからなくてかまいません。正確に入力できることがポイントです。

入力するコード

function hello(name) {
  console.log('Hello, my name is ' + name + '.')
}

var myName = '(あなたの名前)'

hello(myName)

期待する出力

-> function hello(name) {
    console.log('Hello, my name is ' + name + '.')
}
<- undefined

-> var myName = '塩谷 啓'
<- undefined

-> hello(myName)
  Hello, my name is 塩谷 啓.
<- undefined

Tips

実習には「Visual Studio Code」(以下 VS Code )があると便利です。JavaScript / SQLともにシンタックスハイライト(文法に沿った色分け)をしてくれたり、間違いの指摘をしてくれたりします。ダウンロードリンクから自分の環境にあったものを選択し、インストールしておきましょう。

拡張子をJavaScriptの場合は .js 、SQLの場合は .sql にして保存するとエディタのサポートを受けることができます。

JavaScript / SQLいずれも長くなってくるとコンソールやターミナルに直接入力するのが難しくなってきます。VS Codeに入力したものをcopy&pasteするほうが効率的でしょう。

JavaScriptの基礎

JavaScriptによるプログラミングの基礎部分を学びましょう。

まずはGoogle Chromeを起動し、新しいタブを開きます。

Windowsの人は Ctrl + Shift + J 、Macの人は Option + Command + J を押し、JavaScriptコンソール (以下「コンソール」) を開きましょう。

四則演算と剰余

コンソールに数値や数式を入力すると、計算結果が表示されます。試しに 3 と入力してエンターキーを押してみましょう。

>  3
< 3

次は 2 + 2 を試してみましょう。

>  2 + 2
< 4

プログラミングの世界では、一般的な数学とは演算子の表記が一部異なります。JavaScriptにおける基本的な演算子は以下の通りです。

記号 意味 利用例
+ 加算(たしざん) 2 + 2 // => 4
- 減算(ひきざん) 5 - 3 // => 2
* 乗算(かけざん) 2 * 3 // => 6
/ 除算(わりざん) 4 / 2 // => 2
% 剰余(あまり) 11 % 3 // => 2

例題 : 四則演算

以下の計算をしてみましょう。

  • 2 たす 2
  • 3 かける 5
  • 9 わる 4
  • 19 を 7 でわったあまり
  • 半径 3cm の円の面積 (円周率は 3.14 とする)

演算子の優先順位

JavaScriptにおいても一般的な数学と同じように、演算子には優先順位があります。乗算除算は加算減算より先に行われ、() によって順番を優先させることができます。

1 + 2 * 3(1 + 2) * 3 をコンソールで実行し、想像通りの結果になっているか確認してみましょう。

JavaScriptの数値型は実数

プログラム言語によっては、数値を整数と実数で区別するものがあります。いっぽう、JavaScriptでは数値はすべて実数です。この違いは特に、除算をするときの挙動に差が出てきます。

たとえば 9 / 4 という計算は、JavaScriptでは実数同士の除算なので 2.25 という結果になります。しかし、整数と実数を区別する言語では 9 / 4 は整数どうしの除算と見なされ、小数部分を切り捨てた 2 が結果となります。

文字列

JavaScriptでは、' (シングルクオート) もしくは " (ダブルクオート) で囲むと文字列を作ることができます。 どちらでも違いはないのですが、HTMLと一緒に使う場合などに無用の混乱を避けるため、' を使うほうがよいでしょう。

きちんと囲まれていない場合はエラーが出ます。

>  'こんにちは'
< "こんにちは"
>  'Hello, world!'
< "Hello, world!"
>  さようなら
 Uncaught ReferenceError: さようなら is not defined

' で囲んだ文字列の中で ' を使いたい時は \ (バッククオート / 環境によっては ¥ マーク)を直前に置く必要があります。これを「エスケープ」と呼びます。

>  'I\'m happy.'
< "I'm happy."

文字列は + 記号で連結できます。

> 'こんにちは、' + 'いい天気ですね。'
< "こんにちは、いい天気ですね。"

> '今日は' + 4 + '月' + 17 + '日です'
< "今日はは4月17日です"

例題 : 文字列

以下の文字列を入力してみましょう。

  • おはようございます
  • It's time to coding!
  • 私の所属は ** です
    • ** の部分には自分が所属する会社を入力し、 + 記号を使って連結しましょう。
  • 私は ** 歳です
    • ** の部分には自分の年齢を数値で入力し、 + 記号を使って連結しましょう。

console.log()

console.log() という命令を使うと、コンソールに任意の値を出力することができます。

> console.log(3.14)
  3.14
< undefined
> console.log('こんにちは')
  こんにちは
< undefined

console.log() を実行すると、次の行に () 内の値が出力されているのがわかります。 よく見ると、数字の場合は青字で、文字列の場合は黒字で表示されています。 出力された値の次の行に表示されている <・ undefined は、console.log(...) 自体を評価した結果の表示です。 数値や文字列の例では、値を評価した結果として数値や文字列そのものが表示されていましたが、console.log(...) というコードを自体を評価した結果は undefined という値なのだということがわかります。 undefined とは、値が未定義であるということを表す値です。

例題 : console.log()

以下の文字列をコンソールに表示してみましょう。

  • 私の身長は h cm、体重は w kg です。
    • h には身長、 w には体重を入力しましょう。
    • 架空の値でかまいません。

変数の定義と代入

var というキーワードを使うと「変数 (へんすう)」を定義することができます。

コンソールに h と打ち込んでみましょう。

h
❌Uncaught ReferenceError :h is not defined

h は定義されていない」というエラーが表示されました。では h を定義してみましょう。

> var h = 177
< undefined

h という変数を定義し、値として 177 を代入しました。もう一度 h を打ち込んでみましょう。

> h
< 177

h を評価し、値である 177 が表示されました。

例題 : 変数の操作

以下の操作をしてみましょう。

  • h に別の値を代入し、評価してみましょう。
  • w という変数を定義し、 60 を代入してみましょう。
  • h を身長(m)、 w を体重(kg)として、BMI値を計算し、 bmi という変数に代入してみましょう。
    • BMI とは身長と体重から算出される肥満度を表す指数で、体重(kg) / 身長(m)の二乗 で計算できます。
  • コンソールに「身長160cm、体重60kgの場合、BMIは23.4375です。」と表示してみましょう。 それぞれの数値は先ほど代入した変数を使い、 + 演算子と console.log() 命令を使います。

条件分岐と真偽値

ある条件を判定し、それによって異なる処理を行うのは、プログラミングの重要な要素のひとつです。そのために必要な「条件分岐」と「真偽値」について学びます。

if, else, else if

BMIは18.5未満が「低体重」、25以上が「肥満」、その間が「普通体重」と定義されています。これをプログラムで表現してみましょう。

var bmi = 75 / (177 / 100 * 177 / 100)

if (bmi < 18.5) {
  console.log('あなたは低体重です')
} else if (bmi >= 25) {
  console.log('あなたは肥満です')
} else {
  console.log('あなたは普通体重です')
}

このような処理を「条件分岐」と呼び、JavaScriptでは if 文を使って表現します。

if 文の直後にある () の中が条件を満たす(真 / true)ならばそれに続く処理が行われ、条件を満たさない(偽 / false)ならば次の処理に移ります。 else if は続けて条件判定を行い、 else は条件判定を行わずに続く処理を行います。

上記のサンプルをコンソールで実行し、 bmi の値を変化させて想定したメッセージが出力されるかを試してみましょう。

真偽値と論理演算

条件を満たすならば真(true)、満たさないならば偽(false)になるような値を真偽値(boolean / ブーリアン)と呼びます。必ず true / false のいずれかになり、他の値は存在しません。

先ほどのサンプルですと、 bmi < 18.5 を評価した結果が真偽値となり、 bmi が18.5未満ならtrue、そうでない(18.5以上)ならfalseになります。

真偽値は組み合わせて使うこともできます。たとえば、先ほどのサンプルで「普通体重」に注目すると、その条件は「BMIが18.5以上かつ25未満」である、と言えます。これをJavaScriptで表現してみましょう。

if (bmi >= 18.5 && bmi < 25) {
  console.log('あなたは普通体重です')
}

また、「普通体重ではない」という条件は、「BMIが18.5未満もしくは25以上である」と言えます。これをJavaScriptで表現すると以下のようなコードになります。

if (bmi < 18.5 || bmi >= 25) {
  console.log('あなたは普通体重ではありません')
}

また、真偽値には ! をつけるとtrue / falseが反転します。「BMIが18.5未満でないならば」という条件をJavaScriptで書いてみます。

if (!(bmi < 18.5)) {
  console.log('あなたは低体重ではありません')
}

このように、真偽値どうしを組み合わせたり反転したりすることを「論理演算」と呼びます。

JavaScriptで論理演算に使える演算子は以下の通りです。

記号 意味 解説
&& 論理積(かつ / AND) 左右がいずれも真なら真
|| 論理和(または / OR) 左右いずれかが真なら真
! 論理否定 真の値につけると偽、偽の値につけると真

比較演算子

値の大小や等しいかどうかを比較し、その結果を真偽値として返す演算子を「比較演算子」といいます。条件を満たせば true 、満たさなければ false と評価されます。

JavaScriptで使うことができる比較演算子は以下の通りです。

記号 意味 解説
> 大なり 左辺が右辺より大きければ真
>= 大なりイコール 左辺が右辺より大きいまたは等しければ真
< 小なり 左辺が右辺より小さければ真
<= 小なりイコール 左辺が右辺より小さいまたは等しければ真
=== 等しい 左辺と右辺が等しければ真
!== 等しくない 左辺と右辺が異なれば真

=====

JavaScriptでは、 ===!== を使うと厳密な比較をします。サンプルを見てみましょう。

> 1 === '1'
< false
> 1 == '1'
< true

== != という比較演算子も用意されており、サンプルのように文字列と数値をよしなに比較して真偽値を返してくれます。しかし、意図せぬ「よしなな比較」は思わぬバグを作り出すことになりますので、たいていの場合 === !== で比較することを推奨します。

ループと配列

似たような処理を繰り返し行うのは、コンピューターが得意とする仕事の一つです。人間と違って同じことを繰り返しても文句は言いませんし、間違えることもありません(正しく命令できていれば)。

for 文による繰り返し処理

JavaScriptで繰り返し処理をするためにはいくつか方法がありますが、まずはいちばん基本的な for 文を使った方法を学びましょう。

九九の3の段を console.log() で出力するプログラムを書いてみます。

for (var i = 1 ; i <= 9 ; i ++) {
  console.log('3 * ' + i + ' = ' + i * 3)
}

for の直後のカッコの中が ; (セミコロン)で区切られて3つに分かれていることに注目してください。

  • var i = 1

ここは「初期化」です。繰り返し処理の1回目の前に、1度だけ実行されます。サンプルコードでは i という変数を定義し、初期値として 1 を代入しています。

この場合の i のような、ループの回数を数えるために使う変数を「ループカウンタ」と呼ぶこともあります。

  • i <= 9

ここは「継続条件」です。繰り返し処理を行う直前に条件をチェックし、偽(false)になるとループは終了します。サンプルコードでは i の値が 9 以下のあいだは処理を行い、 9 より大きくなると終了します。

  • i ++

ここは「増減処理」です。繰り返し処理を行ったあと毎回実行され、通常はループカウンタの増減を行います。サンプルコードの i ++ は、「 i の値を1増やす(インクリメント)」という処理を行っています。

JavaScriptをはじめいくつかの言語では、変数の値を1増やす「インクリメント」を ++ という演算子で、変数の値を1減らす「デクリメント」を -- という演算子で記述することができます。

例題 : 繰り返し処理

九九の7の段を逆順に( 7 x 9 ... 7 x 1 の順で) console.log() を使ってコンソールに出力してみましょう。

例題 : 条件分岐

FizzBuzzという処理があります。ある正の整数について、以下の条件で出力します。

  • 3で割り切れる場合 : Fizz
  • 5で割り切れる場合 : Buzz
  • 3でも5でも割り切れる場合 : FizzBuzz
  • それ以外の場合 : その数

1100 までのFizzBuzzを出力するプログラムを書いてみましょう。

配列

配列とは、数値や文字列などのデータがリスト状に格納されたものです。 [ ] で囲み、 , で区切って表現します。

var friends = ['serval', 'racoon', 'fennec']

配列の各要素にアクセスするには、 [] に要素の番号(インデックス / 添え字)を与えます。先頭の要素は 0 であることに気をつけましょう。

>  friends[1]
< "racoon"

例題 : 配列

  • friends の中から serval をコンソールに表示してみましょう
  • for 文を使って friends をすべてコンソールに表示してみましょう

関数とオブジェクト、メソッドとプロパティ

プログラムを効率的に書いたり読みやすいものにしたりするためには「構造化」が欠かせません。JavaScriptにはそのために「関数」や「オブジェクト」といった仕組みが用意されています。

ここからはそうした仕組みの基礎について学んでいきましょう。

関数の呼び出し

ここまで出てきたプログラムのうち、 console.log()Math.floor() のような、何か値を受け取って処理し、何か値を返すものを「関数」と呼びます。ただし、値を受け取らないこともありますし、値を返さないこともあります。

JavaSriptでは function というキーワードを使うと関数を定義することができます。以下のコードをコンソールに入力してみましょう。

function hello() {
  console.log('Hello!')
}

これだけではなにも起こりません( コンソールには undefined と表示されるはずです)。しかし、このコンソールでは hello() という関数が定義されています。

それではこの関数を呼び出してみましょう。

hello()

コンソールに Hello! という文字が表示されたでしょうか。関数は何度でも呼び出すことができます。

引数と返り値

関数に渡す値を「引数(ひきすう)」、関数から戻ってくる値を「返り値(かえりち)」もしくは「戻り値(もどりち)」と呼びます。

console.log() を使う場合、コンソールに表示させたい文字を () の中に記入します。これが「引数」です。引数は , で区切って複数渡すこともできます。

また、 Math.floor() の引数に小数を渡すと、小数点以下を切り捨てた数値が返ってきます。これが「返り値」です。

今まで学んできた関数の引数と処理、返り値をまとめてみましょう。

関数 引数 処理 返り値
console.log() 文字列 引数の文字列をコンソールに表示する なし
Math.floor() 数値 引数の数値の小数点以下を切り捨てる 数値
hello() なし コンソールに Hello! という文字列を表示する なし

コンソールで関数を実行した場合、その関数の返り値が表示されます。 console.log()hello() を実行した時に

<・ undfined

と表示されていたのは、返り値が定義されていないからなのです。

関数定義

JavaScriptの処理系で用意されている関数以外にも、独自の処理をする関数を function キーワードを使って自分で作る(定義する)ことができます。

自分で定義した関数では return キーワードを使って呼び出し側に返り値を渡すことができます(渡さないと undefined になります)。

身長(cm)と体重(kg)を引数に取り、BMIを戻る関数を書いてみましょう。

function calcBmi(height, weight) {
  var bmi = weight / (height / 100 * height / 100)
  return bmi
}

calcBmi() という関数を定義してみました。この関数は、利用者が引数として身長(cm)と体重(kg)を渡すと、BMIを計算して戻してくれます。

コンソールから呼び出してみましょう。

calcBmi(177, 75)

例題 : 関数

いままで書いてきたプログラムを関数にしてみましょう。

  • BMI判定
    • 名前 : bmiStatus
    • 引数 : BMI(実数)
    • 返り値 : 文字列
    • 仕様
      • BMIの値によって以下の文字列を返す
        • BMIが18.5未満なら '低体重'
        • BMIが18.5以上25未満なら '普通体重'
        • BMIが25以上なら '肥満'
  • FizzBuzz
    • 名前 : fizzBuzz
    • 引数 : 数値
    • 返り値 : 文字列
    • 仕様
      • 入力された数値によって以下の文字列を返す
        • 3で割り切れる場合 : Fizz
        • 5で割り切れる場合 : Buzz
        • 3でも5でも割り切れる場合 : FizzBuzz
        • それ以外の場合 : その数

例題 : 関数呼び出し

さきほどの fizzBuzz 関数を使って、 1〜100までのFizzBuzzをコンソールに出力してみましょう。

オブジェクトとプロパティ、メソッド

JavaScriptによるプログラミングをする上で「オブジェクト」という概念を避けて通ることはできません。ここでは、この先プログラミングを学んでいく上で最小限の知識を学びましょう。

JavaScriptの「型」

JavaScriptの値には、「型」というなにが格納されているかの区別があります。このテキストでは「文字列(string)」「数字(number)」などを紹介してきましたが、それ以外にも「オブジェクト」が登場しています。

プリミティブ型とオブジェクト

JavaScriptの型には「プリミティブ型(基本型)」と「オブジェクト」の2種類が存在します。 string number などの数種類は「プリミティブ型」ですが、それ以外のほとんどの型はオブジェクトに分類されます。

typeof 演算子を使うと、値がどのタイプなのかを知ることができます。

>  typeof 1
< "number"
>  typeof console
< "object"

オブジェクトとプロパティ

オブジェクトとはプロパティの集合です。プロパティとは、名前(key)と値(value)の組み合わせです。プロパティにアクセスするときは、オブジェクトと . で繋げてプロパティの名前を記述します。

先ほど作った配列もオブジェクトです。型を確認し、 length というプロパティを参照してみましょう。

var friends = ['serval', 'racoon', 'fennec']
console.log(typeof friends)
console.log(friends.length)

オブジェクトとメソッド呼び出し

関数は function (関数オブジェクト)という型に分類され、名前の通りオブジェクトに分類されます。関数を定義し、関数オブジェクトを変数に代入してみましょう。

var testFunction = function() { console.log(1) }
console.log(typeof testFunction)

testFunction という変数には関数(function)が代入されました。値として評価する / 関数として呼び出す、を試してみましょう。

testFunction
testFunction()

違いがわかりましたか?変数に格納された関数オブジェクト(function)は、 () をつけると関数として呼び出すことができます。

オブジェクトのプロパティも同様です。関数オブジェクトが格納されたプロパティは、 () をつけると関数として呼び出すことができます。関数が格納されたプロパティを「メソッド」と呼びます。

先ほど変数 friends は配列というオブジェクトであることを説明しました。配列には末尾に要素を追加する push() というメソッドがあります。これを呼び出してみましょう。

friends.push('backpack')
console.log(friends)
console.log(friends.length)

末尾に backpack という文字列が追加され、長さが 4 に増えたのが確認できます。

オブジェクトの利用

ここまでに出てきた Math.floor()Math オブジェクトの floor メソッドを呼び出すことだ、ということが理解できたでしょうか。 console.log() も同様に、 console オブジェクトの log メソッドを呼び出しています。

オブジェクトは自分で作ることもできますし、JavaScriptの処理系やブラウザが用意しているものを使うことも多々あります。オブジェクトから値を取り出すためにプロパティを参照したり、オブジェクトを操作するためにメソッドを呼び出すことは頻繁に発生しますから、使い方を覚えておきましょう。

解答例

例題 : 四則演算

  • 2 + 2
  • 3 * 5
  • 9 / 4
  • 19 % 7
  • 3 * 3 * 3.14

例題 : 文字列

  • 'おはようございます'
  • 'It\'s time to coding!'
  • '私の所属は' + '株式会社ドワンゴ' + 'です。'
  • '私は' + 44 + '歳です。'

例題 : console.log()

  • console.log('私の身長は' + 177 + 'cm、体重は' + 75 + 'kgです。')

例題 : 変数の操作

  • var h = 177
  • h = 160
    • h
  • var w = 60
  • var bmi = w / (h / 100 * h / 100)
  • console.log('身長' + h + 'cm、体重' + w + 'kgの場合、BMIは' + bmi + 'です。')

例題 : 繰り返し処理

for (var i = 9 ; i >= 1 ; i --) {
  console.log('7 * ' + i + ' = ' + i * 7)
}

例題 : 条件分岐

for (var i = 1 ; i <= 100 ; i ++) {
  if (i % 3 === 0 && i % 5 === 0) {
    console.log('FizzBuzz')
  } else if (i % 3 === 0) {
    console.log('Fizz')
  } else if (i % 5 === 0) {
    console.log('Buzz')
  } else {
    console.log(i)
  }
}

例題 : 配列

// `serval` を表示
console.log(friends[0])
// すべての `frineds` を表示
for (var i = 0 ; i < 3 ; i ++) {
  console.log(friends[i])
}

例題 : 関数

function bmiStatus(bmi) {
  if (bmi < 18.5) {
    return '低体重'
  } else if (bmi >= 25) {
    return '肥満'
  } else {
    return '普通体重'
  }
}
function fizzBuzz(num) {
  if (num % 3 === 0 && num % 5 === 0) {
    return 'FizzBuzz'
  } else if (num % 3 === 0) {
    return 'Fizz'
  } else if (num % 5 === 0) {
    return 'Buzz'
  } else {
    return num
  }
}

例題 : 関数呼び出し

for (var i = 1 ; i <= 100 ; i ++) {
  console.log(fizzBuzz(i))
}

JavaScriptの基礎 1

JavaScriptによるプログラミング

この時間はGoogle Chromeのコンソールを使い、JavaScriptによるプログラミングを経験します。基本的な演算と文字列処理を通じて、BMI計算機を作ります。

コンソールを開く

Google Chromeを起動し、新しいタブを開きます。

Windowsの人は Ctrl + Shift + J 、Macの人は Option + Command + J を押し、JavaScriptコンソール (以下「コンソール」) を開きましょう。

簡単な計算をしてみる

コンソールに数値や数式を入力すると、計算結果が表示されます。試しに 3 と入力してエンターキーを押してみましょう。

>  3
< 3

次は 2 + 2 を試してみましょう。

>  2 + 2
< 4

以下の計算をしてみましょう

  • 2 たす 2
  • 3 かける 5
  • 9 わる 4
  • 19 を 7 でわったあまり
  • 半径 3cm の円の面積 (円周率は 3.14 とする)

文字列を入力してみる

JavaScriptでは、' (シングルクオート) もしくは " (ダブルクオート) 文字列を扱うことができます。 どちらでも違いはないのですが、HTMLと一緒に使う場合などに無用の混乱を避けるため、' を使うほうがよいでしょう。

きちんと囲まれていない場合はエラーが出ます。

>  'こんにちは'
< "こんにちは"
>  'Hello, world!'
< "Hello, world!"
>  さようなら
 Uncaught ReferenceError: さようなら is not defined

' で囲んだ文字列の中で ' を使いたい時は \ (バッククオート)を直前に置く必要があります。これを「エスケープ」と呼びます。

>  'I\'m happy.'
< "I'm happy."

文字列は + 記号で連結できます。

> 'こんにちは、' + 'いい天気ですね。'
< "こんにちは、いい天気ですね。"

> '今日は' + 4 + '月' + 17 + '日です'
< "今日はは4月17日です"

以下の文字列を入力してみましょう

  • おはようございます
  • It's time to coding!
  • 私の所属は ** です
    • ** の部分には自分が入社した会社を入力し、 + 記号を使って連結しましょう。
  • 私は ** 歳です
    • ** の部分には自分の年齢を数値で入力し、 + 記号を使って連結しましょう。

文字列を表示してみる

console.log() という命令を使うと、コンソールに任意の値を出力することができます。

> console.log(3.14)
  3.14
< undefined
> console.log('こんにちは')
  こんにちは
< undefined

console.log() を実行すると、次の行に () 内の値が出力されているのがわかります。 よく見ると、数字の場合は青字で、文字列の場合は黒字で表示されています。 出力された値の次の行に表示されている <・ undefined は、console.log(...) 自体を入力とみなして評価した結果の表示です。 数値や文字列の例では、値を評価した結果として数値や文字列そのものが表示されていましたが、console.log(...) というコードを自体を評価した結果は undefined という値なのだということがわかります。 undefined とは、値が未定であるということを表す値です。

以下の文字列をコンソールに表示してみましょう

  • 私の身長は h cm、体重は w kg です。
    • h には身長、 w には体重を入力しましょう。
    • 架空の値でかまいません。

変数の定義と操作

var というキーワードを使うと「変数 (へんすう)」を定義することができます。

コンソールに h と打ち込んでみましょう。

h
❌Uncaught ReferenceError :p is not defined

h は定義されていない」というエラーが表示されました。では h を定義してみましょう。

> var h = 177
< undefined

h という変数を定義し、値として 177 を代入しました。もう一度 h を打ち込んでみましょう。

> h
< 177

h を評価し、値である 177 が表示されました。

以下の操作をしてみましょう

  • h に別の値を代入し、評価してみましょう。
  • w という変数を定義し、 60 を代入してみましょう。
  • h を身長(m)、 w を体重(kg)として、BMI値を計算し、 bmi という変数に代入してみましょう。
    • BMI とは身長と体重から算出される肥満度を表す指数で、体重(kg) / 身長(m)の二乗 で計算できます。
  • コンソールに「身長160cm、体重60kgの場合、BMIは23.4375です。」と表示してみましょう。 それぞれの数値は先ほど代入した変数を使い、 + 演算子と console.log() 命令を使います。

解答例

簡単な計算をしてみる

  • 2 + 2
  • 3 * 5
  • 9 / 4
  • 19 % 7
  • 3 * 3 * 3.14

文字列を入力してみる

  • 'おはようございます'
  • 'It\'s time to coding!'
  • '私の所属は' + '株式会社EXAMPLE' + 'です。'
  • '私は' + 44 + '歳です。'

文字列を表示してみる

  • console.log('私の身長は' + 177 + 'cm、体重は' + 75 + 'kgです。')

変数の定義と操作

  • var h = 177
  • h = 160
    • h
  • var w = 60
  • var bmi = w / (h / 100 * h / 100)
  • console.log('身長' + h + 'cm、体重' + w + 'kgの場合、BMIは' + bmi + 'です。')

JavaScriptの基礎 2

HTMLとJavaScript

コンソールでJavaScriptのプログラミングを経験してきましたが、実際のWebページではどのように動作するのでしょうか。HTMLにJavaScriptを組み込んで動作させてみましょう。

BMI計算ページを作る

今回もBMIの計算を題材にしてみましょう。テキストボックスに身長と体重を入力するとBMI値を計算してくれる、という機能を持ったWebページを開発します。

HTMLの作成

以下の要素を含む、最低限の内容が入ったHTMLファイルを作成してみましょう。

  • <html lang="ja">
  • head タグ
    • meta タグ
      • プロパティは charset="UTF-8"
    • title タグ
      • 内容は BMI計算機
  • body タグ
    • 中身はまだ空っぽでかまいません

解答例

フォームの作成

body タグの中に、以下のタグを記入してみましょう。

  • 見出し
    • h1 タグ
      • 内容は BMI計算機
  • 値を入力するエリア
    • 各タグは p タグで囲みましょう
    • input タグ
      • プロパティは以下を設定しましょう
        • type="text"
        • name="height"
        • id="height"
    • input タグ
      • プロパティは以下を設定しましょう
        • type="text"
        • name="weight"
        • id="weight"
  • 計算を実行するボタン
    • button タグ
      • プロパティは以下を設定しましょう
        • name="calc"
        • id="calc"
      • 内容は「計算する」

解答例

JavaScriptの記述

身長と体重をフォームに入力し「計算する」ボタンを押すとBMIを計算してくれると、Webアプリケーションっぽくなります。まずは最低限のJavaScriptコードをHTML内に記述してみましょう。

  • head タグ内に script タグを追加する
    • script タグ内にはJavaScriptのコードを記述することができる
    • calcBmi という関数を書いてみよう
      • 引数なし
      • 中身は仮の実装として alert("BMIを計算します") を記述する
  • ボタンにイベントハンドラを設定する
    • さきほどの button タグにイベントハンドラとなるプロパティを追加する
      • onclick="calcBmi()"

「計算する」ボタンを押すとブラウザがダイアログボックスを出し、メッセージが表示されるのを確認しましょう。

解答例

フォームに入力された値の取得

BMIを計算するためには、フォームの値をJavaScript側で取得する必要があります。入力された身長と体重を取得し、ダイアログに表示してみましょう。

  • heightweight という変数に、それぞれフォームの値を取得する
    • フォームそのものは document.getElementByIdid を渡すことで取得できる
      • id はそれぞれのタグに指定してあります
    • フォームの値を取得するには取得したオブジェクトの value を参照する
  • 取得した値を alert で表示する

解答例

BMI値の計算

取得した変数からBMIを計算し、ダイアログに表示してみましょう。BMIは 体重(kg) / 身長(m)の二乗 で算出できます。

  • bmi という変数に身長と体重から算出した値を代入する
  • ダイアログボックスに表示する

解答例

BMI値の表示

ダイアログボックスは表示すると他の操作ができなくなってしまいます。もう一つ別のテキストボックスを作り、そこにBMI値を表示してみましょう。

  • button タグの下に「BMI」を表示するためのタグを追加する
    • input タグ
      • p タグで囲む
      • プロパティは以下を設定しましょう
        • type="text"
        • name="bmi"
        • id="bmi"
        • size="60"
        • readonly
  • 追加した input タグに値をセットするよう caclBmi() を修正
    • getElementById を使って追加した input タグを取得し resultBox という変数に代入
    • resultBoxvalue プロパティに文章をセットする
      • さきほどダイアログボックスに表示していたものをそのまま使ってよい

解答例

改良してみよう

ここまでの内容で時間があまったら、計算機を改良してみましょう。

  • 身長・体重に値が入力されていないと警告が出るようにしてみましょう
  • BMI値を小数点以下1桁で切り捨ててみましょう
    • Math オブジェクトの floor() を使います
  • 体重の二乗 をもっとスマートに書いてみましょう
    • Math オブジェクトの pow() を使います
  • CSSを設定し見た目を綺麗にしてみましょう

JavaScriptの基礎 3

ループ、配列、条件分岐

ここからは、プログラムに仕事をさせる上でもっとも大事な3つの要素について学んでいきます。

ループ

JavaScriptでは for 文を使うことでループ(繰り返し)処理を行うことができます。

例題として、九九の「3の段」をコンソールに出力するプログラムを書いてみましょう。

for (var i = 1 ; i <= 9 ; i ++) {
  console.log(i * 3)
}

for 文のカッコの中には、先頭から「初期化処理」「継続条件」「増減処理」を ; で区切って記述します。例題の場合は…

  • 初期化処理
    • i という変数を定義し 1 を代入する
  • 継続条件
    • i9 より小さいか等しい間ループが継続する
  • 増減処理
    • i1 ずつ増やす

つまりこのループは、 i1 から始まり、 1 ずつ増加し、 9 まで実行され、 10 になると( 9 より大きくなると)終了します。

問題

  • 九九の「7の段」をコンソールに出力するプログラムを書いてみましょう

配列

配列とは数値や文字列などのデータをリスト状に格納されたものです。 [ ] で囲み、 , で区切って表現します。

var friends = ['serval', 'racoon', 'fennec']

配列の各要素にアクセスするには、 [] に要素の番号(インデックス)を与えます。先頭の要素は 0 であることに気をつけましょう。

>  friends[1]
< "racoon"

問題

  • friends の中から serval をコンソールに表示してみましょう
  • for 文を使って friends をすべてコンソールに表示してみましょう

多重ループと多重配列

ループも配列も入れ子にすることができます。ループの中でループ処理をすることができますし、配列の中に配列を入れることも可能です。

二重ループを使い、九九をすべて格納した配列(2次元配列)を作ってみましょう。

var kuku = []
for (var i = 0 ; i < 9 ; i ++) {
  kuku[i] = []
  for (var j = 0 ; j < 9 ; j ++) {
    kuku[i][j] = (i + 1) * (j + 1)
  }
}

配列のインデックスは 0 から始まりますが、九九は 1 から始まるため ij+1 した数同士をかけ算していることに注意しましょう。

問題

  • 3の段を格納した配列にはどのようにアクセスすればよいでしょうか
  • 7の段の数字を kuku から取り出し、すべて順番にコンソールに表示してみましょう
  • kuku からすべての値を取り出し、九九の表をコンソールに表示してみましょう

条件分岐

ある条件を満たしているかいないかで違う処理を行うことを「条件分岐」と呼びます。JavaScriptでは if 文を使います。

先ほどのループと配列を使った例題を書いてみましょう。

for (var i = 0 ; i < 3 ; i ++) {
  if (friends[i] === 'racoon') {
    // if文の直後のカッコ(条件式)が真ならこの処理
    console.log('Stop! fennec, please stop it!')
  } else {
    // そうでなければこの処理
    console.log('Hello, I\'m ' + friends[i] + '!')
  }
}

このコードは friends[i]racoon と等しいかどうかをチェックし、等しいならば前半の { } の中の処理を、等しくないならば else 以降の { } の中の処理を実行します。

問題

  • kuku からすべての値を取り出し、九九の表をコンソールに表示してみましょう
    • ただし数字は2桁で桁揃えし、すべての段が揃った表にすること

解答例

ループ

for (var i = 1 ; i <= 9 ; i ++) {
  console.log(i * 7)
}

配列

// `serval` を表示
console.log(friends[0])
// すべての `frineds` を表示
for (var i = 0 ; i < 3 ; i ++) {
  console.log(friends[i])
}

多重ループと多重配列

// 3の段にアクセス
kuku[2]
// 7の段を表示
for (var j = 0 ; j < 9 ; j ++) {
  console.log(kuku[6][j])
}
// 九九の表を表示
for (var i = 0 ; i < 9 ; i ++) {
  var result = i + 1 + 'の段'
  for (var j = 0 ; j < 9 ; j ++) {
    result += ' ' + kuku[i][j]
  }
  console.log(result)
}

条件分岐

for (var i = 0 ; i < 9 ; i ++) {
  var result = i + 1 + 'の段'
  for (var j = 0 ; j < 9 ; j ++) {
    var num = kuku[i][j]
    if (num < 10) {
      result += '  ' + num
    } else {
      result += ' '  + num
    }
  }
  console.log(result)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment