こんにちは。採用・研修業務を担当している今林です。

プログラミングを学び始めると、少しずつコードが読めるようになり、書けることも増えていきます。

その一方で、こんな疑問を感じる方もいるのではないでしょうか。

「学んだ技術は、どう組み合わせればよいのだろう」

「自分にも、アプリが作れるのかな？」

今回は、学んだ技術を組み合わせて作る「AI占いアプリ」をご紹介します。

FEコースで作る「AI占いアプリ🔮」

私たちの研修には、フロントエンドについて学ぶ「FEコース」があります。

FEコースではHTMLやCSS・JavaScriptを学習したのち、AI占いアプリを作成します。

AI占いアプリは、入力した情報をもとにAIが占い結果を生成するWebアプリです。

画面には、名前・生年月日・占いたいテーマ・キーワードを入力するフォームがあり、「占う」ボタンを押すと、入力内容がAIへ送られ、結果のタイトルとメッセージが画面に表示されます。

さらに、表示された占い結果を保存したり、不要になった結果を削除したりする機能も作ります。

これまで別々に学んできた知識が、実際のアプリの中でどのように関係しているのかを、手を動かしながら確かめることが出来ます。

一つずつ機能を組み立てていく

アプリ制作は、教材に用意された問題を一つずつ解きながら、コードを書き進めていきます。

まずはHTMLを使い、入力フォームや占い結果を表示する場所を作ります。

次にCSSを使って、フォームや結果カードの色、配置、見やすさを整えます。

そしてJavaScriptを使い、ボタンを押したときの処理や、表示内容の変更、占い結果の保存・削除などの機能を追加します。

一つずつ作っていた要素がつながり、実際に操作できるようになると、コード同士の関係も見えやすくなります。

「書き方を覚える」だけだった学習が、「目的に合わせて技術を使う」学習へ変わっていく瞬間です。

AIとつながる仕組みも体験する

占い結果の生成には、AIのAPIを使用します。

APIとは、ほかのサービスが持つ機能やデータを、自分のアプリから利用するための仕組みです。

今回のアプリでは、フォームに入力された情報をJavaScriptで取得し、サーバーへ送信します。サーバーはAPIを通じてAIと通信し、受け取った占い結果を画面に表示します。

利用者から見ると「占う」ボタンを押すだけですが、その裏側では、入力内容の取得、サーバーへの送信、APIを通じたAIとの通信、結果の受信、画面への表示という複数の処理が行われています。

分からないところがあれば質問しながら進め、最終的に一つのWebアプリとして動く状態を目指します。

実際に取り組んだ受講生の声

実際にアプリ制作へ取り組んだ受講生からは、次のような声が届いています。

手を動かしてコードを書く時間が長かったため、書き方などが身につきやすかったと感じています。

自分で手を動かしてサイトを作成することで、要素同士の関係や挙動をより深く理解することができました。

コードを読むだけでなく、自分で書き、ブラウザで動きを確認することで、理解が深まったという声がありました。

一方、アプリ制作では、環境構築や複数のファイルを組み合わせる場面など、初めてだからこそ迷うポイントもあります。

質問に対して分かりやすく説明していただけたこと、個々の速度に合わせて資料を展開していただけたことが良かったです。

AI占いアプリの環境構築や、分からないところを質問したときに分かりやすく教えていただき、そのおかげで無事に解決できたことが良かったです。

質問への回答を通して、疑問を解消できたという声も届いています。

また、完成させることだけでなく、自分の理解度に気づけることも実習の大切な役割です。

アプリ実習を通して、JavaScriptの記述の仕方をまだ十分に理解できていないことが分かりました。

「分からないことが分かった」という気づきは、次に復習する内容を明確にしてくれます。

うまく動かなかった経験も含めて、その後の学習につながる時間にしてほしいと考えています。

最後に

FEコースで作るAI占いアプリには、HTML・CSS・JavaScript・APIなど、これまで学んださまざまな内容が詰まっています。

別々に学んだ知識を組み合わせ、自分で操作できるアプリとして形にする。その経験を通して、コードを書く楽しさや、仕組みがつながる感覚を知ってもらえたら嬉しいです。

研修や未経験からのIT業界への挑戦に興味をお持ちの方は、ぜひお気軽にお話ししませんか？