全くプログラミングを知らない人がAIの手を借りながら名刺交換アプリを作ろうとした件 part1

何で作ったのか

プログラミングの勉強をしたい（データベースも絡めたアプリを作ってみたい）と思ったので、やはり最良の方法は自分で作ることだなと思い、たったが吉日であった。
しかし自分が究極に飽き性なのは知っているので、最初から丁寧に作るのではなく、雑でも形にしてみるかくらいの意気込みでした。

なぜ名刺アプリだったのか？

どうせ作るならあんま世にないもののほうがいいんじゃねってことで色々調べていたところ、若者の使っていそうな名刺アプリは見受けられず、個人的に初対面で交換したかったりするSNSが多すぎて面倒だったので、全部まとめて交換できたら便利やなと考えた。

大まかなアプリの紹介

・QRコードで自分のプロフィールを共有できるようにしました。某インスタグラムのように、片方の人が読み込んだら無条件で読み込んだ側のプロフィールを相手に送るようにしました。
・また、ひっくり返す機能を実装して、裏に1日一回のみ更新できる写真投稿スペースを作りました。（某インスタリスペクト）
・ゲーミフィケーション要素として、交換回数や裏面更新回数などの回数によるトロフィー機能をつけました。
・画像はないですが、簡易的にSNSプロフィールを共有できる機能（ユーザーネームを入れるだけで良い）やテーマカラーを変えられる機能、タグ付けすることで他人の名刺をグループ分けできる機能などもついてます。

使用した技術スタック

React + Firebase + Node.js

フレームワーク、データベース、使用言語ともに特にこれを使った理由はありません。強いていうならChatGPTが勧めてきたからです。
唯一Firebaseを使ったのには理由があり、認証やデータベース、ホスティングなどを一つのプラットフォームで完結できる点が魅力で、「できるだけ手軽にアプリを形にしたい」という今回の目的に合っていたため採用しました。

基本的な構造

起動すると最初はregisterページに飛ぶようになっています。アカウントがある人はログインページに遷移できるようになっていて、アカウント認証はFirebaseの標準機能をそのまま使っています。

//RegisterPageのAuth
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, formData.email, formData.password);
      console.log('User registered with Firebase:', userCredential.user);

      await setDoc(doc(db, "users", userCredential.user.uid), {
        username: formData.username,
        email: formData.email,
        uid: userCredential.user.uid
      });

      localStorage.setItem('userId', userCredential.user.uid);
      localStorage.setItem('isNewUser', 'true');
      navigate(`/login/${userCredential.user.uid}`);
      console.log("User data saved to Firestore");
    } catch (error) {
      console.log('Error during registration:', error);
    }
  };

//LoginのAuth
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      localStorage.setItem('userId', userCredential.user.uid);   
      navigate(`/mypage/${userCredential.user.uid}`); // ここでリダイレクトを追加
    } catch(error) {
      console.error('Login error:', error);
    }
  };

  const handleGoogleSignIn = async () => {
    try {
      const result = await signInWithPopup(auth, provider);
      localStorage.setItem('userId', result.user.uid);
      navigate(`/mypage/${result.user.uid}`);
    } catch (error) {
      console.error('Google SignIn error:', error);
    }
  };

一旦飽きたのでここまで

作ってみて思ったこと

とりあえず作ってみる、自分の理想の機能が入ってるアプリを飽きる前に作ろうと思ってたので作成中は何も考えずに作ってしまったのが反省点でした。今思えば、もう少し機能ごとにファイルを分けたり、もうちょっとわかりやすくコーディングできたと思います。
自分的にはよくできたと思いますが、同時にAIを使いながら作っていく過程で、スキルの低い人は必要なくなっていくだろうなと感じました。
プログラミング勉強したいけど何すればいいかわかんねーって人はとりあえずアプリ作ってみるのがいいと思います。AIのコードをコピペするのもいいですが、「これはこういう意味なんだろうな」、「こういう書き方でこういうことができるんだな」みたいに考えながらやると勉強になると思いました。