読者です 読者をやめる 読者になる 読者になる

アラタナエンジニアブログ

aratana Engineer's Blog

プログラム知識ゼロの学生さん向けに、エンジニアインターンを企画しました

f:id:tabibits:20150303200407j:plain

皆さんこんにちは。アラタナの何でも屋、永井です。
今回は先日弊社で行いましたインターンイベントについてレポートしたいと思います。

プログラマーを体験してもらう2日間

弊社は営業向け、事業企画向け、デザイナー向けと色々なインターンプログラムをやっていますが、プログラマー向けのインターン企画はとても難しいと感じています。
何故かと言うと、参加される学生さんのプログラミングスキルをどこに設定するかで、インターンの内容が大きく変わってしまうからです。

通常業務に携わってもらうための必要スキルを書いたら参加者が集まらなかったり、インターンに来てくれた学生さんのレベルを見てインターン内容を変えたら、内容の薄いものになったり、学生さんを放ったらかしにしてしまったり。

ですので今回は、プログラミングの経験が無くても、学生さんがプログラマーという職業について体験できるような内容にしてみました。

具体的には、プログラミングの簡単な座学から始めて、実際にゲームプログラミングをしてもらうといったもの。
勿論、プログラミングの手順にちょっとした工夫を入れて、実際のプログラマーがどのようにひとつの成果物(ゲームアプリ)を作っているのかを体験できるようにしてみました。

プログラム言語はなにを使ったか

ゲームアプリのプログラム言語にはJavaScriptを選択しました。
弊社がWEB系の事業に携わっているのもありますが、学生さんがインターン後も継続して学ぶことを考えた時の情報の多さ、フレームワークの多さを考慮しました。
Unityとも悩みましたが開発環境の手軽さからからもJavaScriptかなと思います。

使用するフレームワークenchant.jsです。
僕自身、今回はじめてenchant.jsを使ったんですがホント簡単ですね。
サクサクッとゲームが作れるので、時間をかけずに教材の準備ができました。

f:id:tabibits:20150303192628p:plain

とはいえ、いきなりプログラミングはキツイ

そんなわけでプログラミングの経験が無い学生とゲームプログラミングするのですが、これだけは基礎知識として必要!として、以下の説明を行いました。
掛かった時間は全部で1時間程度。

  1. プログラムはどう動く?
  2. 変数ってなんだ?
  3. 変数の仲間たち(型)
  4. 変数の使い方(各種演算子)
  5. プログラミングの文法たち(構文)
  6. プログラミングのまとまり(関数)
  7. 変数と関数の関係(スコープ)

1番時間を使ったのは「プログラムはどう動く?」と「変数ってなんだ?」。
ソースコードがどのように実行されて結果につながるかの説明をピタゴラ装置を使って、変数の説明をを使ってじっくりと説明しました。

f:id:tabibits:20150304172751j:plain
図.プログラムはどう動く

f:id:tabibits:20150303192635j:plain
図.変数ってなんだ?

反対に型、演算子や構文などはサラッと流しました。
未経験者には、プログラミングは難しいといった先入観を持つ方が多いので、簡単な算数や英語の知識で作れるものとの印象を強くしました。
それから、スコープの説明については難解なので、プログラミングの最中に何度も立ち戻っておさらいできるようにしておきました。

f:id:tabibits:20150303192641j:plain
図.変数と関数の関係



待ちに待った ゲームプログラミング!

プログラミングに掛けた時間は7時間ほど。
もっと掛かるかもと思って構えていましたが、この時間で行けました。

説明の手順は以下の通りです。

  1. 背景に色を付けよう
  2. キャラクタを出そう
  3. キャラクタを動かそう
  4. 画面からはみ出さないために
  5. リファクタリング
  6. コインを出そう
  7. コインを転がそう
  8. スコアボードをつくろう
  9. コインを取れるようにしよう
  10. リファクタリング
  11. 敵を出そう
  12. ゲームの難易度を調整しよう


まず、キャラクタを表示するプログラムを書いてもらい、

var bear = new Sprite(32, 32);
bear.image = game.assets["chara1.png"];
game.rootScene.addChild(bear);


そのキャラクタを動かすプログラムを書いてもらい、

//Bearにタッチすると動く
bear.ontouchstart = function () {
    bear.x = 150;
    bear.y = 100;
}


X軸、Y軸の説明をする。

f:id:tabibits:20150303192647j:plain


さらには、そこに十字キーの押下イベントに応じてxとyを計算する仕組みを考えてみるなど、

f:id:tabibits:20150303192658j:plain

ひとつひとつ、プログラムがステップアップするような感じでプログラミングしてもらいました。
最初の座学で軽く流した各種演算子や構文も、ここではじっくりと取り組んでもらいます。
実際に動くものを前にすると、理解も早いのではと感じました。

そして「リファクタリング」の工程では、 「定数化」「関数化」 を実践してもらいました。
この作業によってプログラムの保守性が上がることなどを実際の改修を通して体験してもらいます。
例えば、コインが壁に反射する処理を関数化して、敵の動きでも再利用するなどの説明を加えながらやることで、関数化の理解を深めてもらいました。



最後に

無事に完成できたゲームはこちら。
https://hironagai.github.io/coingame/

今回行ったインターンでは文系、理系の大学生、専門学校生と様々な学生さんに参加してもらいました。
皆さん初めはプログラマーという職業は専門的な知識が必要との意識が強く、自分には無理と考えていたようですが、実際にプログラミングを体験することで、自分にも理解できることや「もの」を作り出す楽しさを感じ取ってもらえたようでした。
また、楽しさだけでなく閉じカッコの付け漏れやスペルミスなど、プログラムのハマりどころにもしっかりとハマって(笑)もらい、サクサクとは進まない作業の性質も分かってもらえたかと思います。

f:id:tabibits:20150303192712j:plain

最後になりましたが、今回参加いただいた学生の皆さん、本当に有難うございました!
皆さんがプログラマーとの職業について少しでも理解でき、考えるキッカケになれば、そして立派なプログラマーになって頂ければ幸いです。

あ!

まだ2回、3回とインターンを開催しますので、「プログラミングしてみたい!」と思った学生のあなた!
あなたのご参加、お待ちしてますよ!

2016新卒採用テクノロジーコースインターンシップ:基礎からちゃんと分かる!ガチプログラマー体験でリアルを掴みとれ! | 株式会社アラタナ