見出し画像
Photo by aoming

プログラミングに挑戦したい人が最初に学ぶこと - VSCodeインストールからReactアプリを立ち上げてWeb公開するまでの手順書

箕輪 旭

システム開発をやってみたいな、と思ったとき「これだけ読めば一通り全部できる！」という情報が意外となくて、「VSCodeを入れる」「GitHubに接続する」「Reactアプリを立ち上げる」などの情報を別々に調べて実行しなければいけません。

初心者向けにある程度まとまった情報サイトや入門書もあるのですが、たいてい自分のPCの中だけで作って動かす想定になっています。でも、「システム開発をやってみたい！」というのは「自分の作ったシステムを世の中に発信したい！」ということじゃないですか。それに、仕事で開発をしようと考えるなら、プログラムの共有や外部へのシステム公開は必須のスキルです。

そこで、プログラミングが初めての人に「これを見てやってみて」と渡せるような、開発環境構築からシステム公開までを一気通貫で示した手順書を作ってみました。まずは入門書を読む前にこの一連の作業を体験すれば、開発の楽しさを実感しつつWebシステムの仕組みをなんとなく理解できて、「これから何を勉強すればいいのか」が分かるはずです。また、既に知識をお持ちの方にとっても、PCを新しくしたときなどのタスクリストとして役に立つと思います。


Visual Studio Codeの導入

Visual Studio Code(VSCode)は、プログラムを記述するためのエディタ（コードエディタ）です。コードエディタ自体はVSCode以外にも様々あるのですが、JavaScript開発ではみんなこれを使っている印象です。

VSCodeのインストール

まずは、Visual Studio Codeの公式サイトに行ってダウンロード&インストールします。インストール時の設定はすべてデフォルトのままで良いです。

インストールが完了したら、起動してみましょう。

VSCodeの動作確認

簡単なHTMLをつくって、動作確認をしてみましょう。次の手順で操作してみてください。

  1. PCの好きな場所に作業用フォルダを用意して「Open Folder」で開く。

  2. 画面左に「EXPLORER」が表示されるので、その領域を右クリック→「New File」して、「index.html」というファイルを作成。

  3. 「index.html」をダブルクリックするとエディタが表示されるので、下記のコードを打ち込んで保存。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width">
    <title>テストページ</title>
  </head>
  <body>
    Visual Studio Codeのテストをしています。
  </body>
</html>

3までやると、こんな画面になっているはずです。画面上部タブ、ファイル名の右に「●」が付いていたら、それは「保存されていない」という意味です。

ここまでできたら、index.htmlが置かれているフォルダをエクスプローラーで開き、index.htmlをダブルクリックします。ブラウザが起動し、「Visual Studio Codeのテストをしています」と表示されたらOKです。

Gitの導入

Git（ギット）は、プログラムの構成管理（バージョン管理）を行うシステムです。最近ではだいたいの開発現場でGitが使われていると思います。

Gitのインストール

Gitの公式サイトからダウンロード&インストールします。インストーラーがいろいろと設定を聞いてきますが、すべてデフォルトにします。

インストール確認

インストールが終わったら、VSCodeのターミナルを使ってバージョン確認をします。上部メニューから「Terminal > New Terminal」を選ぶと、画面下にコマンド入力領域（ターミナル）が表示されるので、そこにこのコマンドを打ち込みます。

git --version

※Visual Studio Codeを起動した状態でGitをインストールすると、Gitが認識されずエラーになります。その場合は、Visual Studio Codeを再起動してもう一度コマンドを入力します。

Gitユーザの登録

次に、Gitのユーザ名とメールアドレスを登録します。これはプログラムを編集したユーザ情報として使用されます。
VSCodeのターミナルで設定できます。

git config --global user.name "ユーザ名"
git config --global user.email "メールアドレス"

親切な完了メッセージとかは出ないので、このコマンドを打ち込んで登録できているかどうか確認します。先ほど打ち込んだユーザ名とメールアドレスが出てくればOKです。

git config --global user.name
git config --global user.email

GitHubとの連携

GitとGitHub（ギットハブ）はよく混同されますね。GitHubというのは、Web上でGitが使えるようになっているクラウドサービスです。これを利用すると、他の人と同じGitのリポジトリ（プログラム置き場）を共有できます。
GitHub意外にも、GitLabなどの類似サービスがあります。サービスが違っても、作業することは同等です。

アカウント準備

まずはGitHubにユーザ登録します。
公式サイトで「サインアップ」します。

リポジトリの作成

試しにリポジトリを1つつくって、最初に実装した「index.html」を登録してみましょう。

GitHubサインイン後の画面で、リポジトリの「New」ボタンを押下します。

Repository nameを入力、リポジトリの公開設定「Public」or「Private」を入力して「Create repository」。

※ README fileは追加しない方が、後の操作がやりやすいです。

リポジトリができました。

