高校生にプログラミング合宿を開催した話

# はじめに
8月5日（月）〜8月9日（金）の5日間、高校生にプログラミングの基礎を教える講師をしました。『人に教える』のは初めての経験で、何を話せば生徒たちにプログラミングのおもしろさ、サービスを開発する楽しみを伝えることができるのか？を考えて5日間講師をしました。その内容をまとめたので、Qiitaに投稿しようと思います。

2020年から小学校でのプログラミングの義務教育化、高校では2022年度以降に段階的にプログラミングを授業に適用する流れになっていますが、エンジニアとして働いている方に「学生にプログラミングを教えて欲しい」というお話・機会があるかもしれません。そういったときの参考になる記事になればいいなと思っています。

## 対象

合宿の参加人数は全員で10名でした。

* 1年生〜3年生までの8名の高校生（男子校）・2名の先生
* プログラミングには興味はあるが全員未経験

## **【目標】プログラミングの基礎を学び、 サービスを作れるようになる**

まず最初に、この合宿の全体の目標を共有しました。

[**プログラミングサマーキャンプについて** - Speakerdeck](https://speakerdeck.com/fujiyamayuta/puroguramingusamakiyanpufalsegai-yao)
![サマーキャンプについて.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/f6d69141-e306-3bcc-2044-c22a5cc03420.jpeg)

**プログラミングの基礎を学び、 サービスを作れるようになる**

エンジニアにとってインプットは大切ですが、**手を動かす**ことがより重要なインプットだと思います。授業や講義は最小限にして、**とりあえず手を動かして作る。動くものを作る。**をテーマに5日間取り組みました。最低限のプログラミングの基礎を学び、合宿のほとんどはプログラミングをしてサービス開発をする時間にしました（動くものを開発している時間が一番楽しい）。

## プログラミング基礎

まずは初日に、プログラミングの基礎をやってもらいました。

### ① if文
入力した値が数字であれば、その数字に『3』を足してアラートで出力する。数字でなければ、値をそのままアラートで出力する。
<img width="892" alt="スクリーンショット 2019-08-09 8.13.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/862d6e33-9ed8-3f38-c3d0-10025a90367d.png">


### ② for文
入力した値が数字であれば、1からその数字までを順番に足してアラートで出力してください。
<img width="853" alt="スクリーンショット 2019-08-09 8.13.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/981e2227-64a4-cb25-1e89-806391366138.png">


### ③ API通信
ボタンを押したときに、APIで取得したデータをCommentsに表示させるようにプログラムを書いてください。
<img width="967" alt="スクリーンショット 2019-08-09 8.14.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/c3158512-939b-de01-e10c-6913f94109fa.png">


### ④ 乱数
文字列の『ズン』と『ドコ』の文字列を5回繰り返し結合させ、その文字列が『ズンズンズンズンドコ』になれば、『キヨシ！』のアラートを発生させるプログラムを書いてください。
<img width="1075" alt="スクリーンショット 2019-08-09 8.17.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/02ee1967-e570-61c9-8ad8-e77ba2b1b56f.png">


## 生徒が作ったもの

2日目からは実際にサービス開発に入りました。**①リアルタイムチャットアプリ** **②LINEBot**のどちらを開発したいか選択してもらいました。5日間で全員がリリースすることができました🙌

### ①リアルタイムチャット

LINEやTwitterのようなチャットサービスを開発しました。

<img width="1279" alt="スクリーンショット 2019-08-12 9.40.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/7f8fdffb-f3e0-4334-77a2-732c667911fa.png">


### ②LINEBot

LINEBotを開発した生徒は、オススメのゲームを紹介するBotを開発しました。

![14767.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/b1fdf05a-ccd8-20ac-90c3-192c3e3fcd12.jpeg)


## 技術・開発ツール

#### Webサービス
* JavaScript
* Github
* Firebase
    * Firestore
    * Cloud Storage
    * FirebaseHosting

![サービスについて.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/077ee021-da10-a450-cc81-9e4bc4682e49.jpeg)

#### LineBot
* GoogleAppScript
* Github
* MessagingAPI
* SpreadSheet

![サービスについてLINE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/3e5b7963-1683-2b59-df66-bce0520e131b.jpeg)


### 開発ツール
* VScode
    * Live Server（localhost）
* Gitbash
    * npm
    * firebaseCLI
* Google Developer Console

## 合宿中の講義内容

* **[プログラミングについて](https://speakerdeck.com/fujiyamayuta/puroguramingunituitefalsejiang-yi)**
![プログラミングについて.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/73bf1338-04c8-9cda-38af-de71f2e39e91.jpeg)

* **[サービスを支える仕組みについて](https://speakerdeck.com/fujiyamayuta/sabisuwozhi-erushi-zu-minituite)**
※ [@s_osa_](https://twitter.com/s_osa_)さんの[技術基礎研修 - speakerdeck](https://speakerdeck.com/osa/introduction-to-the-internet)の資料の内容の一部を参考にさせてもらいました🙏
![サービスについて.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147291/b012daab-817a-32b2-0249-a0399bdad70c.jpeg)


* エンジニアの働き方とお給料について
※ 資料は控えておきます...🙇‍♂️

## 生徒たちが悩んでいたところ

生徒たちが悩んでいたところや、質問されたところをまとめました。

* **プロジェクトを起動できない**
    * 自分のプロジェクトがどこにあるかわからない
    * ディレクトリの概念がわからない
* **プログラムを修正したけど動かない**
    * エラー発生のまま実行している
    * 保存をしていないので変更が反映されていない
* **インデントがずれる**
    * if文、for文、コールバック等ネストが深くなる部分の、どこまでが処理なのかが理解できていない
    * tabとspaceが混在している
* **Googleアカウントが作れない**
    * Googleアカウントは電話番号に認証があるためスマホをもっていないとアカウントをつくれない
    * GoogleアカウントがないとFirebaseプロジェクトが作れない
* **ネットワークの制限でアクセスできないサービスがあった**

## ちょっとした工夫

### 環境構築はセットアップした状態でスタート

周りが集中してコードを書いている中『自分だけまだプロジェクトが動かない...』なんて状況になると、生徒のモチベーションも下がるので、開発に必要な設定やツールの導入は、こちらで事前に済ませコマンドを打てばlocalhostが立ち上がり、プログラミングできるところまで準備してスタートしました。開発していて一番楽しいと感じるのは、プログラムが動く状態で試行錯誤しているときなので、生徒が詰まらずに開発に取り組めたのは良かったなと思いました。

### 講義をする時間は午前中が良い

初日、お昼ご飯を食べた後13:00から講義をすると、ほとんどの生徒が眠そうにしていました...zzz。僕の講義がつまらないという悲しい理由もあるかもしれませんが、食べた後眠くなるのは生理現象なのでしかたないと割り切りました...。次の日以降からは午前中に講義をするように変更すると、しっかりと聞いてもらえるようになりました◎ （満腹感は敵になる）


## プログラミング合宿を開催して感じたこと

### 最も学習定着率の高いアウトプットは「人に教えること」

合宿が終わった日に
[だーすー@マシュマロの中の人](https://twitter.com/Neko_Inu_?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1159727695506239488&ref_url=https%3A%2F%2Fqiita.com%2FYuta_Fujiwara%2Fprivate%2Ff92a45dd1be19448bf94) さんが以下のツイートをしていました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「アウトプット大全」に書いてあったんだけど、アメリカ国立訓練研究所の研究によると最も学習定着率の高いアウトプットというのは、「人に教えること」。<br>読むだけだと10%、グループ討論は50%、教えると90%なので、ただインプットするだけより9倍も効果がある。</p>&mdash; だーすー@マシュマロの中の人 (@Neko_Inu_) <a href="https://twitter.com/Neko_Inu_/status/1159727695506239488?ref_src=twsrc%5Etfw">August 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この合宿を振り返ってみて、一番学ぶことができたのは、自分自身だったんじゃないかと思いました。

本を読んだりして講義の資料を作成したり、リアルタイムチャットアプリ・LINEBotを開発したり、FirebaseやMessagingAPIのリファレンスを読み込んだり、どうしたら生徒たちに理解してもらえるかを想像しながら準備しました。それらのインプットしたことを、リアルで教えることで、より理解が深まったので『教える』というアウトプットを今後も定期的にやっていきたいと思いました。

### エンジニアになりたい人が4人に増えた！

合宿の最後に『この合宿を終えてエンジニアとして働きたいと思った人🙋‍♂️』と、質問したら、4/8人がエンジニアになりたいと挙手をしてくれました。

自分自身、IT業界で働きお金を稼いでおり、IT業界からの恩恵を受けています。エンジニアとしてはまだまだ発展途上ではありますが、業界が今以上に発展することに尽力したいと考えています。今回の合宿を終えて、生徒たちの選択肢にIT業界という選択が増えたのは間違いないので、チャンスがあれば今後もこの取り組みを続けて、この業界を微力ながらも盛り上げて行きたいと思いました！

この話を受け入れてくれた先生方、本当にありがとうございました🙇‍♂️ 

## 参考

[@s_osa_](https://twitter.com/s_osa_)さん - [技術基礎研修 - speakerdeck](https://speakerdeck.com/osa/introduction-to-the-internet)🙏