Zenn
💪

筋肉ムキムキだった頃の僕とジャンケンが出来るというクソアプリを作った話

2025/03/27に公開
Next.js
Node.js
React
TypeScript
Vercel
tech

はじめに

この記事を開いたときに皆さんはこう思ったことでしょう。

「この人は一体、何言ってるんだ？？？」

その気持ち、良くわかります。
なぜなら僕自身も同じことを思っているからです。

この記事の趣旨は至って真面目で、初めてTypescriptやReactを使って自作アプリを公開してみたい人向けの記事となっております。

特にこれからプログラミングを始める人や業務経験が浅いが新しい技術をキャッチアップしなければいけない人に役立つキャッチアップ法もお伝えしていきます。

  • 僕については以下のような感じです。
    • 僕は現役のWEBエンジニアで、担当業務は要件定義から設計・実装・運用まで全てを担当しています。
    • 担当レイヤーは特になくて、フロントエンドもバックエンドもやりますし、インフラ周りもやっています。いわゆるフルスタックエンジニアかもしれませんが、恐れ多いのでマルチスタックエンジニアを名乗らせてください。(つまりなんでもやらされる系エンジニアです)
    • 実務経験は約1年半
    • メインスタックは以下
      • PHP
      • Laravel
      • javascript
      • Jquery
      • MySQL(MariaDB)
      • AWS
      • Linux(特にredhat系)
    • Laravelを使用した自作アプリを全行程を全て自力で行い公開までできるレベル
    • TypescriptやReactは興味があるが、まだ使ったことがない

実務ベースでは上記の通りで他には以下のようなバックボーンもあります。

  • 最初に経験した言語はJava
  • ITエンジニアに転職する前に基本情報技術者試験に合格
  • ITエンジニアとして最初に経験した業務は開発ではなくて運用業務を2年
  • 運用業務を効率化するために主にVBAやバッチ・powershellを使ってツール開発を自主的に行っていた
  • 前職の運用業務の内にjava Silver SE8 を取得したが、結果今までJavaは使っていない

僕のことについてはこんな感じです。
とはいえ、このようなバックボーンが無くても実践できるようになるべく分かりやすく執筆してきますのでよろしくお願いします。

さて、本題に移ります。

本題

前提

開発環境は以下の通り

  • OS: windows11 pro
  • IDE: Visual Studio Code
  • shell: git bash
  • nodejs: v18.20.5
  • npm: 10.8.2
  • react: 19.0.0
  • typescript: 5系
  • nextjs: 15.1.3

そもそもなぜそんなクソアプリを作ったのか

元々はTypescriptやReactを使って何か作って公開までしてみようと言うところから始めました。

そしてその為に何を作ろうかと思ったところで今まで使ったことがない技術だったので、簡単なアプリを作ろうと思い簡単なじゃんけんアプリを作ることにしました。

そうです。ここまではまだ何の変哲もないただの簡単なじゃんけんアプリでした・・・。

思いのほか短期間で上記の何の変哲もないただの簡単なじゃんけんアプリがリリース出来たので、それを友人に見せることにしました。

そして、それを触った友人は言いました。

友人は言った
じゃんけんに負けたときにお前のドヤ顔出てくるようにしようぜ！

たった、この一言が何の変哲もないただの簡単なじゃんけんアプリをクソアプリに変えたのです。

そして、僕も言いました。

僕は言った
これ、セリフ必要やな。

そうして洗練されたクソアプリが作られたのでした。

先に結論、この記事では何を伝えたいのか

  1. nextjsとvercelの組み合わせはすごい！ここまで簡単にアプリをリリース出来るとは！
  2. 実はこのクソアプリ初版リリースまで半日で出来ました！
  3. このクソアプリ、完全に出オチだけどみんな笑ってくれました！
  4. nextjsとvercelの組み合わせは業務未経験の初心者に丁度いいのでは！？
  5. 最初は簡単でもクソアプリでもいい。とにかく動くものを公開してみよう！
  6. 技術未経験でも勉強が足りなくても動くアプリの作り方を教えちゃうよ！

以上が、この記事の本旨です。
興味を持って頂いたのであれば、このまま読み進めて頂けると幸いです。

いよいよ本題中の本題

ここからはTypescriptやReactを使ったことがない技術未経験者向けに僕が実際に実践したアプリの作り方や公開までの方法を説明していきます。

先に言いますが、クソアプリ作成を推奨しているわけではありません。
なんとなく作りたいアプリのイメージがあればそれを優先してこの先の記事をそれに置き換えて読んでください。

1. 何を作るのかを決める

僕の場合はじゃんけんアプリでした。
皆さんは自分の好きなものを作りましょう。

