名古屋市西区にあるA型事業所アルファサービスにてITチームとしてWebデザインやIT関連の業務ををしております YO です。
前回はデザインについて～としてデザインについてご紹介しました。
今回は打って変わってプログラミング作業についてご紹介します！
ITチームではデザインからプログラミングなど多彩な仕事を行っています。
プログラミングの主な作業としてはHP制作のコーディングなどが主となります。
私たちはWordpress開発を得意とし、日々オリジナルテーマを開発したり、HP作成したりなどしています！
しかし！つらつらPHPコードなんかを解説しても「ふーん、そうなんだ…」みたいになってしまいそうなので、今回はWEB制作の技術を応用してゲームを作ってみる！みたいなことをしてみようかなと思います！
WEB制作の現場が知りたい・・・！みたいな方がいらっしゃったらお気軽にリクエストしてください！（笑）
https://alpha-service-2030.com/contact/
WEB上で動くゲームをつくろう！
ということでゲームを作ってみましょう！
技術検証にはゲームはもってこいだよね！
今回のゲーム
ブログで遊べるブロック崩しを作ってみよう！
↑クリックしてゲームに飛べます！
が、まだボールが画面内を動くだけです（笑）
あれ？壊すブロックも無ければバーにも当たり判定がない…と思ったあなた！
安心してください仕様ですよ！次回以降どんどん機能を追加して作っていきます！
今回は、「構想～WEBで動く」ところまでを記事とします。
という事でざっくり要件をまとめます。
要件
- WEB技術を確認できるもの
- ブログ記事で動くもの
- 時間をかけず作る
- できれば誰でも作れるものがいい
- できれば楽しいものがいい
という方向性で行こうかな～
AIを使った開発
要件からWEB技術を使いながら、誰でも簡単に時間をかけずにつくりたい！
できるだけ簡単に開発するため、昨今進化がすさまじいAIを使った開発をしていこうと思います！
まずは、こう！
うーん凄い。
こんなざっくりとした相談にも鐘を打つがごとく良い返事をもらえます。
今回はWEB技術を応用したいので「React」を利用して開発をします！
いいヤツ…
とりあえずジャンルはブロック崩しでいこうかな
おお、セットアップから教えてくれるのはありがたい・・・！
開発準備
GPT君のエスコートであれよあれよとセットアップが進みます。
開発環境のセットアップは開発においておそらく一番最初の壁にして大多数において最大の壁です。
丁寧に教えてくれるので初めて開発する人や以前開発挫折したな～という方は是非お試しを！
こんな感じで本当に丁寧に教えてくれます。
しかしここで問題が！
設定で難しいところが・・・そんな時は
スクリーンショットを投げて聞いてみましょう！問・題・解・決！
キタコレ！WEBアプリが稼働しました！
ここからはソースを書いていきましょう！
コーディング
コーディングはCopilotというAIの力を借りて作っていきたいと思いますが、今回はWEBにリリースするまでを目標としてコーディングも一旦GPT君にやってもらいます。
Reactは実行部分には最初サンプルコードが記入されています。これを改造していくのですがGPT君はそこから丁寧に教えてくれます。
よしきた！まずはブロック崩し風の画面ができました！
今回で完成までは考えていないのでここからはWEB上にリリースする事をお願いしてみようかな！
リリース
リリースまで教えてくれるようです！
WEBで動けばあとはそれをどんどん改造していくだけなので、今回はこれで上出来でしょう！！
おお～WEB上で動いてる～！
んではブログに埋め込みましょうね～
おお～これでこのブログに組み込むとこまでやってくれるんだ～！
しかしここでトラブル！ブログの仕様で埋め込むことはできませんでした💦
でもWEB上ではあそべるので今回はここまでにしておこうかな！
今回はここまで
埋め込みは失敗しましたが、とりあえず０からWEB上で遊べるまでAIにエスコートしてもらって素早く簡単にリリースまでもっていけました。私の環境ではVSCodeなどインストール済みだったのでだいたい３０分くらいでしょうか。なにもない状態からでも上手くいけば１時間程度でここまでは可能かなと思います！興味がありましたらトライしてみてくださいね！
アルファサービスのITチームはホームページ作成など色々な事に挑戦しています。ご興味があったら一度遊びに来てみてくださいね！
