基礎プログラミング演習1

連絡先

秋山優: maooonあっとgmail.com

評価について

• 毎回の課題
• テスト
• 最終課題

注意

Webで検索したコード、友人や先輩に書いてもらったコード、生成AIが出力したコードをそのまま提出する人がたまにいますが、そのような行為は剽窃とみなされ「不可」となります。気をつけてください。AIを活用して勉強するのはもちろんOKです。

課題のプログラムには必ずコメントをつけてください。コメントがついていないプログラムは採点対象外です。小学生でもわかるようにプログラムを説明してください。詳しくは次週説明します。

第１回　オリエンテーション

授業で使用するソフトウェア

以下からダウンロードしてください。ブラウザは必ずFireFoxを使ってください。エディタは好きなもので結構です。授業では（教卓のPCでは）VSCodeを使います。

• FireFox
• VScode

課題の提出方法

1. ycReportsフォルダ内の「基礎プログラミング演習1a(秋山)」（後半学期は1b）というフォルダの中に、「自分の氏名(学籍番号)」というフォルダを新規作成してください。このフォルダが第2回目以降の課題提出用フォルダになります。学籍番号は半角英数です。
2. 各自の課題提出用フォルダの中に、さらに毎授業ごとに「02」「03」・・のようにフォルダを作成し、各回の授業で作成した課題ファイルを保存してください。他の人のフォルダに提出しないよう注意。
3. 学外から自分のPCで課題を提出するためには、学内ネットワークにVPN接続をする必要があります。情報基板センターの学外からの利用(VPN接続)を参考にしてPulse Secureを使ってVPN接続をしてください。
4. VPN接続したら、同じく情報基板センターのネットワークドライブの接続を参考にして、ycReportsフォルダにアクセスしてください。

課題

1. 01というフォルダを作成し、エディタで作成したHTMLファイルを提出しなさい。内容は何でもよい。ファイルを保存する際に、拡張子を「.html」とすること。他人の提出フォルダに入れないように気をつけて下さい。

第2回　HTMLの基礎

今週の目標

• HTMLの概要について理解する。
• 基本的なタグを使ってWebページを作ることができる。

課題

1. 基本的なタグについてWebで調べ、自己紹介ページを作成しなさい。以下を含むこと。
   • 自分が世界一のプログラマーだと仮定した時、どのようなWebサービスやアプリを作りたいか具体的に説明しなさい。見出しタグと段落タグを使うこと。
2. Webページが正しい文法で書かれたかをW3CのValidatorで検証します。エラーがなくパスすると、その証をページに貼ることができます。

参考

• 授業で一緒に書いた自己紹介ページのHTMLタグたち
• HTMLクイックリファレンス

第3回　CSSの基礎

目標

• 基本的なタグを使ってWebページを作成できる（復習）。
• CSSを使ってWebページをデザインすることができる。

参考ページ（とほほ）

課題

先週の分と合わせて提出してください。

先週作成したHTMLファイル（自己紹介ページ）をCSSで装飾しなさい。以下の条件を満たすこと。スタイルは自由に決めてよい。スタイルシートは外部ファイル（.cssファイル）として作成すること。

1. まず、自己紹介ページに東京都市大学のロゴを表示します。次に、aタグでロゴ画像を囲んでリンクにし、クリックすると都市大のトップページに遷移するようにリンクを貼りなさい。
2. 指定したid名の要素に任意のスタイルを適用すること（例えば箇条書きの要素（<li>aaa</li>)が３つあるとき、一つ目は背景色が赤、二つ目は青、、、等）。
3. 指定したclass名の要素すべてに任意のスタイルを適用すること。
4. 指定したid名のimg要素について、任意の縦横幅を指定すること。
5. 表組み（時間割）の枠線を自分の好きなように変更してみましょう。
6. グラデーションや透明度を指定すること。
7. その他自分で調べて自由にスタイルを適用すること。
8. W3CのCSS Validationを通してみましょう。パスすると、パスした証としてアイコン（このページの一番下参照）をページに貼ることができるので、頑張ってみてください。

第4-5回 hello world

今週の目標

