【AI開発日記 #2】プログラミング未経験。まず開発環境を整えてみる

2026年7月18日

当ページのリンクには広告が含まれています。

URLをコピーしました！

冒頭

第1話では、AIと一緒に投資ツールを作ることを決めました。

でも冷静に考えると…

「俺、プログラミングしたことないじゃん。」

まず最初の壁はそこでした（笑）

とりあえずAIに聞く

とりあえずチャットGPTに質問してみました。

本当にこれで大丈夫かな？

いきなり答えを教えてくれると思っていたら、逆に質問されました（笑）

開発環境を整えるのに何が必要か聞いてみました

そこで、まずはAIに「開発環境を整えるには何が必要なのか」を聞いてみることにしました。

「VS Code」という名前は聞いたことがありましたが、実際に使ったことはありませんでした。

ですが、AIの回答を見て驚いたのは、「思っていたより準備するものが少なかったこと」です。

「これなら自分でも始められるかもしれない」と少し安心しました。

AIに教えてもらい、まずはVS Codeをインストール

AIに教えてもらった開発環境の中で、最初に導入したのが**Visual Studio Code（VS Code）**でした。

正直、この時の私は「名前は聞いたことがある」くらいの知識しかありません。

「プログラミングをする人が使うソフト」というイメージだけで、本当に自分が使う日が来るとは思っていませんでした。

そこでAIの案内どおりに公式サイトへアクセスし、インストールを開始します。

インストール自体は特に難しいところもなく、数分で完了。

AIに勧められたのでGitHubのアカウントも作成しました。詳しい役割は今後使いながら覚えていきます。

初回起動時は英語表示でしたが、日本語化も数クリックで完了しました。

詳しい手順は公式サイトや多くの解説記事があるので、ここでは省略します。

「もっと専門的で難しい作業があるのかな」と身構えていたので、拍子抜けするくらい簡単でした。

「ここでつまずいたらどうしよう…と思っていましたが、意外と普通のソフトをインストールする感覚でした。」

VS Codeって何？

簡単に言えば、プログラムを書くためのメモ帳のようなソフトです。

もちろん普通のメモ帳でもHTMLを書くことはできますが、VS Codeは色分け表示や補完機能などがあり、初心者でも間違いに気付きやすいのが特徴です。

AIもVS Codeを前提に説明してくれることが多いため、これからAIと一緒に開発を進めるなら入れておいて損はないと感じました。

VS Codeを起動して、最初のHTMLファイルを作ってみる

VS Codeのインストールと日本語化が終わったので、いよいよ実際にファイルを作ってみます。

この時点では、まだ何か難しいプログラムを書くわけではありません。

まずは、Webページの土台になるHTMLファイルを1つ作ることが目標です。

作業用のフォルダを用意する

最初に、これから作るファイルをまとめて保存するためのフォルダを作りました。

今回は分かりやすく、フォルダ名を次のようにしました。

SwingTradeTool

フォルダ名は日本語でも作れますが、今後エラーや文字化けを避けるため、英数字で付けておく方が無難なようです。

私はMacの「書類」フォルダの中に作成しました。

VS Codeでフォルダを開く

次にVS Codeを起動し、画面上部のメニューから、

「ファイル」→「フォルダーを開く」

を選びます。

先ほど作ったSwingTradeToolフォルダを選択して、「開く」をクリックしました。

VS Codeでは、作成するファイルを単体で開くこともできます。

ただ、Webツールは今後HTMLやCSS、JavaScriptなど複数のファイルを使う予定なので、最初から作業用フォルダごと開いておく方が管理しやすいようです。

VS Code公式の入門ガイドでも、まず作業用フォルダを作り、フォルダ単位で開く方法が案内されています。(Visual Studio Code)

新しいHTMLファイルを作る

フォルダを開くと、画面左側に「エクスプローラー」が表示されました。

エクスプローラーは、作業中のファイルやフォルダを一覧で確認する場所です。

フォルダ名の右側にある新しいファイルのアイコンをクリックし、ファイル名を入力します。

今回は、

index.html

という名前にしました。

「index」は、Webサイトの最初に表示されるページによく使われる名前だそうです。

また、最後に.htmlを付けることで、VS CodeがこのファイルをHTMLとして認識してくれます。

ファイルを1つ作っただけですが、いよいよ開発が始まった感じがして少しワクワクしました。

HTMLを書いてみる

作成したindex.htmlをクリックすると、右側に何も書かれていない編集画面が開きました。

まずは、本当にWebページとして表示できるのか確かめるため、次のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スイングトレード管理ツール</title>
</head>
<body>
  <h1>スイングトレード管理ツール</h1>
  <p>AIと一緒に開発を始めました。</p>
</body>
</html>

コードの意味は、この時点ではほとんど分かっていません（笑）。