はじめに：怖がらずに、動かすことから始めよう

こんにちは。Webエンジニアのsimonです。
プログラマ志望の皆さんは以下のようにプログラミングで悩んだ経験はないでしょうか？

「プログラミングを始めたいけど、何から勉強すればいいかわからない‥(´ω`)」

「色々と情報収集はしたけど、実際にどうやるかイメージが湧かない(T ^ T)」 

かつての私もそうでした。。。

なんとなくプログラミングが怖くて、本などを読んでインプットばかりしていたものの、本当の意味で開発ができるようにはなりませんでした。

しかしプログラミングは“知識”ではなく、“手を動かすこと”でしか身につきません。
今は想像しているよりもすぐにプログラミングで開発ができる時代です。
ならば、座学に時間をかけるより、最初から“作る”ことにフォーカスしてみましょう。

本記事では、事前知識がゼロに近い状態でも、簡単なアプリを作り、GitHubに公開するところまでをステップ形式でご紹介します。

生成AIを味方につけよう（ChatGPTのすすめ）

これからプログラミングや開発に取り組む中で、「聞いたことのない用語」や「詰まってしまう瞬間」はたくさん出てくると思います。
そんな時、今の時代にこそ活用したいのが生成AIです。

疑問をすぐに調べたり、コードの書き方を学んだり、壁を乗り越えるためのヒントをもらえたり。
生成AIは、エンジニアにとって心強い“相棒”になってくれます。

※本記事の「0から始める」の意図は、まず手を動かすことから始めて必要な知識を都度学んでいくことで、効果的にプログラミング開発を進めようというものです。
決して知識が全く要らないというわけではなく分からないことをその都度懸命に調べることは大切ですので、そのスタンスで読んでいただければ幸いです。

🔍 代表的な生成AIツール

• 💬 ChatGPT（OpenAI）
  　なんといっても使いやすく、回答が読みやすいです。
  　ユーザーにとても優しい回答もしてくれて、最近は感情面でも励まされることが多いです。
  　使いやすさとバランス◎

• 🌐 Gemini（Google）
  　回答速度がGPT以上に速く、また綺麗にまとまっている印象です。
  　Googleとの連携ができ、最新情報に強いツールです。なんとなく優等生的な印象。

• 🐦 Grok（X社 / Twitter）
  　GPTよりも回答の情報量が多く、知識に厚みがつきます（体感）。
  　GPTだけでは物足りなくなったあなたに。

ステップ①：まずは道具を揃えよう

最低限インストールするもの（Mac・Windows対応）

これらはすべて無料で使えるツールです。 最初から完璧に理解していなくても大丈夫。

必要になったときに調べればOK、くらいの気持ちで構いません。

🔧 インストールガイド

🔹 VsCode（Visual Studio Code）
https://code.visualstudio.com/ よりダウンロードし、インストール。
拡張機能「Japanese Language Pack for VS Code」「Prettier」「ESLint」も入れておくと便利

※Japanese Language Pack for VS Code：VsCodeの表記を英語から日本語に
Prettier：コードを見やすく整形
ESLint：コードの「間違い・危険・非推奨な書き方」をわかりやすく指摘

拡張機能は、VsCode画面の左メニュー（画像のオレンジ枠の箇所をクリック）から、検索してインストールすることができます。

🔹 Node.js
https://nodejs.org/ja から「LTS版（安定版）」を選んでインストール。

無事インストールが完了したら、node –versionとコマンドを打ってみましょう。
画像のようにコマンドが表示されたら、インストール成功です

🔹 Git
Macでは Homebrew、Windowsでは公式サイト(https://gitforwindows.org/)からインストール。

※HomebrewはMacにソフトを簡単に追加できる“アプリの自動インストーラー”です。
Macの方は以下を実行してください。

1.ターミナルを開く（cmd⌘+スペース →「ターミナル」と入力）

※ターミナルは、コマンドを打つことでPCに様々な命令を出すことができるMacのツールです

2.Homebrewが入っていない場合、以下のコマンドでインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3.以下のコマンドを入力して、Gitをインストール

brew install git

4.正しく入ったかを確認

git --version

git version 〜 という表示が出ればOKです。

🔹 GitHub
https://github.com/ で無料アカウントを作成。
➡️アカウント作成後、すぐに何かする必要はありません。
GitHubはコードの保存や共有に使うサービスで、アプリを作ってから活用します。

それでは、次のアプリ作成に移りましょう！

ステップ②：実際に開発環境を整え、アプリを作ってみよう

ステップ①で道具は揃いました。次は、実際にコードを書いてアプリ開発をする準備（環境構築）をし、アプリを作ってみましょう。

ここでは、Viteというツールを使ってVueアプリをサクッと作り、実際に「自分のPCでアプリが動く」体験をしてみましょう。

※Vueとは、Vue.jsというJavaScriptのフレームワークのこと。フレームワークというのはあるプログラミング言語について、便利な機能などをまとめた一連のプログラム・ツールのようなものです。

🔧 Vueアプリを作ってみる（Viteを使う）

npm create vite@latest my-vue-app -- --template vue

npm install

npm run dev

これらのコマンドを実行すれば、なんと開発環境構築ができてしまいます‥！
が、それぞれがどんなことをやっているのかを理解することが大事です。
分かりやすく分解してみます。

①npm create vite@latest my-vue-app — –template vue

ざっくり言えば、npmで、Viteの最新バージョンを使って、Vue.js のテンプレートで my-vue-app という名前のプロジェクトを作って！

という命令を伝えています。

実行すると何が起きる？

この段階で、何が起きたか確認してみましょう。

VsCodeの「開く」ボタンを押して（特定のフォルダを開くことができます）

画像のように、作成されたmy-vue-appフォルダを開きます
（先程のコマンドで、新しく作成されています）

すると、以下のようにフォルダの中に見たことのないファイルがたくさんできています！！

一体何が起きたのか？

実は、以下のようなことが一瞬で行われました。

（1）my-vue-app/ という名前のフォルダが作られる

（2）Vue + Vite 開発に必要なファイルが一式そろっている

（3）自分で設定ファイルをいじらなくても、すぐ開発を始められる状態になる

まさに魔法のコマンドです。本来、自分で色々と準備して揃えなければならないプログラムなどの一式が全て用意されました。あとは実際の開発までもう少しです。

②npm install

これはプロジェクトで必要なツールやライブラリを、自分のパソコンにインストールするコマンドです。
🔍 背景：Viteのプロジェクトには「依存」がある

npm create vite@latest my-vue-app — –template vue で作ったプロジェクトの中には、
**「このプロジェクトでは、これこれのツールを使いますよ」**というリストが保存されています。

それがこのファイル：

my-vue-app/
└── package.json

この中にはたとえば先ほどのものを見ると、次のように書かれています。

つまり「このプロジェクトでは Vue を使うよ」と宣言してあるだけの状態です。

でも、実際のVue本体はどこにもない…

npm create で作られたばかりの時点では、Vueの本体などの中身はまだ自分のPCにないんです。

だから必要なのが npm install というコマンドです。

🛠 npm install の役割

このコマンドを打つと、以下のことが行われます：

③npm run dev

一言で言えば、アプリを起動して、ブラウザで見られるようにするコマンドです。
npm install まで終わっている状態では、まだ「中身（ソースコード）」があるだけで、
それを見られるように動かす（実行する）状態ではないんです。

そこでこれを実行すると、Viteがあなたのプロジェクトを元に

🔸 開発用のWebサーバーを立ち上げる
→ localhost(ローカル開発環境) でアプリをブラウザ上に表示できるようになる

🔸 ソースコードをリアルタイムで読み込み・表示
→ 毎回リロードしなくても、すぐ画面が更新される仕組み

🔸 ファイルを変更すると即座に反映（ホットリロード）
→ コードを保存した瞬間に、変更内容がそのままブラウザに反映される

ということをしてくれます。

これだけで、ブラウザに http://localhost:5173 というページが表示されます。

Vueのロゴと「カウント」ボタンがあるシンプルな画面が出てきたら成功です。

画面で起きていること

⭐︎数字が「0」から始まり、ボタンを押すと増えていく

⭐︎画面が再読み込みされず、なめらかに数字だけが変わる

これがプログラミング開発のはじめの一歩です。

🔍 App.vue の中身を少しのぞいてみよう

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

💡 初心者向けポイント

※コンポーネントとは、「画面の部品」をひとつのパーツとして切り出したものです。
ボタン・見出し・プロフィールカード・投稿リストなど、再利用できるUIのかたまりをコンポーネントと呼びます。ファイル単位で作られるイメージです。

今回は、HelloWorld.vueを利用しているのがわかるので、それについても見てみましょう！

🔍 HelloWorld.vue の中身も見てみよう

💡 初心者向けポイント

ここで感じてほしいこと

🔸 ボタンを押すと数字が増える

🔸 {{ count }} の中に書いた変数が、実際にそのまま表示される
→ 「値が変わる」と「画面が変わる」がつながる

🔸 プログラムがどういうふうに動いているのか、イメージや雰囲気を掴む

次のステップでは、今作ったアプリを Gitで管理し、GitHubに公開する という体験に進みます。

ステップ③：自分の作ったアプリを世界に公開してみよう（Git & GitHub）

さて、アプリが手元で動くようになったら、次のステップは **「他の人にも見てもらえるようにすること」**です。

そのために使うのが Gitと GitHubです。

（復習）

🔸 Git
自分のコードの変更履歴（バージョン）を管理する道具。

🔸 GitHub
Gitで管理したコードをインターネット上に保存・共有できる場所。

「Gitで記録 → GitHubにアップロード」することで、 自分のアプリを他の人にも見てもらえる状態にできます。

🛠 実際にやってみよう（コマンド一覧）

まず、ターミナルでプロジェクトのフォルダ（my-vue-app）に移動した状態で、以下を順番に実行します。

git init 

git add .

git commit -m "初回コミット"

🔸git init
→Gitで記録を始めると宣言するコマンド

プロジェクトフォルダを「Git対応のノートブック」に変える感じです。

⭐︎.git という隠しフォルダが作られます（これがGitの記録システム）

⭐︎ここからはGitがファイルの変化を追えるようになります

🔸git add .
→現在のファイルの変更点をgitの作業エリアに記録するコマンドです。

🔸git commit -m “初回コミット”
→作業エリアの内容をリポジトリ（gitのバージョンが記録されていく場所）に反映するコマンドです。

-m “初回コミット”でコミット内容に「初回コミット」という名前をつけていることになります。

これでローカルにGitの履歴ができました。

次にGitHubで新しいリポジトリ（空の入れ物）を作成し、表示されたURLをコピーします。
（例：https://github.com/your-name/my-vue-app.git）

そして以下を実行：

git remote add origin https://github.com/your-name/my-vue-app.git

git branch -M main

git push -u origin main

これであなたのアプリが世界に公開されました！

GitHubのページを開くと、App.vueなど、作ったコードが見えるはずです。

実際のWebアプリの開発でも、大きな手順は同じです。どのように環境構築をして、アプリを作り、それを世の中に公開するかイメージが持てたのではないでしょうか？

もちろん、今の流れの中でさらに学ぶことや追加して行っている作業などはありますが、全体の流れが分かっていれば、どのようなことを肉付けしていけばいいかイメージしやすくなると思います。
実際の開発の流れを体験し、さらにどのようなことが必要か、どうしたらより良い開発ができるかなど、皆さんも学びを深めてみてください！

simon

GPTをこよなく愛するWebエンジニア

初級Webエンジニアsimonです。

生成AIが大好き。休日もChatGPT、Gemini、Grokたちと戯れています。

最近GPTに助言をもらいながら2ヶ月で6kgのダイエットに成功。

以前の趣味は読書で、昨年末に銀河英雄伝説の文庫本を購入し綺麗に部屋に飾っています。
いつになったら読むのか。。。