• Hello world! のアラートを出すことができる。
• 変数を使ったプログラムを作ることができる。
• 文字列と数値を結合することができる。

課題

ボタンは作らなくてよい。ページが読み込まれたら、順番に実行されるようにすること。

1. Hello world!をアラート表示するプログラムを作りなさい。
2. プロンプト(2つ出す)からそれぞれ名前と学籍番号を入力すると、「〇〇さんの学籍番号はXXですね」とアラート表示するプログラムを作りなさい。
3. プロンプト(2つ出す)からそれぞれ身長と体重を入力すると、「あなたのBMI値は〇〇です」とアラート表示するプログラムを作りなさい。BMIの計算方法はぐぐること。動作サンプルはこちら。
4. プロンプト（2つ出す）から数字を2コ入力すると、その和、差、積、商、余りをアラート表示するプログラムを作りなさい。入力された値を足し算するには、a = Number(a);のように変数に記憶されている値を数値に変換する。また、割り算の余りは%で求められる。
5. 簡単なお買い物プログラムを作ります。動作サンプルはこちら。
   1. 商品をいくつ購入するかをプロンプトから入力させる（「りんご(100円)をいくつ買いますか？」→ ユーザは例えば「3」を入力。
   2. 商品の数（3つくらい？）だけ繰り返す(入力された個数は変数に代入する)。
   3. 各商品の数と価格から合計金額を計算し、変数に代入する。
   4. 「合計金額は〇〇円です。」とアラート表示する。

第6回　関数とイベント

今週の目標

• 関数を定義し、ボタンをクリックすると呼び出せるようになる。
• テキストボックスを作り、入力された値を取得(document.getElementById().value)することができる。

解説

課題

1. 名前を入力するテキストボックスを作り、ボタンをクリックすると「こんにちは、〇〇さん！」とアラート表示するプログラムを作成せよ。
2. テキストボックスを3つ作り、学部、学年、名前を入力しボタンをクリックすると、「〇〇さんはXX学部の△△年生ですね」とアラート表示するプログラムを作成せよ。
3. 先週のBMI算出プログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。
   • できたら、cmで入力できるようにすること。
   • できたら、小数点第2位で四捨五入すること。小数点以下を四捨五入するには、Math.round()を用いる。例）alert(Math.round(1.234));
   • 求めたBMIの少数点をずらして四捨五入し、少数点を元に戻す。
4. 先週の和、差、積、商、余りを求めるプログラムを、プロンプトではなくテキストボックスを使って作成せよ。ボタンをクリックすると実行されるようにすること。
5. 二次方程式 ax² + bx + c = 0 の解の公式は二次方程式の解の公式に説明があります。係数a, b, cの値をテキストボックスから入力し、ボタンをクリックすると2つの解をアラート表示するプログラムを作成せよ。実数解がない場合はエラーが出てもよい。ルートを求めるには、Math.sqrt();を使う（例：ルート2はMath.sqrt(2);で求められる）。また、xのy乗は、Math.pow(x, y)で求められる。

第7回　条件分岐(1)

今日の目標

• 条件分岐（場合分け）を使ったプログラムを書けるようになる。
  • 比較演算子と論理演算子を使って条件式を書けるようになる。
  • if, else if, else構文をマスターする。

今週の課題

動作サンプルはこちら

1. テキストボックスに入力された数が偶数なら「偶数です」、奇数なら「奇数です」とアラート表示するプログラムを作成せよ。
2. テキストボックスに得点を入力し、点数が90~100点なら「秀」、80~89点なら「優」、70~79点なら「良」、60~69点なら「可」、0~59点なら「不可」、それ以外なら「0から100の点数を入力してください」と アラート表示するプログラムを作成せよ。
3. BMI判定プログラムを完成させなさい。
   1. BMIの値によって、表示するメッセージを変えなさい。
   2. 身長をセンチメートルで入力した際にも正しい計算結果が得られるようにしなさい。
   3. 算出したBMI値を小数点第二位で四捨五入して表示しなさい（21.67...ならば21.7）。Math.round()を使う。
