こんにちは！
ジーズアカデミー東京スタッフの藤井です。
ジーズアカデミーには、入学時点ではプログラミングを学ぶのはこれが初めてという方も多くいらっしゃいます。

ジーズアカデミーでは特に「実際に手を動かすこと」「毎週成果物を完成させること」を重要視していますが、入学時にプログラミング初心者だった人はどんなものを作れるようになるのか？
現役生と卒業生の2名をお招きして、実際にどんなものを作ったのかを公開するオンラインイベントを2021年9月末に実施いたしました！

本記事では、イベントレポートとしてお二人からお話いただいた内容の一部をご紹介します！
プログラミング初心者で、これからプログラミングを学ぶという方、実際にどんなものを作っていけば技術に結びつくのか分からないという方はぜひご参考にいただければと思います。

【ご登壇者】

川口 慧大さん　フルタイム総合LABコース11期現役生

Keita Kawaguchi

東海大仰星高校を経て、関西大学に入学。幼少より続けていたサッカーの延長で大学時には社会人フットサルチームを立ち上げて選手兼代表を勤めた。モノ作りに興味があり、新卒で電子部品メーカー、その後IT教育企業でセールスからマーケティングまで幅広く担当。業務を通して改めて自分の手でモノを作ることの楽しさを知り、ジーズアカデミーに入学。現在、LAB11期在籍中。

石丸 香織さん　週末集中DEVコース19期卒業生

Kaori Ishimaru

