Codexで開発してみる ver. 1
きっかけ
自分で、とあるものを作りたくて、Codexを使ってやってみようと思ったのがきっかけ。
YouTubeを使って真似して作ってみた
Expoとは?
Expoは、React Native(リアクト・ネイティブ)という技術を使ってモバイルアプリを開発しやすくするためのツールセットとプラットフォーム。
Codexとは?
Codexは、一言でいうと「人間の言葉を理解してコードを書いてくれるAI」。
ChatGPTを開発したOpenAIが作ったAIモデルで、特にプログラミングを助けることに特化しています。例えるなら、あなたの隣で、あなたが話す言葉(自然言語)を理解して、さっとコードを書いてくれる超優秀なコーディングパートナーのような存在。
開発前提条件
以下の用意ができていること
- Node.js
- 少しだけプログラミングやコマンドがわかっている、やったことがある
- ドキュメントに抵抗がないこと
- 統合開発環境がインストールされている
- プロンプトの作成方法が少しわかる
環境確認
Node.jsが入っていることを確認する。
ターミナルなどのコマンドツールを開いて、以下のコマンドを実行する。
node -v
バージョンが帰ってきたらOK。
開発 💻
任意のディレクトリに移動し、以下のコマンドを実行
npx create-expo-app@latest
実行すると、作成するディレクトリ名を聞かれるので、任意の名前をつける。
しばらくすると、以下のようなメッセージが表示される。

ディレクトリが出来上がっているか確認するのに、以下のコマンドを実行する。
ll
任意のディレクトリ名が表示されていればOK。
次に、そのディレクトリにコマンドを使って移動する。
cd 任意のディレクトリ名
移動したら、そのディレクトリに移動できているか確認する。
確認ができたら、以下のコマンドを実行して、テンプレートのソースコードをリセットする。
npm run reset-project

上記を実行すると、「リセットしても大丈夫っすか?」というメッセージがでてくるので、「いいっすよ(Yes)」を意味する「Y」を打って、return/Enterを実行する。
その後、自身の統合開発環境で、そのディレクトリを開く。
今回は、VSCodeを使用して開くと、以下のような画面になる。

以下のコマンドをVSCodeのターミナル上で実行する。
(この実行コマンドは、package.jsonファイルに記載あり。)
npm run start
実行し、ローカル環境で以下の画面が立ち上がったら成功。

Discussion