4. テキストボックスに入力した整数が３で割り切れるなら「FIZZ」を、５で割り切れるなら「BUZZ」を、両方で割り切れるなら「FIZZBUZZ」をアラート表示するプログラムを作成せよ。
5. 条件分岐を使って前回の二次方程式を解くプログラムを完成させなさい。
   • ルートの中（b²-4ac)が0未満　→ 　「実数解がありません」とアラート
   • ルートの中（b²-4ac)が0と等しい　→ 重解なので解を一つアラート
   • ルートの中（b²-4ac)が0より大きい　→ 解を2つアラート

第７回　条件分岐(2)

今週の課題

学期前半の最後です。

今週から前期後半学期なので、ycreports内の「基礎プログラミング演習1b(秋山)」に各自の氏名、学籍番号を記したフォルダを作り、先週までと同様に提出してください。

2. JavaScriptには、乱数（出鱈目な数）を作る関数があります。alert(Math.random());を実行すると、0以上1未満の乱数をアラート表示します。let n = Math.random();を実行すると、変数nに0~1未満の実数が代入されます。これを利用して、おみくじプログラムを作りなさい。ボタンをクリックすると、生成した乱数の値に応じて「大吉」「中吉」「小吉」「凶」「大凶」のアラートを表示します。0.1未満なら大凶、0.3未満なら「凶」・・・のような感じ。
3. if文を使って、以下のような数当てゲームを作ってみましょう。動作サンプル
   1. ユーザは、テキストボックスに1から100の整数を入力し、ボタンをクリックします。
   2. 正解の数として、Math.random()を使い1から100の乱数を生成しておきます。Math.random()を使って1~100までの乱数を生成するには、例えば以下のように書きます。原理は自分で考えて下さい。

      let rand = Math.floor(Math.random() * (101-1)+1); //1から100の整数をランダムに生成し、変数randに入れる。

   3. 入力された数が生成した乱数より大きければ「もっと小さいよ」、小さければ「もっと大きいよ」とアラート表示します。もし、入力された数が生成した乱数と等しければ、「当たり！」とアラート表示します。
   4. 当てるのに何回かかったかも表示できるようにしましょう（例：「当たり！３回目だよ」）。
   5. テキストボックスに入力された数が1から100の整数ではない場合、「1から100の整数を入力して下さい」とアラート表示するようにしましょう。

      ヒント：乱数の生成は、ボタンをクリックするたびに変わってしまうとまずいので、関数定義(function f(){})の外側に書きます。回数を記憶する変数も同様。

