新入生向けプログラミングハンズオン

目的

本記事は SAMIT Online! 21.04 で行われた発表「新入生向けプログラミングハンズオン 準備」,「新入生向けプログラミングハンズオン」の資料です.

本記事のターゲットは,プログラムを書いたことはないがプログラミングに興味を持っている新入生です. 本記事の目的はそのような新入生がプログラミングを勉強するモチベーションを維持できるようになることです. 本記事は,「自分の手でプログラムを書き,それが動作することを実感する」という体験が勉強のためのモチベーションの維持に繋がるという考えに基づき,新入生にそのような体験してもらうためのハンズオンの資料を提供します.

本記事のハンズオンでは,

  • 新入生がプログラミングの楽しさを知る前に躓くことがないようにすること,
  • プログラミングを勉強を始めるきっかけになる楽しい体験となること

を意識し,以下の4つの条件を満たすようなハンズオンを用意しました.

  • 環境構築の手間をできるだけかけないこと
  • 作成するプログラムの規模が大き過ぎないこと
  • 作成するプログラムが対話的に動作すること
  • 作成するプログラムがグラフィカルに動作すること

このハンズオンでは,ブラウザ上でプログラムを書いて実行できるサービスであるCodePen( https://codepen.io )を利用し,最終的に,ボタンを押すたびにサイコロが振られ,出た目の画像が表示されるプログラムを作成します.

本記事の後半では,本ハンズオンに挑戦してみた後でプログラミングの勉強を始めてみようと思った新入生のために,おすすめのプログラミング勉強法も示しています.

本記事の最後では,YouTubeで開催されたSAMIT Online! 21.04の様子を示しています.

ハンズオンの準備

ブラウザで https://codepen.io/pen/ を開くとCodePen上で自分のプログラムを作成するページが表示されます.

FireFox上でCodePenのページが表示される.
ブラウザでhttps://codepen.io/pen/にアクセスした様子(HTML編集エリア(上段左部),CSS編集エリア(上段中部),JS編集エリア(上段右部),実行結果エリア(下段))

これで本ハンズオンの準備は完了ですが,作成したプログラムを保存する場合にはCodePenのアカウント登録が必要となります. 必要に応じてアカウント登録を行ってください.

ハンズオン

以下に本ハンズオンで取り組んでもらいたい演習を示します. 各演習はそれぞれ以下のように構成されています.

  1. プログラムと実行結果
  2. 解説
  3. 改造の例

各演習のプログラムは,左側のHTMLまたはHTMLとJSの部分に示されています. 各演習の実行結果は,右側のResultの部分に示されています.

各演習は以下のように進めます.

  1. HTMLの部分に示された内容を前節で準備したCodePenのHTML編集エリアに入力し,JSの部分に示された内容を前節で準備したCodePenのJS編集エリアに入力する.
  2. 実行結果の部分に示された内容と同様の内容が前節で準備したCodePenのResultエリアに表示されることを確認する.
  3. 解説を読んでみる(わからない部分は,読み飛ばしても良いです.).
  4. 改造の例を参考にしつつ,自分なりにプログラムを改造してみる.

演習:HTMLでテキストを表示する

プログラムと実行結果

See the Pen bGgmNzP by Jumpaku (@jumpaku) on CodePen.

解説

HTMLとはWebページなどの画面構成を定義する言語です. HTMLは「要素」(<p>こんにちは</p>など)を組み合わせて記述します. 要素とは「タグ」(<p></p>など)によって挟まれた文字列です. <p></p>で挟まれたp要素は一つの段落を表します. HTMLに記述された内容がブラウザに読み込まれると,ブラウザは読み込んだHTML解釈し,解釈した内容をディスプレイに表示します.

上のプログラムのHTMLではタグ<p>とタグ</p>によって「こんにちは」というテキストを挟んだ<p>こんにちは</p>という要素が記述されています. ブラウザはこのHTMLを解釈し,「こんにちは」というテキストを表示します.

改造の例

「こんにちは」とは別のテキストを表示するように改造してみる.

演習:HTMLでボタンを表示する

プログラムと実行結果

See the Pen display-button by Jumpaku (@jumpaku) on CodePen.

解説

上のプログラムのHTMLでは<p>ボタンの表示</p>というp要素と<button>押しても何も起きない</button>というbutton要素が記述されています. button要素は一つのボタンを表します. ブラウザはこのHTMLを解釈し,「ボタンの表示」というテキストと「押しても何も起きない」と書かれたボタンを表示します.

改造の例
  • ボタンを増やしてみる.
  • HTMLに<strike>取り消し線</strike>を追加してみる.

演習:JavaScriptからHTML上のテキストを設定する

プログラムと実行結果

See the Pen XWpxJLR by Jumpaku (@jumpaku) on CodePen.

解説

JavaScriptとは様々な処理を実行することができる言語です. JavaScriptに記述された内容がブラウザに読み込まれると,ブラウザは読み込んだJavaScriptを解釈し,処理を実行します. JavaScriptを用いることでHTMLに記述された内容を表示することができます.

まず,上のプログラムのHTMLには要素<p id="text"></p>が記述されています. この要素は表示するべき文字列を持っていません. また,この要素はタグにはid="text"が記述されています. このようにタグに付け加えられたものを「属性」と言います. 「属性」は要素に様々な情報を付け加えます. 例えば,id=で始まるid属性は,ある要素に別の要素と区別するための名前を付け加えます.

JavaScriptは上のプログラムのJSの部分に示されています.

let e = document.querySelector("#text");

の部分はeという名前の変数を用意し,そこにHTML上から探し出してきた要素を格納しています. 変数とは値を格納することのできる名前を持った箱のようなものです. 変数を用意するときは,let 変数名 = 変数に格納する値;と記述します. このとき,変数名には大文字または小文字のアルファベットと数字を使って好きな名前をつけることができます. documentはHTMLそのものを表すものです. querySelectordocumentが持っている関数で,指定された要素を探す処理を実行します. 関数とはまとまった処理に名前を付けて繰り返し実行できるようにしたものです. 関数を実行するためには関数の名前の後ろに()を付け,その間に処理に必要なデータを記述します. document.querySelector("#要素のid属性")と記述することで,指定したid属性を持つ要素を探し出すことができます.

e.textContent = "こんにちは";

の部分は変数eが持つtextContentという変数に「こんにちは」という文字列を格納しています. textContentは要素が持つ文字列を表す変数です. 文字列はプログラムの記述と区別するために"で囲む必要があります. これにより,HTMLのp要素は文字列を持たないにも関わらず,実行結果で「こんにちは」と表示させることができるようになります.

改造の例

HTMLはそのままでJavaScriptだけを編集することにより,「こんばんは」と表示するように変更してみる.

演習:ボタンを押された時の処理を実装する

プログラムと実行結果

See the Pen add-process-onclick by Jumpaku (@jumpaku) on CodePen.

解説

このプログラムは,ボタンが押されるたびに,ボタンが押された回数をカウントし,回数を表示します.

HTMLのbutton要素にはonclick=で始まるonclick属性が付け加えられています. onclick属性は押された時に実行するJavaScriptのプログラムを指定することができます. このプログラムではボタンのonclick属性にupdate()と記述されているため,ボタンを押すとupdateという関数が実行されることになります.

update関数はJavaScriptの方で次のように定義されています.

function update() {
  count = count + 1;
  counter.textContent = count;
}

関数の定義は

function 関数の名前(処理に必要なデータ1, 処理に必要なデータ2, ...){
  実行する処理1;
  実行する処理2;
  ・
  ・
  ・
}

と記述します. このとき,関数の名前は変数名と同様につけることができます. このプログラムのupdate関数は以下の処理を実行するように定義されています.

  1. 変数countcount1を加えた数を格納する.
  2. 変数counterが持つ変数textContentに変数countの値を格納する.

以上のようにJavaScriptで定義した関数の実行をbutton要素のonclick属性に記述することで,ボタンを押すたびに指定した処理を実行することができます.

改造の例

2個のボタンを用意し,それぞれのボタンが押された回数の合計を表示するように改造してみる.

演習:乱数を使用する

プログラムと実行結果

See the Pen random-number by Jumpaku (@jumpaku) on CodePen.

解説

このプログラムは,ボタンが押されるたびに,0以上1以下のランダムな実数を表示します. JavaScriptではMath.randomという関数を使用することで,0以上1以下のランダムな実数を生成することができます.

改造の例
  • 生成した乱数に1を足すことで2以上3以下のランダムな実数を表示するように改造してみる.
  • 生成した乱数に100をかけることで0以上100以下のランダムな実数を表示するように改造してみる.ただし,JavaScriptではかけ算は×ではなく*という記号が使用されることに注意してください(例えば,Math.random()×100ではなくMath.random()×100と記述することになります.).

演習:乱数の値に応じて表示するテキストを変更する

プログラムと実行結果

See the Pen display-dice-number by Jumpaku (@jumpaku) on CodePen.

解説

このプログラムは,ボタンが押されるたびに,1以上6以下のランダムな整数を表示します.

このプログラムのdice関数はMath.random()により生成した0以上1以下のランダムな実数を1以上6以下のランダムな整数に変換します.

具体的には以下の条件に応じた処理を実行します.

  • もし変数valueが1.0/6.0未満なら,変数diceValueに1を格納する.
  • 上の条件を満たさず,もし変数valueが1.0/6.0未満なら,変数diceValueに1を格納する.
  • 上の条件を満たさず,もし変数valueが2.0/6.0未満なら,変数diceValueに2を格納する.
  • 上の条件を満たさず,もし変数valueが3.0/6.0未満なら,変数diceValueに3を格納する.
  • 上の条件を満たさず,もし変数valueが4.0/6.0未満なら,変数diceValueに4を格納する.
  • 上の条件を満たさず,もし変数valueが5.0/6.0未満なら,変数diceValueに5を格納する.
  • 上の条件を満たさないなら,変数diceValueに6を格納する.

ただし,JavaScriptでは割り算は÷ではなく/という記号が使用されることに注意してください(例えば,1.0÷6.0ではなく1.0/6.0と記述することになります.).

dice関数はこの処理を,「条件に応じた処理」を記述するため構文を利用して記述されています. 「条件に応じた処理」を記述するため構文を以下に示します.

if (条件式1) {
  条件式1が真の時の処理;
} else if (条件式2) {
  条件式1が偽で条件式2が真の時の処理;
}
・
・
・
 else {
  上の全ての条件式が偽の時の処理;
}
改造の例
  • 1から5まではそれぞれ1/10の確率で表示され,6は5/10の確率で表示されるように改造してみる.
  • 1から10までが等しい確率で表示されるように改造してみる.

演習:HTMLのキャンバスに図形を描画する

プログラムと実行結果

See the Pen render-on-canvas by Jumpaku (@jumpaku) on CodePen.

解説

このプログラムはHTMLのcanvas要素に対して,JavaScriptを使用して長方形や円などの図形の描画処理を実行することで文字だけでなく,図形を表示します.

let ctx = e.getContext("2d");

の部分では,変数eが持つgetContext関数を実行することで2次元の「レンダリングコンテキスト」というもの取得し,これを変数ctxに格納しています. レンダリングコンテキストは,以下に示すような,図形を描画するための様々な関数や変数を持っています.

  • strokeStyleは直後に描画する図形の輪郭の色を格納する変数
  • fillStyle:直後に描画する図形の内部の色を格納する変数
  • strokeRect(左上の点のx座標, 左上の点のy座標, 高さ, 幅):長方形の輪郭を描画する関数
  • fillRect(左上の点のx座標, 左上の点のy座標, 高さ, 幅):長方形の内部を描画する関数
  • beginPath():図形の作成を開始する関数
  • arc(中心のx座標, 中心のy座標, 半径, 0, Math.PI * 2):円を作成する関数
  • stroke()beginPath()で作成を開始した図形の輪郭を描画する関数
  • fill()beginPath()で作成を開始した図形の内部を描画する関数
  • clearRect(左上の点のx座標, 左上の点のy座標, 高さ, 幅):長方形領域に描画されている図形を消去する関数
改造の例
  • 縦長の長方形を表示するように改造してみる.
  • 以下の条件を満たすような円と長方形が表示されるように改造してみる.
    • 条件:長方形の頂点が円周上に配置される.

演習:サイコロを振るアプリケーションを作成する

プログラムと実行結果
解説

このプログラムでは,ボタンが押されるたびにサイコロが振られ,出た目が表示されます.

詳しい解説は省略します. これまでの内容を踏まえて,解読してみてください.

改造の例

サイコロの数を増やしてみる.

おすすめのプログラミング勉強法

最後に,私がおすすめするプログラミング勉強法を以下に示します.

SAMIT Online! 21.04とJumpakuの発表の様子

  • SAMIT Online! 21.04の全体