LoginSignup
6
3

More than 3 years have passed since last update.

npm run startを実行するまで~初めてのNode.js動作確認~

Posted at

背景

実務経験ないまま、共同開発を経験させていただく機会があり
npm run startでブラウザが立ち上がるまで動作確認する必要があった。
内容自体は単純ではありますが、覚えも含めて投稿させていただきます!
また、この動作確認の一連の流れのまとめがなかったため、投稿してみようと思った次第です。

前提

  • 2020/10時点での状況
  • Windows使用者
  • 当時の知識:「npm」「Node.js」というワードを始めて聞いた...
  • Git/GitHubを全く触ったことがなかった...

作業手順優先で詳細は本投稿では省いています。
詳細はリンク先で記載がありますので、申し訳ないですがそちらをご参照くださいm(__)m

手順

1. GitHubにアカウント登録・GitHub内でリポジトリを作成

作業箇所:ブラウザ
https://qiita.com/kutarou197/items/8acea22ae36dbcf45c9f

2. Node.jsのインストール

作業箇所:ブラウザ
https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b

npmとはNode Package Managerの略です。
ということでNode.jsのインストールが必須です。
Node.jsのインストールと同時にnpmもインストールされます。
※ちなみに自分は「Node.jsのインストールが必要」ということに気づかず、Node.jsをインストールせずにcmd(=コマンドプロンプト)にコード打込んでエラー出して悶絶、というのを3時間程続けていました(笑)

※尚、cmdはwindowsがデフォルトで持っているツールで、スタートメニュー横の虫眼鏡ボタンで「コマンドプロンプト」で調べると写真のように出てきます。
image.png

3. nodistでバージョン管理する

- nodist のインストール

作業箇所:ブラウザ
https://qiita.com/satoyan419/items/56e0b5f35912b9374305

- バージョン管理

作業箇所:cmd(=コマンドプロンプト)
https://qiita.com/satoyan419/items/56e0b5f35912b9374305
↑「nodistのインストール」と同じリンクです。

共同開発する際、指定されたNode.jsのバージョンに変更
Node.jsのバージョンによってnpmも対応するバージョンが異なるので、npmのバージョン管理もお忘れなく!

尚、リンク先のnpxのインストールは今回は必要ありませんが、困ることはないので一緒にインストールしておいてもいいかもしれません。

4. GitHubで作成したリポジトリをクローンする

作業箇所:cmd

git clone リポジトリのURL(https~)

5. ディレクトリを変更し、Gitのremote urlを変更

作業箇所:cmd

cd リポジトリ名
でディレクトリ移動し
Remote url set-url origin リポジトリのURL(https~)
でリモートURLを変更
https://qiita.com/minoringo/items/917e325892733e0d606e

6. リモートリポジトリにプッシュする

作業箇所:cmd
https://qiita.com/yukibe/items/9ef9d54f2e7d53cfb51c
git push origin master -f
上記コマンドを入力して、リンクにある「リモートリポジトリに反映」の「push」のような画面が出たらOKです

7. 動作確認

作業箇所:全てcmd(=コマンドプロンプト)

- npm packageインストール

既製のパッケージをリモートリポジトリにインストール
npm install

- ファイルやプロジェクトの実行

npm run start
でブラウザが立ち上がったら完了!!
(この時点では真っ白のブラウザかと思います。)

※npmとは?:既に作られたNode.jsのパッケージ
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477


ほんとに作業内容しか記述していないので、各種作業により端末内で何が起こっているのかは各リンクや関連記事をご参照ください!

最後まで読んでいただき、ありがとうございました!

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3