🤖

Codexで開発してみる ver. 1

に公開

きっかけ

自分で、とあるものを作りたくて、Codexを使ってやってみようと思ったのがきっかけ。

YouTubeを使って真似して作ってみた

https://youtu.be/Y15kBuMhCO4?si=1SfcD6CLwnnDgHF8

Expoとは?

Expoは、React Native(リアクト・ネイティブ)という技術を使ってモバイルアプリを開発しやすくするためのツールセットとプラットフォーム

Codexとは?

Codexは、一言でいうと「人間の言葉を理解してコードを書いてくれるAI」。

ChatGPTを開発したOpenAIが作ったAIモデルで、特にプログラミングを助けることに特化しています。例えるなら、あなたの隣で、あなたが話す言葉(自然言語)を理解して、さっとコードを書いてくれる超優秀なコーディングパートナーのような存在。

Codex doc

開発前提条件

以下の用意ができていること

  • 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