【初心者向け】GitHub上でJavaScriptコードを公開する方法｜最初のプロジェクトを作成しよう

GitHub
2025.06.29

「GitHubでアカウントを作って、リポジトリも作った。でもその先、何をどう進めればいいかわからない…」そんな方へ向けて、本記事ではJavaScriptのシンプルなコードを使い、GitHubに初めてのプロジェクトを公開する体験をステップバイステップで案内します。

コマンド操作に慣れていない方でも、**ブラウザだけでできる方法（GUI）**と、**コマンドラインを使った方法（CLI）**の2つを丁寧に解説します。

目標は、「GitHubに自分のコードを載せて公開できた！」という体験を得ること。小さな一歩ですが、これが大きな自信につながります。

今回作るサンプル

// main.js
const today = new Date();
console.log(`今日は ${today.toLocaleDateString()} です`);
JavaScript
  • 動作内容：実行すると、現在の日付をコンソールに表示します。
  • 目的：処理はシンプルですが、「コードを書いた → 公開した」という経験を通じて、GitHub活用の全体像をつかむのが目的です。
  • 他言語との互換性：PythonやPHP、Javaなど、どの言語でも似た構成で応用できます。

プロジェクトフォルダの準備（ローカル共通）

✅ 手順

  1. デスクトップなどに新しいフォルダを作成：my-first-project
  2. フォルダ内に main.js ファイルを作成
  3. 上記のコードをそのまま記述し、保存します

これで、プロジェクトの“中身”が完成しました。

方法A：GitHubのGUI（Web画面）だけでアップロード

A-1. GitHubで新しいリポジトリを作成

  1. GitHubにログイン後、https://github.com/new にアクセス
  2. リポジトリ名に「my-first-project」など任意の名前を入力
  3. 「Add a README file」に必ずチェックを入れておきます（理由：後述）
  4. 「Create repository」で作成

A-2. ファイルをアップロードする

  • リポジトリ画面の「Add file」→「Upload files」をクリック
  • 表示されたアップロード画面に、ローカルで保存した main.js をドラッグ＆ドロップします
  • ファイルが正しく読み込まれると、画面下にファイル名（main.js）が表示されます。
  • その下にある「Commit changes」セクションで以下を設定します。
    CommitメッセージはそのままでもOKですが、初回アップロードなどに書き換えると履歴が分かりやすくなります。
    ブランチの選択肢が2つありますが、基本は「mainブランチに直接コミット」で構いません（デフォルトのまま）
  • 緑色の「Commit changes」ボタンをクリックすればアップロード完了です。
  • 正しく反映されると、リポジトリ画面に main.js が表示されるようになります。

※GitHubのWebインターフェース（ドラッグ＆ドロップや「ファイルを選択」）では、一度にアップロードできるファイル数が100個までに制限されています。GitHubは本来「Git」でアップロード・管理する仕組みです。「Git」でアップロードすれば、ファイル数の制限は事実上なくなります。

A-3. アップロード結果を確認

GitHubリポジトリページに main.js が表示されていれば、アップロードは成功です。

リポジトリのトップページURLは以下の形式です。

https://github.com/ユーザー名/リポジトリ名
Bash

このページでは、「ファイル一覧」「README」「最新のコミット情報」などが表示されます。
ファイルをアップロードした後に main.js がこの一覧に表示されていれば、正常に反映されています。

方法B：Gitコマンドを使ってアップロード（CLI版）

Gitが使える環境（Git Bash, macOS ターミナル, VSCode ターミナル）を前提とします。

B-1. 初期化と設定

cd ~/Desktop/my-first-project      # プロジェクトフォルダへ移動
git init                           # Gitリポジトリ初期化
git add .                          # すべてのファイルをステージに追加
git commit -m "初回コミット"        # 最初のコミット
git branch -M main                 # ブランチ名を main に変更
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
                                   # リモートリポジトリと接続
git push -u origin main            # 初回Push（アップロード）
Bash

こちらの記事もお勧めです。
はじめてのGitインストール：Windowsでの導入手順をわかりやすく解説
GUIなしでできる！Gitコマンドでリポジトリ作成から公開まで完全解説

B-2. 結果確認

GitHubにアクセスし、ファイルが表示されていれば完了です。

💡 git push 後にエラーが出る場合は、「リモートURLの指定ミス」や「ブランチの未設定」が原因の可能性があります。

READMEファイルの編集（任意だが推奨）

  • Web画面から直接「README.md」を編集可能
  • プロジェクトの説明（何をするコードなのか）を記述しておくと、自分にも他人にも親切
# my-first-project
JavaScriptで日付を出力するだけの初心者向け練習用リポジトリです。
Markdown

✅ 編集方法（Web画面から）

  1. リポジトリのファイル一覧にある README.md をクリック
  2. 右側にある鉛筆アイコン（✏️）をクリックすると編集画面に切り替わります
  3. 編集後、「Commit changes」で保存します。
  4. 編集後の画面で再度「Commit changes」の確認ウィンドウが出ることがあります。
    内容を確認し、再度「Commit changes」ボタンをクリックしてください。

.gitignore やライセンスの追加（初心者向け補足）

  • .gitignore は、アップロードしたくないファイル（例：ログファイルや設定ファイル）を除外する設定ファイルです
  • 今回は不要ですが、後々の開発には重要になります
  • ライセンス（MIT, GPLなど）は「他人がこのコードを自由に使っていいかどうか」のルールを示します

おわりに：自分のコードを外に出す第一歩

  • たった1ファイルでも、GitHubにアップして「人に見せられる形」にする経験は非常に重要
  • 今後はGitHub Pagesを使ってWeb公開したり、複数ファイルの管理に挑戦したりと、次のステップへ進めます

🧭 よくあるエラー集（CLI操作時）

エラー内容原因と対処
fatal: remote origin already existsすでにリモートが追加されている → git remote -v で確認し、削除して再設定
src refspec main does not match anymainブランチが存在しない → git branch -M main を先に実行
Permission denied (publickey)SSHキー未設定 → HTTPS URLを使うかSSHキーを設定する

🔤 用語ミニ解説

  • リポジトリ：コードや設定ファイルをまとめて保存する場所
  • コミット：変更内容を記録する単位。スナップショットのようなもの
  • Push：ローカルの変更をGitHubにアップロードすること
  • ブランチ：変更の流れを分岐させる仕組み。今回は main を使う

まとめ

たった1ファイルでも、GitHubにアップして「人に見せられる形」にする経験は非常に重要です。
自分で手を動かして作業し、コードを公開できたという成功体験が、今後の学習や開発のモチベーションになります。

次は、以下のようなステップに挑戦してみましょう。

  • README.md にもう少し詳しいプロジェクト説明を書き加える
  • JavaScriptで簡単なツールやミニゲームを作ってみる
  • GitHub Pagesを使って、Webサイトとして公開してみる

「できた」という小さな積み重ねが、やがて大きなスキルへとつながります。
まずは今回の体験を、自分なりのスタート地点としてしっかり残しておきましょう。

タイトルとURLをコピーしました