パソコンは、今や老若男女問わずほとんどの人が一度は触れた経験があると思います。
でも「プログラミング」となるとどうでしょう？
興味はあっても、実際にコードを書いたことがある人はごく一握りでしょう。
そして私自身もそのひとりです。
正直そう思っていましたし、今でもコードを読むことすらほぼできません。（現在進行形）
それでも、AIの力を借りて（利用して？）、一から構築した完全オリジナルのWebアプリを作ることができました。
本記事では、そんな私の1作目を紹介します。
アプリ概要
今回作成したのは、「診断アプリ」です。最近？だと、MBTI診断などが人気ですが、いわゆるそういう感じのアプリの簡易版です。
しかし、ただの診断アプリというわけではなく、本アプリは誰でも簡単に自分で診断が作成できます（むしろこっちがメインかも）。診断アプリというよりも「診断アプリ作成アプリ」といった方がいいかもしれません。
…とまぁグダグダと説明しても仕方ないので、まずはすぐに触れる完成アプリを載せておきます。この後、アプリの機能紹介などについて記載していきますが、説明書がなくても使いやすいアプリを目指して作成しましたので、とりあえず触ってもらえると嬉しいです。また記事の後半に、本アプリのコードやファイル一式を公開しているGithubのリンクを載せていますので、コードの中身を見てみたい方や、実際に自分のPCにDLしてローカル環境で起動させたい方はそちらを確認いただければと思います。
※ 管理ページのパスワードは「admin123」
開かない/見づらい場合は 新しいタブで開く
注意：
・アプリが起動するまでに少し時間が必要な場合があります。（数分程度）
・Windowsでの使用を前提に作成しています。（apple製品などでは、一部機能や表示が乱れる場合があります）
・ここでは画像アップロード機能は使えません。
アプリ機能の紹介
診断モード
まず表示されるのがメインのホーム画面。
ここに作成した診断が並びます。
カード左下の「はじめる」ボタンをクリックすると、診断ページに移ります。
すべての質問に答えると「診断する」ボタンが押せるようになり、結果ページに遷移します。
診断作成・編集モード
ヘッダーにある「管理」ボタンから、診断を作成したり、編集したりできるページに進みます。
絶対に必要だったかどうかはいまだにわかりませんが、なんとなくログイン機能を付けました。
初期パスワードは「admin123」です。
（環境変数設定の「.env」ファイル内で、PWは編集できます。ここでは詳しく説明しません）
ログインするとこのような診断作成・編集モードのホームのようなページに移ります。
新しく診断を作ったり、既存の診断を編集したりできます。
その他の詳しい機能については実際に触っていただければと思います。
アプリのソースコードとファイルのDLについて
今回紹介した診断アプリは、Githubでソースコードを公開しています。
興味のある方はぜひこちらをご覧ください。
また、このリポジトリから ソースコードをそのままダウンロードして、自分のPCで起動させることも可能です。
「自分でも試してみたい！」という方はぜひ挑戦してみてください。
※起動方法や初心者向けの解説は、別記事で順次まとめていきます予定です。
コメント