teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

質問に対する追記を記載

2020/06/16 05:36

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -54,4 +54,100 @@
54
54
 
55
55
  もし他の方が作ったプロジェクトならば、
56
56
  必ずプロジェクトルートのディレクトリにpackage.jsonファイルが存在しているはずなので、
57
- そのプロジェクトをどうやって導入すれば良いのか先輩に相談してみてください。
57
+ そのプロジェクトをどうやって導入すれば良いのか先輩に相談してみてください。
58
+
59
+ ---
60
+
61
+ 【追記】
62
+
63
+ 何を作るのかにもよりますが、
64
+ まずはプロジェクトにしようと思うフォルダを作って決めてください。
65
+ そのフォルダに`cd`コマンドで移動してから`npm init --yes`を実行して`package.json`を設置することで
66
+ 「これはNode.jsで作ったプロジェクトですよ」という明示になります。
67
+
68
+ 適当な場所にプロジェクトを作ると後で混乱するので、
69
+ 一般的なエンジニアの慣習に従って進めていきましょう
70
+ `#`: コメント
71
+ `$`: 打ち込むコマンド
72
+
73
+ ```bash
74
+ # cdコマンドのみを実行して~に移動する
75
+ $ cd
76
+
77
+ # projectsフォルダを作成して移動
78
+ $ mkdir projects
79
+ $ cd projects
80
+
81
+ # 更にhello-worldフォルダを作成して移動
82
+ $ mkdir hello-world
83
+ $ cd hello-world
84
+
85
+ # package.jsonファイルを作成
86
+ $ npm init --yes
87
+
88
+ # pwdで現在のパスを表示、vscode等のエディタにコピペしてプロジェクトとして開くと良い
89
+ $ pwd
90
+ /home/[user-name]/projects/hello-world
91
+
92
+ # npmのサイト(https://www.npmjs.com/)で欲しいパッケージを探してインストール
93
+ # 例として導入するのは日付管理の得意なMoment.js (https://momentjs.com/)
94
+ $ npm install moment
95
+ ```
96
+
97
+ このフォルダに`index.js`というファイルを作ってみます。
98
+ 先程導入したMoment.jsを使って現在時刻を表示します。
99
+
100
+ ```js
101
+ const moment = require("moment");
102
+
103
+ const now = moment().format("YYYY-MM-DD hh:mm:ss");
104
+ console.log(now);
105
+ ```
106
+
107
+ ```bash
108
+ $ node index.js
109
+ 2020-06-16 02:29:22
110
+ ```
111
+
112
+ 今回の質問は`npm run dev`を作りたいという質問なので、
113
+ `package.json`を編集して終了しましょう。
114
+ `npm init --yes`で作った初期の`package.json`には既に`scripts.test`というキーがあります。
115
+ これに追記するように`scripts.dev`を追加します。
116
+
117
+ ```json
118
+ {
119
+ "name": "hello-world",
120
+ "version": "1.0.0",
121
+ "description": "",
122
+ "main": "index.js",
123
+ "scripts": {
124
+ "dev": "node index.js",
125
+ "test": "echo \"Error: no test specified\" && exit 1"
126
+ },
127
+ "keywords": [],
128
+ "author": "",
129
+ "license": "ISC",
130
+ "dependencies": {
131
+ "moment": "^2.26.0"
132
+ }
133
+ }
134
+ ```
135
+
136
+ これでnpm-scriptsの準備が完了しました。
137
+ 早速実行してみます。
138
+
139
+ ```bash
140
+ $ npm run dev
141
+
142
+ > hello-world@1.0.0 dev /Users/mohata/projects/hello-world
143
+ > node index.js
144
+
145
+ 2020-06-16 02:32:3
146
+ ```
147
+
148
+ こんな感じでnpm-scriptsは単なるコマンドでしかありませんが、
149
+ Webサービスを開発環境モードで立ち上げる場合は`npm run dev`で起動しておくように作るような慣習がありますので、自分でこのようにガリガリ書きまくるということは少ないかもしれません。
150
+
151
+ プロジェクトのビルドツール等を導入した時には、
152
+ `package.json`を見れば書いてあるはずなので、
153
+ これを覚えておき、わからない事があれば`package.json`を一度見るようにしてみてくださいね。

1

重複している内容の削除

2020/06/16 05:36

投稿

miyabi-sun
miyabi-sun

スコア21461

answer CHANGED
@@ -12,10 +12,8 @@
12
12
  Node.jsはプロジェクトルートに`package.json`という[JSON形式](https://ja.wikipedia.org/wiki/JavaScript_Object_Notation)のファイルを設置し、
13
13
  これにプロジェクトの概要を書き込んでいきます。
14
14
 
15
+ Node.jsにおまけでひっついてくる管理ツールのnpmは
15
- この`package.json`は非常に重要で、
16
+ このpackage.jsonを読み書きしながらプロジェクトの状態を管理します。
16
- 新しくNode.jsのプロジェクトにジョインしたメンバーは
17
- README.mdというファイルと共にpackage.jsonを読んでから質問しろ!
18
- …と言われる程超重要ファイルで、
19
17
 
20
18
  このプロジェクトが何のライブラリを採用しているかとか、
21
19
  デプロイ方法は?CIは?テストは?
@@ -46,16 +44,14 @@
46
44
 
47
45
  エラーを読めば一目瞭然ですね。
48
46
  `package.json`ファイルが存在しないよと言っているわけです。
47
+ 先程紹介したように、`npm run dev`は`package.json`ファイルのscripts.devの文字列をコマンドとして実行するわけですから、そもそもpackage.jsonファイルが無ければ動作しません。
49
48
 
50
- npmは大多数のコマンドでこのpackage.jsonファイルを読み書きしながら実行しますので、
51
- package.jsonが無いって何事!?となるわけです。
52
-
53
49
  > MacにNode.jsをインストールしてましたがnpm run devで以下のエラーが出てしまいました。
54
50
 
55
- この状態ですから、まだプロジェクトもソースコードもなにもない状態なわけでよね?
51
+ この状態ですから、まだプロジェクトもソースコードもなにもないんだと思いま
56
52
  もし作るなら`npm init --yes`コマンドを実行すると、
57
53
  ワーキングディレクトリに適当に値を格納したシンプルな`package.json`ファイルを生成してくれます。
58
54
 
59
55
  もし他の方が作ったプロジェクトならば、
60
56
  必ずプロジェクトルートのディレクトリにpackage.jsonファイルが存在しているはずなので、
61
- そのプロジェクトをどうやって持ってくるのか等を相談してみてください。
57
+ そのプロジェクトをどうやって導入すれば良いのか先輩に相談してみてください。