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

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

ただいまの
回答率

88.61%

フロントエンドのパッケージ管理にnpmを使用するのは正しいのでしょうか?

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 599

kazuki__

score 28

Web開発でnpmをよく分からずに使っていたため、少し調べてみたところ、Node.jsのパッケージを管理するものだといろんなサイトに書いてありました。

フロントエンド開発の際にnpmで必要なパッケージをインストールするというような使い方をしていました。
Node.jsのパッケージを管理するツールでなぜフロントエンドのパッケージをインストールすることができるのでしょうか?(フロントエンド・バックエンドどちらにしてもJavaScriptで書かれているからということでしょうか?)

Node.jsの開発経験がないのですが、バックエンドの開発をNode.jsでやる場合はフロントとバックでパッケージ管理はどちらもnpmを使用するということですか?

JavaScript初心者で的外れな質問かもしれませんが、ご教授いただけますと助かります。
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

フロントエンド・バックエンドどちらにしてもJavaScriptで書かれているからということでしょうか?

そのとおりです。かつてはフロントエンド専用にbowerなどのリポジトリもあったのですが、npmの隆盛に押され、「過去との互換のために残っている」程度の存在となっています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/19 13:16

    回答ありがとうございます!
    ということは、npmでインストールできるパッケージはフロントでもバックでもどちらでも同じように使えるのですか?
    Node.jsで書かれたライブラリはBrowserifyなどで変換することで?フロントでも使えるようですが、普通のJavaScriptで書かれたライブラリも問題なくNode.jsから使うことができるのでしょうか?

    すみません、Node.jsをよく知らないもので、JavaScriptとどの部分が違うのかなどよくわかっておりません。ご容赦ください。。

    キャンセル

  • 2020/03/19 13:18

    > npmでインストールできるパッケージはフロントでもバックでもどちらでも同じように使えるのですか?

    ものによります。ファイルシステムやサーバ構築関係など、Node.jsにしかない機能を参照するライブラリは、ブラウザに持ってきても動きません。

    キャンセル

  • 2020/03/19 14:18

    なるほど。全部が共通して使えるというわけではないんですね。
    ありがとうございます!疑問だった点がスッキリ解決しました!

    キャンセル

checkベストアンサー

+2

Node.jsのパッケージを管理するツールでなぜフロントエンドのパッケージをインストールすることができるのでしょうか?

npmでNode.jsとJavaScriptのライブラリを両方管理するのが現状の主流です。

しかし、別れてないのキモいですよね。
Bowerというフロントエンド用のパッケージ管理ソフトもありましたが廃れました。
参考記事: Bowerはなぜオワコン化したのか - Qiita

これはNode.jsのrequireをJavaScriptに持ち出す
Browserifyやwebpackライブラリの功績でしょう。
別にrequire使えるんだからnpmでいいじゃんという風潮に固まったのが原因と考えられます。

おもしろいですね。
確かに日付を扱うMoment.jsや、値をスマートに加工するLodashといったライブラリは、
Node.jsとJavaScriptのどちらでも使いますので、ライブラリ作成者としては余り嬉しく無いポイントですね。


JavaScriptとNode.jsの違いに関して歴史をふまえながら説明していきます。

ブラウザで動作してロードしたHTML(DOMツリー)を後から編集して、
画面の変更を促すスクリプト言語がJavaScriptです。
ファイルを保存したり、好き勝手にインターネットに繋ぐような機能は不要なので存在しません。
(HTML5と同時にいくらかは解禁されましたが、セキュリティの問題もあり、かなり使い勝手が悪いものになります)

で、これをRubyのような汎用スクリプト言語として使いたいんだ!と有志が立ち上がりました。
Google ChromeのJavaScriptエンジン(V8)はオープンソースで配布されています。
このV8エンジンにC++で作ったファイルを読み書きするモジュールや、インターネットに接続するモジュールを繋ぎ合わせて作りました。
これがNode.jsです。


JavaScriptはファイルを読み書きする機能がありませんので、
jQuery等のライブラリではグローバル変数領域に保存する作りになっています。
windows.$ = function () {}みたいな感じで、グローバル変数領域が汚れるのが欠点。

Node.jsはCommonJSの考え方を拝借して、
requireという関数を用意してグローバル変数領域を汚さない仕組みを構築しました。

requireは実行したタイミングでnode_modulesフォルダを探して関数やオブジェクトを持ち帰ってくれます。
node_modules配下のライブラリはnpmというパッケージ管理ツールでメンテナンスできるようになっています。

Node.jsはモジュールの管理がしやすくてとっても便利!
JavaScriptは不便……


JavaScriptでもrequireを使いたい!
Browserifyやwebpackというプロジェクトが始動しました。

まずWebサーバで配信したいJavaScriptをNode.jsを記述しておきます。
しかしJavaScriptにはrequire関数がないので、
このままではエラーで落ちてしまいます。

しかしfunction require(path) {}という風に自作関数を作れば
require関数が宣言されていないというエラーは回避出来ます。
Browserifyやwebpackというライブラリは自作のrequire関数を用意します。

配信したいJavaScriptのコードをbundle.jsというファイルにしますが、
この時、ソースコード上にあるrequireを静的解析し、依存モジュールも含めてbundle.jsに取り込んでしまいます。
そしてライブラリが用意した自作関数のrequire越しにロードして使うということを実現させました。

人類はJavaScriptでもrequireを使ってnpmのライブラリを扱う事に成功したのです。
ただしNode.jsのrequireとは違い、下記のような事ができない成約があるので注意しましょう。

  • 動的なrequireに対応出来ない
  • C++で追加されたライブラリは扱えない

前者は静的にrequire文を読み取っているのでそういう仕様になっています。
Node.jsも余りお行儀が良いわけではないので、コーディング規約等で禁止しているプロジェクトも存在します。

後者はファイルの読み書きやネットワーク通信のモジュールなんかの話です。
npmでフロントエンド用のライブラリを入手する際は、
プロジェクトの説明書きを読んだりして、Node.jsとJavaScriptどちらに向けてのライブラリなのかを理解して使う必要があります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/19 14:16

    回答ありがとうございます!
    歴史的な経緯から説明していただいて大変わかりやすかったです。
    疑問だった点がスッキリしました。ありがとうございます!

    キャンセル

  • 2020/03/19 16:55

    > 動的なrequireに対応出来ない

    Webpackの場合、ある程度までなら動的なrequireにも対応可能です(ただし、可能性のあるファイルがすべてバンドルに入ることとなります)。

    https://webpack.js.org/guides/dependency-management/

    キャンセル

  • 2020/03/19 17:08

    > maisumakunさん
    へー、知らなかったです!
    routing作る時とかに便利ですね。

    キャンセル

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

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る