ホテル業界でカスタマーサポート・マーケティングを行った後、2020年個人事業主に。メンタルヘルスの分野での起業を目的に、2021年2月〜8月ジーズアカデミーでプログラミングを学ぶ。社員にとっても企業にとっても、従業員の健康を安心して相談できる場所が必要だと考え、エンジニアや産業保健師らと共に「ハワユ(https://hawayu-wellbeing.com/hawayu/)」を立ち上げる。卒業後、東京都女性ベンチャー成長促進事業「APT WOMEN」6期に選出。

入学前に独学でプロダクト・Webサイトを作ったことはあった？

梅川(進行役・ジーズアカデミー東京スタッフ)：実際にプロダクトを見せていただく前にお聞きしたいのですが、ご入学前にもご自身でプロダクトやWebサイトを制作されたことってありましたか？

川口さん：
独学で勉強はしていたのと、業務でGAS(Google Apps Script)を使う機会はありました。

ただ、あくまでネット上のもののコピー&ペーストをしていて、Webサイトを1から作ったことはなかったです。

石丸さん：

学生時代にホームページビルダーでWebサイトを少し作っていました。
コードを書かなくても直感的に作ることができましたね。

当時はあまりネットが発達していなかったので、本を読んで作る、といった感じでした。

プログラミング初心者からのHTML/CSSを使ったLP制作

梅川：
ジーズアカデミーでは初週からWebサイト制作の課題が出ましたね！
ジーズアカデミーでは、基本的に1週間で課題を作っていきます。どんなものを制作されましたか？

川口さん：
コーヒーが好きで、焙煎もしているので自分が販売しているコーヒーのWebサイトを疑似的に作ってみようと思いました。

HTML、CSSで装飾をし、JavaScriptや少し習ったJQueryを取り入れてみました。なので、画面が動くようにして遊んでみています。

元々出ていたお手本は無視していいとのことだったので、好きなように作りました(笑)

0からWebサイトを作るのは大変だと思うんですが、一回お手本を作ってみてぼんやり理解した後には色々なWebサイトを見比べてコードを参考にして作っていきました。
入学して1か月目、3日間で作って一度提出して、その後ブラッシュアップの時間を含めて合計1週間で制作したものです。
自分一人で調べたというよりは、課題の制作過程で同期の人から情報収集をしたり何を使っているのか聞いたりしてブラッシュアップしていきました。

梅川：
焙煎士もやっていらっしゃるんですね！
川口さんのコーヒーへの想いがこもったサイトですね。
石丸さんはいかがでしたか？

石丸さん：
私は基本はお手本(チーズアカデミーという、ジーズアカデミー生が全員通る伝統の初回課題)通りに作っています。

初回課題なので、この課題だけ設計図がかなり細かく出されているんですね。ただお手本そのままに課題を作るだけでは面白くないなと思いました。

ちょうどその時に「ウェルビーイングの設計論」という本を読んでいて、インターネットの世界でも人々を幸せにすることができるという内容なんですが、それに感銘を受けて。サイトを作るにしても、見てくれた人々を楽しい気持ちにしたいという想いで作りました。

なのでネズミのマウスカーソルがあったり、実は裏タイトルがあって、サイト内に隠れたチーズを見つけようといった遊び機能があったりします。

CSSでアニメーションを付けるのが案外簡単ということがやっているうちに分かったので、楽しくなって色々アニメーションを追加しました。
こんなこともできるんだ！という発見があってとても楽しかったです。

プログラミング初心者からのJavaScriptを使ったじゃんけんアプリ制作

梅川：最初からお二人ともハイレベルな課題でしたね！
続いてはじゃんけんアプリです。こちらはJavaScriptを使った課題になります。
じゃんけんというお手本はありますが、お二人はどんな課題を作ったのでしょうか？

川口さん：これの課題も結局オリジナル通りではなくなってしまいました(笑)

じゃんけんを書くロジック(グーなら勝ちだよ、パーならあいこだよなど、勝ち負けを表示させる論理式)を使うことが課題だったんですが、それを使えば色々なゲームが作れそうだなと思いました。

タイピングゲームともぐらたたきを同時にプレイする、プレイヤーにマルチタスクに挑戦してもらう内容です。

両方じゃんけんアプリの応用なのですが、いかに両方を同時にプレイしてもらえるかというゲームにしました。

論理式に苦戦しましたが、楽しくゲームを制作できたので楽しかったです。

梅川：マルチタスクゲーム！
2つのゲームを同時進行するアイデアはどこから思いついたんですか？

川口さん：
まずJavaScriptで何かできるかを調べたら、いろいろできることがあるということがわかりました。

なのでその中からピックアップして、1つじゃすぐクリアできてしまうのでなかなかクリアできないよう、2つのゲームを並行プレイしてもらう形にして難易度を上げました。

同期の人にも遊んでもらいましたが、難しいと言ってもらえました(笑)

石丸さん：
私はストーリー性があって、子供でも遊べるものを作るということ、そして選択によって画面上の天気が変わるという仕様にしたいという2つがありました。

なのではじめは雨の画面からスタートしています。

そして偶然にも私もタイピングゲームを作りました。JSはタイピングゲームが作りやすいのかもしれませんね。

タイピングゲームのステージ1をクリアして次のステージ2では、火・草・水によってじゃんけんをしていきます。勝つと雨が晴れて虹が出る仕様になっています。

ゲーム攫われたお姫様を勇者が救いに行く、というストーリーを元にゲームを作っています。

またメンタルヘルス領域のことをやりたかったので、雨で気持ちが晴れなくてもじゃんけんに勝てば気持ちが晴れるよ、というところを掛け合わせていたりもします(笑)

プログラミング初心者からのJavaScriptを使ったメモ帳アプリ制作

梅川：続いてはメモ帳アプリです！実はここまで入学してからまだ1か月未満なんです。
どんなものを作られましたか？

川口さん：
初めて課題通りにメモ帳を作りました(笑)

HPで見た目を作る、JavaScriptを使って機能を作るという課題をここまで制作してきました。なので、見た目も作るし中身も作るけど、データも残すというこれまでの課題の発展形として制作しました。

ただ通常のメモ帳では面白くないなと思ったので、自分含め周りの同期がアイデア出しに苦戦している様子を踏まえて、アイデア出し向けにしました。

日常の気づきは課題はじめ色々な制作に使えるので、そういう些細なものを「アイデアのタネ」という形で書き留められるようにしています。

そしてタネとタネを「アイデアを広げよう！」というボックスで掛け合わせて、言語化したアイデアを倉庫に蓄積していけるというアプリです。

石丸さん：私は、自分の感情を毎日記録していけるアプリを作りました。
世に出てる感情記録アプリは色々あるんですが、結果がグラフだったりして、あんまり振り返るのが楽しくないなと思っていたことがあって。

もっとアートっぽく、面白く感情の記録を付けられれば、毎日飽きることなく記録できるんじゃないかなと思いました。

毎日日記をつけていくと、画面右側にランダムな大きさと色の丸で絵が描かれていきます。

例えばこれは架空の人物の日記を1か月分入れてあるんですが、感情を「ハッピー」・「悲しい」・「怒り」の3つに分けてあります。そしてその感情に該当する言葉を決めてあるので、該当するものが識別され、識別された感情によってランダムに絵が出てくるようになっています。

また、これを作った後にチューターさんからアドバイスをいただいて、言葉指定じゃなくてAPIを使って感情分析をしたらもっと面白くなるよと教えていただきました。

なので同じ内容で、仕組みを変えて改良をしました。

Cognitive Servicesの中の感情分析をPythonとflaskを使って書いてます。ただPythonのことは正直当時分からなかったので、なんとか頑張って作りました(笑)

例えば日本語以外の言語で入力しても、文章から感情の判定をすることができます。

梅川：先ほどのじゃんけんアプリもそうですが、ストーリー立てて制作をしていらっしゃるのは素敵だと思います。

生成された画像をjpegでダウンロードできるのもいいですね！

石丸さん：
そうなんです。自分の感情でアートミュージアムを作りたいと思って、透過して保存できるようになっています。

初心者からのプログダクト開発からその後、どんなことに取り組んでいるの？

梅川：川口さんは在学中、石丸さんはすでに卒業していらっしゃいますが、現在はどんなことに取り組んでいらっしゃいますか？

川口さん：
今はジーズアカデミー半年間の集大成である卒業制作に取り組んでいます。

自分はずっとサッカーをやってきたので、もっと日本のサッカー業界が盛り上がって、みんなが楽しくプレイできるようなプロダクトを毎日作っています。

石丸さん：
私は卒業制作発表会で発表したものを元に実際に起業をして、法人の方に使ってもらえるよう営業をしています。

同期の方と共同で開発したんですが、卒業後も引き続き開発を手伝ってもらっています。

初心者からプログラミングスクールで学んで、身についたと思うこと

川口さん：自分に負荷をかけていく、やり切ることが身についたと思いました。

自分は何かにのめり込むことが苦手だったんですが、ジーズアカデミーは何日までに提出する、アウトプットの納期がしっかり決まっていたところがよかったと思います。そこまでに絶対にいいものを作り切ることができるようになりました。

石丸さん：私は起業のステップとしてすごく良かったと思いました。

最初は課題も締切ギリギリにならないと作れないんじゃないかと思っていたんですが、頑張ってやったらちゃんと完成・提出できるということを繰り返していきました。

起業してもうまくいかないことはたくさんあるけれど、プログラミングも頑張っていたらうまくいった、やり切れたという経験を得られたので、それは自分にとって大きな成功体験になりました。

梅川：ありがとうございます！

最後に、これからプログラミング・プロダクト開発に挑戦する皆さんへ一言いただけますか？

川口さん：プロダクトを作られる方の目的はそれぞれですが、これが世の中にあったらいいな、作りたいものが作れる力を手に入れるということは一生モノの遊び道具をゲットするようなものだと思います。

作れるようになること、期限までに作り切るということは人生の中でもいい体験になるんじゃないかと思います。

ジーズアカデミーはその挑戦に向いている環境なので、飛び込む勇気がある方はぜひ！

石丸さん：
プロダクトを作る前は、課題を頑張るのはプログラミングができるようになる・コードを書けるようになるためにやるという認識でした。

でもそれだけではありませんでした。例えば私のクラスは50名ぐらいいてあまり目立つこともできなかったんですが、課題を毎回頑張っているとクラスで知ってもらえるようになりました。

それがきっかけで「こんな人を紹介してみようかな」と同期から起業したい内容に関わる業界の方を紹介してもらったり、色々ないいご縁がありました。

そういう意味でも、ぜひ皆さんもプロダクト制作を頑張っていただけたらと思います。

いかがでしたでしょうか？

クリエイティブの精神を大切に、ものづくりのためのプログラミングを学びたいという方はぜひジーズアカデミーにお越しください！