作りたいものは特に思い浮かばないな・・・
そう思っている方にオススメするのはchatGPTに相談することです。

だいたい以下のような候補があると思います。

  • TODOアプリ
  • じゃんけんアプリ
  • タイマーアプリ
  • 名言集アプリ

2. それをどのように作るのかを決める

はい。いわゆる技術選定です。
そのアプリはどのような技術の組み合わせで作るのか？
作ったアプリはどの技術やプラットホーム等で公開するのか？
そういったことを決めていきます。
いきなりレベルが爆上がりしたと思うかもしれません。

安心してください。同じ立場でそういわれたら僕も同じように思います。
そう思っている方にオススメするのはchatGPTに相談することです。

当然、僕も全然分からないのでchatGPTに相談しました。

相談した結果、もっと訳が分からなくなりました。

こうなった時はその分野に対する基本的な知識が不足していると思います。
そういう時は体系的に知識を集める必要があるため技術書を読みました。

僕なりの技術書の選び方についてですが

  • はじめての～　は読みやすいが知りたいところまで解説がない場合が多いため避ける
  • 実践～　は少し読みにくいが基本的な事が体系的にまとめらている場合が多いため推奨

実践～系で読めなかった時は根本的な理解が足りていないと思うので、その場合ははじめての～系を読んでから実践～系を読んだりします。

そしてなんとなく体系的に理解が出来たらもう一度chatGPTに相談します。
こうすると最初に比べてどんな選択肢があるのかある程度理解できるようになっているはずです。

僕も色々やってみましたが、結論nextjsとvercelの組み合わせが最も簡単な選択肢でした。

よって、nextjsでアプリを作り、vercelで公開していきます。

3. nextjsの開発環境構築

ここの記事を参考にすると良いと思います。
https://zenn.dev/naoji/articles/nextjs-10minitues-installation-0010

  1. Node.js(v18.20.5)をホームページからダウンロードしてインストール
  2. npxをインストール(npm i -g npx)
  3. npx create-next-app@latest my-next-app でNext.jsプロジェクトを作成
  4. npm run dev で開発サーバーを起動
  5. コードを編集するためvscodeをホームページからダウンロードしてインストール (インストール済みの人は作業不要)

4. nextjsでアプリを作る

さぁ、いよいよReactやTypescriptを使ってアプリを作っていきます。

では、サクッとコーディングしていきましょう！
そんな簡単に出来たら苦労しねぇよ！！
って思う方も勿論いるでしょう。
大丈夫です。僕も同じように思っています。
そう思っている方にオススメするのはchatGPTに相談することです。

4.1 基本的な実装手順

  • まずはchatGPTにプログラムを書いてもらう
    細かい説明付きでプログラムを書いてくれます。
    どのようなファイル形式でどこにそのファイルを置くかも大事なことです。
    分からなかったらそれも聞いてみましょう。

    ちなみに、.tsxにするのが簡単です。

  • 書いてもらったプログラムを実際に実行してみる
    とりあえず動かしてみましょう。
    http://localhost:3000にブラウザでアクセスします。

    実際に色々触ってみましょう。
    思った通りに動いていればアプリの完成です。

    もし、思ったように動いてないようであればchatGPTに修正依頼を出してみましょう。
    それを繰り返すとおのずとアプリが完成していくことでしょう。

4.2 実装した機能

僕が作ったアプリは以下のような機能を持っています

  • じゃんけんの基本機能

    • グー、チョキ、パーを選択可能
    • コンピュータと対戦
    • 勝敗判定

  • クソアプリ要素

    • 負けた時に僕のドヤ顔が表示
    • ドヤ顔と共にセリフも表示

5. アプリの公開

5.1 GitHubへのプッシュ

  1. GitHubのアカウントを作成（既に作成済みの人はスキップ）
  2. 新しいリポジトリを作成
  3. ローカルのコードをプッシュ

5.2 Vercelへのデプロイ

  1. Vercelのアカウントを作成（既に作成済みの人はスキップ）
  2. GitHubのリポジトリと連携
  3. デプロイボタンを押すだけ

これで公開完了です！
Vercelが自動的にデプロイを行い、URLが発行されます。

6. 技術的な学び

このアプリを作る過程で学んだこと

  • TypeScriptの基本

    • 型定義の重要性
    • コンポーネントの型付け

  • React/Next.jsの基本

    • コンポーネントの作成方法
    • ステート管理
    • ルーティング
    • 画像の扱い方

  • Vercelの便利さ

    • 自動デプロイ
    • 環境変数の設定
    • ドメイン設定

さいごに

色々書きましたが、ぶっちゃけ一番難しかったのはアプリ開発よりも画像編集の方でした。

Discussion

ログインするとコメントできます