質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

13078閲覧

npm run devがどういうコマンドか

Saya1414

総合スコア1

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1グッド

2クリップ

投稿2023/01/06 05:52

前提

現在Laravel9でサイトを作っています。
npm run devをなぜ使うのか、実行してない際はなぜレイアウトが崩れるのかわからず調べていて、以下のような内容が出てきました。

  • npmはNode.jsをインストールするときについてくるパッケージ管理ツール
  • npm run はLaravelの独自コマンド
  • npm runにdevやprod, watchをつけることでビルドができる
  • dev, watchはビルドの際コンパイルを、prodはコンパイルと圧縮を行う

質問は以下の3つです。

  • 上記の認識は間違っていないか
  • PHPをコンパイルするとはどういうことなのか(インタプリタ言語ではないのか)
  • コマンド実行中はレイアウトが正しいのに、Ctrl+Cで終了すると崩れるのはなぜなのか。コンパイルしたなら実行ファイルができるのではないのか?

初学者のため見当違いの質問をしているかもしれませんが、どなたか解答いただけると幸いです。

natsumi723👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

見た説明がすでに古い。
prod, watchが出てくるのはLaravel mix時代の説明。

Laravel9.x期間の途中でviteに変更なんて破棄的変更を容赦なくやったので初心者は当然混乱する。

viteに変わっても基本的な使い方が変わらないようにnpm run devはそのまま残したけど同じdevだけど動作は全く違う。
viteのdevはmixでのwatchと同じ動作。Laravel側のファイルを変更したら自動で再ビルドしたりブラウザをリロードしたり「開発中に使うコマンド」。viteのdevではjs/cssファイルは作られないのでdevを止めたらcssファイルがないので崩れる。
buildはprodと同じ。「本番用のjs/cssファイルを作るコマンド」。devを止めても正しく表示するにはnpm run buildを使う。

「JSやCSSもビルドして使う」はここ10年くらいのフロントの新しい常識。常識なのでLaravelでも当然知ってる前提で進むけどLaravel周辺はフロントのことを理解してない人が多すぎる。「PHP覚えたからLaravelも使えるはず」とやってきた初心者がフロントの知識がなくてことごとく撃沈している。
Laravel方面からフロントを調べても理解できないのでフロントのことはフロントだけで覚える。その後にLaravelに戻って来れば「Laravelとフロントを繋ぐ部分」はLaravelが用意していると分かる。

投稿2023/01/06 06:52

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Saya1414

2023/01/10 23:32

返信が遅くなり申し訳ありません、細かく教えていただけとても助かります。Laravel9対応の教材を見つけられず、Laravel7対応の本で勉強していたので認識があちこち古かったんだなと気付けました。 ご察しの通り今までPHP中心で勉強していて、フロントはちょっと触っただけでしたので改めて勉強しようと思います。 ご回答ありがとうございました!
guest

0

npm run コマンドの実行内容は package.json の定義にありますね
以下の例だと vite が実行されるみたいですね

js

1{ 2 "scripts": { 3 "dev": "vite", 4 "build": "vite build" 5 }, 6}

投稿2023/01/06 06:02

yuma.inaura

総合スコア1451

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Saya1414

2023/01/10 23:35

ご回答ありがとうございます! Vite.jsというものを初めて知ったので、勉強しようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問