中学生プログラミング＊IT部＿教材一式

Monacaで学ぶはじめてのプログラミング

第1章 アプリ開発入門　▶スライド
第2章 HTML入門　　　　▶スライド
第3章 CSS入門　　　　 ▶スライド
第4章 JavaScript入門 ▶スライド
第5章 条件分岐　　　　▶スライド
第6章 関数　　　　　　▶スライド
第7章 イベント　　　　▶スライド
第8章 DOM　　　　　　 ▶スライド
第9章 フォーム　　　　▶スライド
第10章 いろいろな演算子 ▶スライド
第11章 配列 　　　　　▶スライド
第12章 繰り返し　　　 ▶スライド

演習

①図鑑アプリをカスタマイズする（目安：第３章終えたタイミング）　　

　▶スライド（動画講義なし）

②自分のオリジナルの図鑑アプリを作成する

　▶テンプレートダウンロード

③DX図鑑アプリをカスタマイズする（目安：第12章を終えたタイミング）

　▶スライド（後半）（動画講義なし）

サンプルアプリ

初級編 ブロック崩しアプリ　▶スライド

• アレンジ①最初のボールを増やす　▶スライド
• アレンジ②パドルの横幅を変える　▶スライド
• アレンジ③ボールの最初の位置を変える　▶スライド
• アレンジ④ブロックの初期配置を変える　▶スライド
• アレンジ⑤ブロックの色ごとの得点を変える　▶スライド
• アレンジ⑥ブロックに当たったら、ボールを増やす　▶スライド
• アレンジ⑦ブロックの色を増やす　▶スライド
• アレンジ⑧緑色のブロックを崩したら、ボールを３つ増やす　▶スライド
• アレンジ⑨緑色のブロックを崩したら、得点が3倍になる　▶スライド
• アレンジ⑩ボールがパドルに当たったら音を鳴らす 　▶スライド

ゲームで学ぶJavaScript入門

Chapter 3 Canvasの基本
3-1 ＜canvas＞要素で図形を描く（P172～） ▶見本コードをDL
3-2-1 さまざまな図形の描画　直線、多角形（P175～） ▶見本コードをDL
3-2-2 さまざまな図形の描画　矩形（くけい）（P177～） ▶見本コードをDL
3-2-3 さまざまな図形の描画　円、円弧（P178～） ▶見本コードをDL
3-2-4 さまざまな図形の描画　文字（P180～） ▶見本コードをDL
3-2-5 さまざまな図形の描画　画像（P181～）▶見本コードをDL
3-3 座標系の設定（P184～）▶見本コードをDL

Chapter 2 Javascriptの基本（★注意／少し戻ります）
補足説明：難しいと感じたら「Progate」JavaScript II、Ⅲ（有料版）を先にやってみよう！ ※Progate (https://prog-8.com/）各自でアカウントを作成する自習用アプリ／無料は一部（有料版は任意ですが、プログラミング学習におススメです）2-11-5　本章のサンプル　インタラクティブレシピ（P162～） ▶見本コードをDL
2-11-5　本章のサンプル　暗記アプリ（P164～） ▶見本コードをDL
2-11-5　本章のサンプル　動くカレンダー（P166～） ▶見本コードをDL

Chapter 4 [実践] ゲームプログラミング
ここからは、ブラウザ対応を作成します。（スマホできれいに表示対応できません）
4-1 スライドパズル　15puzzle　（P188～） ▶見本コードをDL
4-2 神経衰弱　FlipCards　（P193～） ▶見本コードをDL
4-3 荷物を運ぼう　CarryIt　（P199～） ▶見本コードをDL

注記：この続きは追って公開予定です。教材コンテンツ全体の詳細については、各自スプレッドシートをご参照ください。