ジーズアカデミー|起業家・エンジニア養成学校BECOME A GEEK WITH THE POWER TO CHANGE THE WORLD

ReadingReading読みもの

プログラミング初心者から始めるWebアプリ制作!どんなプロダクトが開発できる?イベントレポート

こんにちは!
ジーズアカデミー東京スタッフの藤井です。

ジーズアカデミーには、ご入学時点ではプログラミングを学ぶのはこれが初めてという方も多くいらっしゃいます。

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

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


【ご登壇者】
川口 慧大さん フルタイム総合LABコース11期現役生

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

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

ホテル業界でカスタマーサポート・マーケティングを行った後、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名ぐらいいてあまり目立つこともできなかったんですが、課題を毎回頑張っているとクラスで知ってもらえるようになりました。

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

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


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

驚くことに、記事内でご紹介した3つは全てご入学から1か月経たずに作られています。

ジーズアカデミーではこのように、実際に手を動かすことを重視しながらプログラミングを学んでいきます。創りたいものをつくりながら、プログラミング学習と共にエンジニアリングの精神を育んでいきます。

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

学校説明会では、プログラミング学習について触れる内容にもなっております。

刺激を受けながらサービスを創りたいという方は是非学校説明会にお越しください!

 

G's Academy

セカイを変えるWebサービスを日本から発信することを目指す、エンジニア起業家養成スクールです。

転職志望の方はもちろん、起業志望の方が多く通学しており、現役で活躍する一流エンジニアのメンターサポートをうけ、未経験から半年でオリジナルのTechサービスを開発。

卒業後資金調達に成功したスタートアップはわずか5年間で53社誕生し、総計66億超の資金調達に成功しています。

G's Academy

RECOMMENDおすすめ記事

プログラミングにおけるタイピングの重要性
REPORT

プログラミングにおけるタイピングの重要性

  • LAB
  • DEV
  • TOKYO
【優勝者レポート】プログラミング初心者からの全国合同GGA優勝。水野さんが過ごした半年間のG’sライフ!
REPORT

【優勝者レポート】プログラミング初心者からの全国合同GGA優勝。水野さんが過ごした半年間のG’sライフ!

  • TOKYO
  • FUKUOKA
授業スタート!未経験からのHTML、CSS!走り抜けた数週間!初回授業の様子!
REPORT

授業スタート!未経験からのHTML、CSS!走り抜けた数週間!初回授業の様子!

  • UNIT_YAMAGUCHI
GGA優勝者レポート_株式会社xCura新嶋さん
REPORT

GGA優勝者レポート_株式会社xCura新嶋さん

  • FUKUOKA
【イベントレポート】「これから学ぶプログラミング勉強法」ー教材あふれる現在の学習最適解とはー
REPORT

【イベントレポート】「これから学ぶプログラミング勉強法」ー教材あふれる現在の学習最適解とはー

  • LAB
  • DEV
  • TOKYO
現役エンジニアに聞く!フロントエンドエンジニアの役割と実務とは
REPORT

現役エンジニアに聞く!フロントエンドエンジニアの役割と実務とは

  • DEV
“GLOBAL GEEK AUDITION” G’s ACADEMY TOKYO FUKUOKA UNIT_SAPPORO 合同デモデー開催レポ ート_vol.2
REPORT

“GLOBAL GEEK AUDITION” G’s ACADEMY TOKYO FUKUOKA UNIT_SAPPORO 合同デモデー開催レポ ート_vol.2

  • UNIT_SAPPORO
成功するビジネスパーソンは「自ら手を動かす」ことから始める
REPORT

成功するビジネスパーソンは「自ら手を動かす」ことから始める

  • TOKYO
  • FUKUOKA
UNIT_YAMAGUCHI開校記念イベントを開催しました!
REPORT

UNIT_YAMAGUCHI開校記念イベントを開催しました!

  • UNIT_YAMAGUCHI
10月開校!UNIT_YAMAGUCHI会場をレポートします!
REPORT

10月開校!UNIT_YAMAGUCHI会場をレポートします!

  • UNIT_YAMAGUCHI
G’sACADEMY UNIT_YAMAGUCHIスタッフ紹介!
REPORT

G’sACADEMY UNIT_YAMAGUCHIスタッフ紹介!

  • UNIT_YAMAGUCHI
ゼロからアプリ開発をするための第一歩
REPORT

