VS Code公式
Visual Studio Code のダウンロードと基本情報です。最初の導入はここから進めます。
リンク先: code.visualstudio.com 公式サイトを開く初心者向け / 見れば流れがわかる構成
入れる → 開く → 追加する → ログインする
このページは、VS Codeをまだ触ったことがない人でも、 Codexを使い始めるまでの流れを視覚で理解できるように作っています。
公式リンクはすべて別タブで開く設定にしています。リンク先は VS Code公式、OpenAI公式、Codex拡張機能案内に絞っています。
VS Code のイメージ
拡張機能で検索
Codex
Codex
OpenAI のコーディング支援
導入後の流れ
1. Install
2. Sign in
3. Promptを書く
4. Codexが手伝う
① VS Codeを入れる
② 拡張機能を開く
③ CodexをInstall
④ ログインして開始
Step Guide
5ステップで開始
01
VS Codeをダウンロード
まずは Visual Studio Code の公式サイトを開いて、自分のOS向けのボタンを押します。
-
公式サイトを開く
-
自分のOSのダウンロードボタンを押す
- インストーラーを保存する
補足: WindowsでもMacでも、まずは通常の安定版で十分です。
Download Visual Studio Code
Windows / macOS / Linux
02
VS Codeをインストール
ダウンロードしたファイルを開いて、そのまま案内どおり進めれば基本は完了です。
- インストーラーを開く
- 「次へ」を進める
- インストール後にVS Codeを起動する
補足: 最初は標準設定のままで問題ありません。
使用許諾に同意 →
保存先を確認 →
Install を押す →
03
Codex拡張機能を入れる
VS Codeの左側にある「拡張機能」を開き、Codex を検索して追加します。
-
左の拡張機能アイコンを押す
-
検索欄に Codex と入力する
-
Codex を見つけて Install を押す
補足: OpenAI公式案内ページから確認しながら進めると迷いにくいです。
Codex
Codex
OpenAI extension
04
ログインして使い始める
インストール後、Codexパネルを開いて OpenAIアカウントでログインします。
-
Codexパネルを開く
- 自分のchatgptアカウントでSign in
- 表示された案内に沿って認証する
補足: Codexは ChatGPT Plus / Pro / Business / Edu / Enterprise で利用できます。
Sign in to Codex
OpenAIアカウントで認証
05
最初の一言を送る
準備ができたら、やりたいことをそのまま日本語で書けば使い始められます。
- このフォルダに簡単なHTMLを作って
- このエラーの原因を教えて
- ボタンを青くして
補足: 専門用語よりも「何をしたいか」を書くほうが伝わりやすいです。
このフォルダに自己紹介サイトを作って
このエラーの原因を初心者向けに説明して
ボタンをもっと見やすくして
Official Links
外部リンク
OpenAI Codex IDE
Codex を IDE で使うための公式案内です。VS Code 上での導入イメージを確認できます。
リンク先: developers.openai.com 公式ガイドを開くOpenAI Codex Quickstart
最短で使い始めたい人向けの導入情報です。セットアップ後に確認すると流れが整理しやすいです。
リンク先: developers.openai.com Quickstartを開くFirst Prompts
最初に打つと楽な言葉
例 1
このフォルダに自己紹介サイトを作って
例 2
このエラーの原因を初心者向けに説明して
例 3
ボタンをもっと見やすくして
Trouble
つまずきやすいところ
Codex が見つからない
拡張機能の検索で「Codex」と入れ直してください。VS Codeを再起動すると表示されることがあります。
ログイン画面が出ない
Codexパネルを開き直すか、拡張機能を一度無効にしてから再度有効化してください。
何を書けばいいかわからない
「何を作りたいか」「今どこで困っているか」を1文で書けば十分です。
Summary
結局やることは4つだけです
VS Codeを入れる
拡張機能でCodexを探す
Installする
ログインして依頼を書く