4. テキストボックスから西暦年を入力すると、その年が閏年かどうかをアラート表示するプログラムを作成せよ。条件はできれば１行で書いてみましょう。閏年の条件は以下の通り(Wikipediaより）。わかりづらければ、コンピュータシステムと閏年も参照。
   1. 西暦年が4で割り切れる年は(原則として)閏年。
   2. ただし、西暦年が100で割り切れる年は(原則として)平年。
   3. ただし、西暦年が400で割り切れる年は必ず閏年。

課題2に関しては、採点を考慮して、事前に正解をアラート表示するようにしてください。

第8回　繰り返し(1)

今日の目標

• 繰り返し文を使ったプログラムを書けるようになる。
  • for文、while文、for文を使ってプログラムが書ける。
    • ループ用変数の適切な初期化、条件式作成、インクリメントを行うことができる。

繰り返しの説明（for/while）

今週の課題

ボタンをクリックすると実行されるようにすること。ブラウザ上に値を表示するには、document.write()を使う（いける人はinnerHTMLを使ってみましょう）。

1. 10から0までの整数を降順にブラウザに表示するプログラムを書きなさい。
2. 1からNまでの奇数の和をアラート表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
3. 1から100までの数を表示するプログラムを書きなさい。ただし、3で割り切れる場合は「FIZZ」、5で割り切れる場合は「BUZZ」、両方で割り切れる場合は「FIZZBUZZ」と（数の代わりに）表示するようにしなさい。
4. に世界のナベアツが「3の倍数と3が付く数字の時だけアホになります」というネタをやっていました。1から99までの数字を順に表示し、3の倍数の時、1の位が3の時、10の位が3の時、数字の後に「アホ」と表示してみましょう。できれば論理演算子を使ってif文1個だけで書いてみましょう。
5. テキストボックスに入力された数が素数かどうか判定しアラート表示するプログラムを次の手順で作りなさい。ループから脱出するにはbreak;を使う。
   1. 入力された数について、2から順に（その数-1まで）割り切れるかどうかを試します。
   2. 割り切れたら「素数ではありません」と表示して、break;で脱出します。
   3. 繰り返しが終了した時点でどの数でも割り切れてなければ「素数です」と表示します（ヒント：変数を一つ用意して0を入れます。上の手順の繰り返しの中で、入力された数が割り切れたら（break;で脱出する前に）その変数に1を代入します。繰り返しが終了した時点で、その変数が1であれば「素数じゃないよ」、0であれば「素数だよ」とアラート表示します。）もちろん他のやり方でもOK。動作サンプル

第9回　繰り返し(2)　繰り返しの繰り返し（入れ子）

今日の目標　

• 繰り返しの入れ子を書けるようになる。

今週の課題

ボタンをクリックすると実行されるようにすること。

ピラミッドを建立するには、まずビルを建てるところから始めるとよいでしょう。例えば、横にTCUが10こ並んだ10F建てのビルを建てるには、どのようなプログラムを書けばよいでしょうか。

問題1~3は先週の復習です。問題4~7については必ず二重ループ（繰り返しの入れ子）を使って下さい。

1. 1~100までの整数について、それぞれを2乗した数を表示するプログラムを書きなさい。
2. 1~Nまでの整数のうち3の倍数だけを表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
3. 1~Nまでの整数のうち3の倍数だけを足し合わせた結果をアラート表示するプログラムを書きなさい。Nはテキストボックスから入力するものとする。
4. 10階建てのTCUピラミッドを建立しなさい。
5. N階建てのTCUピラミッドを建立しなさい。Nはテキストボックスから入力するものとする。
6. 課題5を変更して、逆ピラミッドにしなさい。
7. *テキストボックスに入力された数をnとした時、n以下の素数を全て表示するプログラムを作りなさい。動作サンプル

3F建てのTCUピラミッドと逆ピラミッド

第10回　配列

今日の目標

• 配列を作れるようになる。
• 配列の要素を取得、変更、追加できるようになる。
• 繰り返し文を使って配列を操作できるようになる。

配列についての簡単な説明

今週の課題

ボタンをクリックすると実行されるようにすること。

1. 適当な要素を5個持つ配列（['apple', 'banana',・・])という配列を作り、配列の要素を順番にアラート表示するプログラムを書きなさい（5回アラートが出る）。繰り返しを使うこと。
2. 課題1の配列について、逆順にアラート表示するプログラムを書きなさい。繰り返しを使うこと。
3. 次のようなプログラムを書きなさい。
   1. 変数xに0から99までの整数を並べた配列を代入します。繰り返しを使うこと。
   2. 配列の各要素を、それを2乗した数で置き換えます。
   3. 結果の配列をアラートで表示します（99回アラートを出すのではなく、一つのアラートで結果を表示すること）。
4. これまで学習したことを使って、じゃんけんプログラムを作ってください。条件は以下になります。動作サンプル
   1. ユーザが入力したぐーちょきぱーに対して、コンピュータが出した手と比べて勝敗を表示するプログラムです。
   2. ユーザの手はテキストボックスから入力すること。入力は文字列'ぐー'、'ちょき'、'ぱー'でもカタカナでも構いません。ボタンを使ってもOKです。
   3. 相手の手はランダムに決めること。0, 1, 2をそれぞれ'ぐー'、'ちょき'、'ぱー'に割り当てるとすると、Math.random()を使ってどのように0,1,2の乱数を作るかは第7回参照。
   4. 結果（あなたの手は「ぐー」でCOMの手は「ぱー」なので、あなたの負け」）をアラート表示すること。
   5. それ以外のルールについては自由にしてください。変わったルールの場合は説明書きお願いします。
5. **以下の配列numbersの中から素数の配列を作成し、アラート表示するプログラムを書きなさい。alert(result);で配列の要素が一覧表示されます。
   let numbers = [3177, 6191, 123, 7651, 57, 101, 9111, 1111];