ゼロからアプリ開発をするための第一歩

福岡市主催/ジーズアカデミープロデュースの新プロジェクト 『データエンジニア・カタパルト』記者会見を行いました。
REPORT

福岡市主催/ジーズアカデミープロデュースの新プロジェクト 『データエンジニア・カタパルト』記者会見を行いました。

  • FUKUOKA
webサービス開発入門 -個人でwebサービスを開発するために必要なこととは-
REPORT

webサービス開発入門 -個人でwebサービスを開発するために必要なこととは-

卒業生向けオフィス支援・コワーキングを拡充しました。
REPORT

卒業生向けオフィス支援・コワーキングを拡充しました。

  • 卒業生支援
まっさらになってもう一度学び合える場所——52名の熱い想いが交差する | 週末集中DEVコース19期 入学式
REPORT

まっさらになってもう一度学び合える場所——52名の熱い想いが交差する | 週末集中DEVコース19期 入学式

  • TOKYO
大手SIer SEからWebエンジニアへ『転職したらホントに理想のエンジニア像を叶えられる?』
REPORT

大手SIer SEからWebエンジニアへ『転職したらホントに理想のエンジニア像を叶えられる?』

  • TOKYO
想いをカタチにし、社会とのつながりを取り戻すこと。それが「Deployする」ということなのかも知れない | GGA vol.17 レポート・優勝者インタビュー
REPORT

想いをカタチにし、社会とのつながりを取り戻すこと。それが「Deployする」ということなのかも知れない | GGA vol.17 レポート・優勝者インタビュー

  • TOKYO
現場管理者から起業・コンテスト優勝へ “プライドを脇に置き、続けていくことが新しい発見につながる” | event report
REPORT

現場管理者から起業・コンテスト優勝へ “プライドを脇に置き、続けていくことが新しい発見につながる” | event report

  • TOKYO
DXの意義や文化を理解し、社内での改革を後押しする。DXリーダーズ養成プログラムオンラインライブ授業開催レポート
REPORT

DXの意義や文化を理解し、社内での改革を後押しする。DXリーダーズ養成プログラムオンラインライブ授業開催レポート

  • BIZCOURSE
社内開発に踏み出すための3日間。社内開発スタートプログラム オンラインライブ授業開催レポート
REPORT

社内開発に踏み出すための3日間。社内開発スタートプログラム オンラインライブ授業開催レポート

  • BIZCOURSE
『第4次産業革命スキル習得講座』を活用してプログラミング学習を。-卒業時に最大70%キャッシュバック。
REPORT

『第4次産業革命スキル習得講座』を活用してプログラミング学習を。-卒業時に最大70%キャッシュバック。

  • LAB
  • TOKYO
  • FUKUOKA
福岡からセカイを変える【GLOBAL GEEK AUDITION Vol.5】
REPORT

福岡からセカイを変える【GLOBAL GEEK AUDITION Vol.5】

  • GGA
  • FUKUOKA
G’s Christmas Party 2020 in FUKUOKA
REPORT

G’s Christmas Party 2020 in FUKUOKA

  • FUKUOKA
  • 福岡
IVS LAUNCH PAD FinalでG’s 発スタートアップの『カミナシ』が優勝!快挙!
REPORT

IVS LAUNCH PAD FinalでG’s 発スタートアップの『カミナシ』が優勝!快挙!

北海道からセカイを変える“起業家エンジニア養成コミュニティ”「G’s ACADEMY UNIT_SAPPORO」2020年10月31日、遂に開校!
REPORT

北海道からセカイを変える“起業家エンジニア養成コミュニティ”「G’s ACADEMY UNIT_SAPPORO」2020年10月31日、遂に開校!

  • UNIT_SAPPORO
フルタイム総合LABコース、週末集中DEVコースの合同による『GLOBAL GEEK AUDITION』原宿新校舎にて初開催!
REPORT

フルタイム総合LABコース、週末集中DEVコースの合同による『GLOBAL GEEK AUDITION』原宿新校舎にて初開催!

初の東京校・福岡校合同開催『Global Geek Audition vol.15』の結果はいかに!?
REPORT

初の東京校・福岡校合同開催『Global Geek Audition vol.15』の結果はいかに!?

  • GGA
  • LAB
  • DEV
  • TOKYO
  • FUKUOKA