VSCodeとの連携

次に、GitHubとVSCode（ローカル（自分のPC）のGit）を連携します。
「…or create a new repository on the command line」に書かれたコマンドを、1行ずつ順番にコピー&VSCodeのターミナルにペーストして、順番に実行します。このとき、「git add README.md」と一緒に「git add index.html」も実行して、index.htmlをGitに登録するファイルに含めてください。

echo "# htmltest" >>> README.md
git init
git add README.md
git add index.html        //このコマンドを追加
git commit -m "first commit"
git branch -M main
git remote add origin GitHubのリポジトリURL
git push -u origin main

はじめてGitHub接続を行った場合、GitHubのアカウント確認画面が表示されるので、IDとパスワードを入力してください。

すべてのコマンド完了後、GitHubの画面を更新すると、ファイルが登録されていることが分かります。

2回目以降のPush操作

今後は、VSCode上で行った変更が自動的に検知されて、左メニューの「Source Control」で確認できます。次の画像は、index.htmlに変更を加え、index2.htmlという新ファイルを作成した場合です。また、今後はGitHubへの登録もコマンドを打つ必要はなく、「Commit」の横にある矢印アイコンから「Commit & Push」を選択するだけです。

「Commit & Push」するときに、入力欄が出てきます。変更内容を書いて、右上のチェックボタンで確定すると実行されます。

とりあえず覚えるGitの使い方

Gitを使うために、とりあえず覚えておくのはこの3つの処理です。

  • Commit: ローカルのGitリポジトリ（=PCにインストールしたGit）にプログラムの変更を反映します。

  • Push: リモートのGitリポジトリ（=GitHub）にプログラムの変更を反映します。必ずCommit→Pushの順番。

  • Pull: リモートのGitリポジトリ（=GitHub）から最新のプログラムを取得します。

Gitでは、複数人で同じファイルを編集しても勝手に変更点を合体してくれますが、同じファイルの同じ場所をいじってしまった場合は、エラーになってPushできなくなります（「競合」という）。この状況、初めて出くわすと結構パニくるので、ポイントをいくつか覚えておきましょう。

  • Push時の基本動作は、Commit→Pull→Push。

  • 競合がある場合「Pull」の段階で警告が出る。VSCodeが①自分の手元のプログラムと、②GitHubにあるプログラムの差分を示す画面に変わるので、変更点を一つずつ確認し、①と②のどちらを採用するか画面で選択する

  • すべての競合を確認したら、もう一度Commit&Push。

Node.jsの導入

これからWebシステム開発を勉強するなら、開発言語としてJavaScript(JS)をおすすめします。ほかにもJava、PHP、Rubyなどが有名ですが、JavaやPHPは大企業での採用が多く、Rubyは日本製、など、それぞれ独特の特徴があります。そんな中で一番オールマイティなのがJSなので「どの言語を勉強したらいいですか？」と聞かれたときはいつもJSをおすすめしています。

Node.jsというのは、JavaScriptの機能を拡張するツールのようなものです。そしてReactというのは、Node.jsを使いやすくするためのライブラリ（あらかじめ用意されたプログラム集）です。（正しい理解については、別のところでやりましょう！）

Node.jsのインストール

まずはNode.jsをPCにインストールします。ダウンロード時に「最新版」と「推奨版」を選択しますが、おすすめは「推奨版」です。ちょっと前のバージョンの方が、ネット上に情報がたくさんあり、動かないときに調べやすいからです。また、インストール時の設定はデフォルトのままにします。

インストール確認

インストールできたら、ちゃんとインストールできているか確かめてみましょう。

VSCodeに戻り、ターミナルに2つのコマンドを入力してみてください。

node -v
npm -v

※VSCodeを起動した状態でインストールすると、コマンドがエラーになります。VSCodeを再起動してください。

-v は、バージョンを確認するコマンドです。「node」と「npm」のバージョンが表示されれば、インストールができているということです。
※-vと--versionは同じなのですが、Gitでは-vは使えないみたいです。

npmについて & yarnのインストール

nodeはもちろん「Node.js」のこと。一方npmは「パッケージ管理システム」と呼ばれているもので、Reactなどのプログラムライブラリは、npmコマンドを使ってインストールします。
パッケージ管理システムには「npm」の他にも「npx」「yarn」がよく使われます。「npx」は「npm」と一緒にインストールされるので気にしなくて大丈夫。一方、「yarn」は別途インストールが必要です。

npm install -g yarn

周りの人がyarnを使っている場合は、このコマンドも実行しておきましょう。

Reactアプリの構築

いよいよアプリ構築に入ります。一旦ここまでに作ったindex.htmlを削除して、プログラムを空っぽにしましょう。（README.mdはそのままでも消しても良いです。）

ビルドシステムの実行

