Q&A
回答ありがとうございます！
ということは、npmでインストールできるパッケージはフロントでもバックでもどちらでも同じように使えるのですか？
Node.jsで書かれたライブラリはBrowserifyなどで変換することで？フロントでも使えるようですが、普通のJavaScriptで書かれたライブラリも問題なくNode.jsから使うことができるのでしょうか？
すみません、Node.jsをよく知らないもので、JavaScriptとどの部分が違うのかなどよくわかっておりません。ご容赦ください。。
Web開発でnpmをよく分からずに使っていたため、少し調べてみたところ、Node.jsのパッケージを管理するものだといろんなサイトに書いてありました。
フロントエンド開発の際にnpmで必要なパッケージをインストールするというような使い方をしていました。
Node.jsのパッケージを管理するツールでなぜフロントエンドのパッケージをインストールすることができるのでしょうか？（フロントエンド・バックエンドどちらにしてもJavaScriptで書かれているからということでしょうか？）
Node.jsの開発経験がないのですが、バックエンドの開発をNode.jsでやる場合はフロントとバックでパッケージ管理はどちらもnpmを使用するということですか？
JavaScript初心者で的外れな質問かもしれませんが、ご教授いただけますと助かります。
よろしくお願いします。
回答2件
0
ベストアンサー
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 04:14
編集2020/03/19 07:51
総合スコア21158
0
フロントエンド・バックエンドどちらにしてもJavaScriptで書かれているからということでしょうか？
そのとおりです。かつてはフロントエンド専用にbowerなどのリポジトリもあったのですが、npmの隆盛に押され、「過去との互換のために残っている」程度の存在となっています。
投稿2020/03/19 04:04
総合スコア145183
> npmでインストールできるパッケージはフロントでもバックでもどちらでも同じように使えるのですか？
ものによります。ファイルシステムやサーバ構築関係など、Node.jsにしかない機能を参照するライブラリは、ブラウザに持ってきても動きません。
なるほど。全部が共通して使えるというわけではないんですね。
ありがとうございます！疑問だった点がスッキリ解決しました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/19 05:16
2020/03/19 07:55
2020/03/19 08:08