投資家・企業からの投票結果を公開!G’s HUB DAY 8th 開催レポート
REPORT

投資家・企業からの投票結果を公開!G’s HUB DAY 8th 開催レポート

  • GGA
  • LAB
  • TOKYO
暮らしや社会の変革に挑戦するプロダクト誕生の瞬間、GLOBAL GEEK AUDITION vol.14開催
REPORT

暮らしや社会の変革に挑戦するプロダクト誕生の瞬間、GLOBAL GEEK AUDITION vol.14開催

  • GGA
  • DEV
積み重ねてきた努力の先に生まれたプロダクトを発表!G’s HUB DAY開催レポート
REPORT

積み重ねてきた努力の先に生まれたプロダクトを発表!G’s HUB DAY開催レポート

それぞれが実現したいビジョンのために懸けた6ヵ月。GLOBAL GEEK AUDITION vol.13開催
REPORT

それぞれが実現したいビジョンのために懸けた6ヵ月。GLOBAL GEEK AUDITION vol.13開催

福岡からセカイを変える【GLOBAL GEEK AUDITION Vol.2 @福岡】
REPORT

福岡からセカイを変える【GLOBAL GEEK AUDITION Vol.2 @福岡】

IoT、ブロックチェーン、iOSアプリ…『G’s HUB DAY Vol.2』入賞プロダクト5選!
REPORT

IoT、ブロックチェーン、iOSアプリ…『G’s HUB DAY Vol.2』入賞プロダクト5選!

卒業制作メンター紹介!メンターLTレポート
REPORT

卒業制作メンター紹介!メンターLTレポート

【LAB3期】プログラミング未経験から6週間でサービスを創る!課題発表会!!
REPORT

【LAB3期】プログラミング未経験から6週間でサービスを創る!課題発表会!!

速報!【結果発表】GLOBAL GEEK AUDITION Vol.6
REPORT

速報!【結果発表】GLOBAL GEEK AUDITION Vol.6

【入賞者の発表!】GLOBAL GEEK AUDITION Vol.5
REPORT

【入賞者の発表!】GLOBAL GEEK AUDITION Vol.5

TAKUMI-EdTech ハッカソン開催!【石田大成社×ジーズアカデミー】
REPORT

TAKUMI-EdTech ハッカソン開催!【石田大成社×ジーズアカデミー】

【LABコース】未経験者がプログラミング学習2週間でつくったモノとは?
REPORT

【LABコース】未経験者がプログラミング学習2週間でつくったモノとは?

【資金調達、エンジニア転職への登竜門!!】GLOBAL GEEK AUDITION Vol.4.結果発表!
REPORT

【資金調達、エンジニア転職への登竜門!!】GLOBAL GEEK AUDITION Vol.4.結果発表!

プログラミングスキル『0』の方に向けた無料セミナー[G’s Nite] レポート
REPORT

プログラミングスキル『0』の方に向けた無料セミナー[G’s Nite] レポート

PROコース 中間制作発表会
REPORT

PROコース 中間制作発表会

【入賞者発表!】GLOBAL GEEK AUDITION vol.3結果について
REPORT

【入賞者発表!】GLOBAL GEEK AUDITION vol.3結果について

【第3期生いよいよ卒業!】GLOBAL GEEK AUDITION & 卒業式
REPORT

【第3期生いよいよ卒業!】GLOBAL GEEK AUDITION & 卒業式

【6.7開催】G’s ACADEMY TOKYOオープニングパーティー
REPORT

【6.7開催】G’s ACADEMY TOKYOオープニングパーティー

BEAMS_HACK Vol.2開催しました!
REPORT

BEAMS_HACK Vol.2開催しました!

G’s 設立1周年記念記念パーティ
REPORT

G’s 設立1周年記念記念パーティ

第2期 卒業式&GLOBAL GEEK AUDITION Vol.2結果発表!
REPORT

第2期 卒業式&GLOBAL GEEK AUDITION Vol.2結果発表!

ジーズアカデミー最大のイベント『GLOBAL GEEK AUDITION  Vol.2』が開催されました!
REPORT

ジーズアカデミー最大のイベント『GLOBAL GEEK AUDITION Vol.2』が開催されました!

GLOBAL GEEK AUDITION Vol.1 開催!結果発表!
REPORT

GLOBAL GEEK AUDITION Vol.1 開催!結果発表!

学校説明会
はこちら