Reactには、コマンド1つで簡単なWebアプリを実装してくれる便利な機能が容易されています。VSCodeのターミナルに、これを打ち込んでください。

npx create-next-app

ターミナル上で、いろいろ質問されるので、聞かれたことに答えます。聞かれる内容は、たびたびアップデートされるようです。聞かれている意味が分かるようになるまでは、デフォルトのままで良いでしょう。

インストールが終了すると、ファイルがたくさん追加されます。ここでちょっと面倒なのが、「trial（質問の中にあったアプリ名）」というフォルダの中に新しいファイルができることです。この階層構造がちょっと不便なので、フォルダの中身を全部trialフォルダの外（元からあったREADME.mdと同じ階層）に出してしまってください。このとき、README.mdは、create-next-appでできた新しいファイルに置き換えます。あと、trialフォルダはいらないので消します。

全部trialフォルダの中に入っている
ファイルを全部trialフォルダの外にだして、trialフォルダを削除

動作確認

では、動かしてみましょう。Node.jsのプログラムは、コマンドを打ち込んで起動します。

npm run dev

「compiled client and server successfully」というメッセージが出たら、ブラウザを開いて「https://localhost:3000」にアクセスしてください。これが「create-next-app」で作られたテンプレートサイトです。

プログラムを変更して保存すると、自動的にブラウザの表示内容も変更されます。「ホットリロード」と呼ばれる機能です。ターミナルを使用したいなど、サーバを意図的に止めたいときは、Terminalで「Ctrl+c」を押します。

【補足】ちょっとだけ仕組みを理解

この記事の最初につくった「index.html」は、ブラウザで直接開いて動かすことができました。一方、Node.jsでは、サーバにあるNode.jsというシステム上でJavascriptを動かしてHTMLファイルを生成→ブラウザで表示、という仕組みになっています。そして、最終的に表示するHTMLの内容は、src/appフォルダの中にあるpage.tsxというファイルに書かれています。

HTMLのようなものが書かれていますね。ブラウザに表示されている画面と見比べながら、一部分を変えたりしてみましょう。

また、最近のReactアプリでは、JavaScriptを拡張してつくられたTypeScriptというプログラミング言語を使うことが一般的になりつつあります。なので、ファイルの拡張子が「.tsx」となっています。まあ、ほぼJavaScriptと一緒です。

それから、create-next-appで作ったテンプレートプログラムは、Next.jsというReactの拡張ライブラリが使われています。ちょっと前まではcreate-react-appというReactのシンプルな機能だけを使ったテンプレートが便利だったのですが、非推奨になってしまいました。

サイトを公開する

今のサイトは「localhost」という自分のPCの中のサーバで動作している状態です。いよいよこれをインターネット上に公開して、誰でも見られるようにしましょう。

とりあえずGitHubにPushします。

Vercelのアカウント準備

公開には、Vercelというサービスを利用します。これを使うと、GitHubのアカウントを登録するだけで、勝手にサーバ構築やURL発行などを行ってくれるので、初心者にはとっても便利です。

まずは、Vercelの公式サイトにアクセスしてサインアップします。GitHubのアカウントでログインすると、リポジトリの連携が楽です。

リポジトリのデプロイ

ログイン画面に、GitHubのリポジトリが表示されるので、「Import」を押します。

標準設定のまま「Deploy」を押します。ちなみに、プログラムファイルをサーバにアップロードして動作するように設定する作業のことを「デプロイ」と言います。

おわりです。あとは完成を待ちます。

動作確認

完成しました！画面キャプチャのような部分をクリックすると、別タブでサイトが表示されます。

アドレスバーを見てみましょう。このサイトのURLは「https://htmltest-green.vercel.app/」です。このURLにアクセスすれば、誰でもサイトを閲覧できます。ぜひこのnoteの紹介とともに、SNSなどでシェアしてください！

【補足】CI/CD

Vercelで一度デプロイを行うと、今後はGitHubにPushしたタイミングで自動的にサーバのシステムも更新されます。この仕組みのことを継続的インテグレーション/継続的デプロイ、CI/CDと呼びます。インフラの知識が全くなくてもアプリケーションを公開できるので、とても便利ですね。

Vercelのように、CI/CDを簡単に実装できるツールは他にもいくつかあります。中でもおすすめなのは、AWSのAmplifyです。

将来的にAPIの開発やDBとの連携などを考えると、AWSに統一することで管理しやすくなります。ですが、今回は無料で使えることを重視してVercelを選択しました。

まとめ

自分のPCに開発環境を準備してからWebシステムを公開するまで、一連の手順を紹介しました。ここまでできれば、あとはプログラミング技術を磨いていくだけです。ReactおよびNest.jsの技術を習得しましょう。

次はこれをやってみよう！

自分のWebシステムから「API」に接続して、機能を拡張します。この記事では、ChatGPTのAPIを組み込みます！


この記事が気に入ったらサポートをしてみませんか？