開発環境ゼロから作る、Hello Worldへの道

プログラミング、最初の一歩の踏み出し方が分からない方向け。macOS環境で、ゼロから「Hello World!」が動くところまでをまとめました。

1st STEP - エディタを用意する

VSCode / Cursorをダウンロード

まずはコードを書くためのエディタを入れます。おすすめはVSCodeかCursorの2択です。

VSCodeはMicrosoftが作っている無料のエディタで、世界中の開発者が使っています。

CursorはVSCodeをベースにAI機能を強化したエディタです。見た目や使い方はほぼ同じなので、どっちを選んでも大丈夫です。（私はCursor）

VSCode：https://code.visualstudio.com/
Cursor：https://cursor.sh/

Cursorの画面構成

左側：ファイル一覧が見えるエリア。gitの差分もここで確認できます
下側：ターミナル。コマンドを打つ場所です

最初はこの2つだけ覚えておけば十分です。

ターミナルの開き方

画面の上のメニューから「ターミナル」→「新しいターミナル」で開けます。ショートカットは Control + Shift + ^ です。ターミナルはこの先ずっと使うので、開き方だけ覚えておいてください。

2nd STEP - 開発に必要なツールを入れる

Gitをインストールする

macOSは初期状態だとGitが入っていません。ターミナルを開いて、以下のコマンドを実行します。

xcode-select --install

ポップアップが出るので「インストール」を押して待ちます。数分かかることもあるので気長に。完了したら確認してみましょう。

git --version

バージョンが表示されればOKです。

（Windowsの場合は Git for Windows をダウンロードしてインストールすればOKです）

Homebrewをインストールする

Homebrewは、macOS用のパッケージマネージャーです。開発に必要なツールをコマンド一発でインストールできるようになります。

Homebrew公式サイトに載っているインストールコマンドをターミナルに貼り付けて実行してください。

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

完了したら確認。

brew --version

（Windowsの場合はHomebrewは不要です。各ツールは公式サイトから直接ダウンロードできます）

3rd STEP - hello worldを作る

作業用フォルダを作る

まず、コードを置く場所を決めます。ターミナルで以下を実行してフォルダを作りましょう。

mkdir -p ~/projects/hello-world

Cursorの「ファイル」→「フォルダーを開く」から、今作った hello-world フォルダを開きます。

HTMLでhello worldを書いてみる

Cursorの左側で「新しいファイル」を作成して、index.html という名前で保存します。中身はこれだけでOKです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>はじめてのページです。</p>
  </body>
</html>

ブラウザで確認する

保存したら、Finderから index.html をダブルクリックするとブラウザで開けます。「Hello World!」が表示されていたら成功です。

Cursorに拡張機能「Live Preview」を入れると、エディタ上でプレビューが見れるのでおすすめです。

（番外）AIに作ってもらう

Cursorを使っているなら、AIに作ってもらうこともできます。ターミナルの横にあるチャット欄に、こんな感じで頼んでみてください。

HTMLでシンプルなhello worldページを作って

これだけで動くコードを生成してくれます。

4th STEP - GitHubにコードを上げる

ここからは、お試しで遊ぶだけなら飛ばしてもOKです。ただ、学習を進めてエンジニアを目指すなら必須の手順です。

GitHubは、コードを保管・管理するためのサービスです。過去の作業履歴が残るし、失敗しても元に戻せるし、チーム開発でも欠かせません。

GitHubアカウントを作る

GitHub にアクセスして「Sign up」からアカウントを作成します。メールアドレスとユーザー名を決めるだけなので、数分で終わります。

Gitの初期設定をする

ターミナルで、commitに表示される名前とメールアドレスを設定します。

git config --global user.name "Taro Tanaka"
git config --global user.email "tanaka.taro@examle.com"

GitHubに登録したメールアドレスと揃えておくのがおすすめです。

GitHubでリポジトリを作る

GitHub にログインして、右上の「+」→「New repository」をクリック。Repository nameに hello-world と入力して「Create repository」を押します。

作成後に表示されるページに、次のステップで使うURLが載っています。https://github.com/ユーザー名/hello-world.git という形式のやつです。これをコピーしておいてください。

git initしてリモートを接続する

先ほど作ったhello-worldフォルダのターミナルで、以下を順番に実行します。

git init
git remote add origin https://github.com/ユーザー名/hello-world.git

git init で今のフォルダをGitの管理下に置いて、git remote add でGitHub上のリポジトリと紐づけています。URLは先ほどコピーしたものに置き換えてください。

first commit & push

いよいよ最初のpushです。

git add .
git commit -m "first commit"
git push -u origin main

初回のpush時にGitHubのユーザー名とパスワードを聞かれます。パスワードにはGitHubの Personal Access Token（個人アクセストークン）を入力してください。GitHubのパスワードそのままでは認証できないので注意です。

トークンは「Settings」→「Developer settings」→「Personal access tokens」→「Tokens (classic)」から発行できます。scopeは repo にチェックを入れればOKです。

GitHubのリポジトリページを開いて、さっき作った index.html が表示されていれば完了です。お疲れ様でした！

今後も区切りのいいところでcommit & pushしておくと、作業履歴が残って安心です。gitコマンドをもっと知りたい方は gitの名称・コマンド説明まとめも参考にしてみてください。

まとめ

ここまでできたら、開発を始める環境は整った状態です。エディタがあって、ターミナルが使えて、GitHubにコードを上げられる。あとは作りたいものに合わせて言語やフレームワークを選んでいけばOKです。最初のhello worldはゴールではなくスタート地点なので、ここからどんどん手を動かしていきましょう。