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

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

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

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

npm で install したモジュールの使い方

tetsuo6969
tetsuo6969

総合スコア20

npm

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

172閲覧

投稿2022/04/16 11:48

 こんにちは。

DarkReader を自サイトで使うため、npmを始めました。
インストールは手順どおりにできたのですが、モジュールの使い方がわかりません。

 サンプルコードが美しいので再現したいのですが.....

javascript

DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 }); DarkReader.disable(); // Enable when the system color scheme is dark. DarkReader.auto({ brightness: 100, contrast: 90, sepia: 10 }); // Stop watching for the system color scheme. DarkReader.auto(false); // Get the generated CSS of Dark Reader returned as a string. const CSS = await DarkReader.exportGeneratedCSS(); // Check if Dark Reader is enabled. const isEnabled = DarkReader.isEnabled();

しかしどうやっても、

Darkreader in undefined

と出てしまいます。

どうファイルを読み込めば、こんな風に使えるのでしょうか。

また ES modules を使うならと別のコードもあります。

javascript

import { enable as enableDarkMode, disable as disableDarkMode, auto as followSystemColorScheme, exportGeneratedCSS as collectCSS, isEnabled as isDarkReaderEnabled } from 'darkreader'; enableDarkMode({ brightness: 100, contrast: 90, sepia: 10, }); disableDarkMode(); followSystemColorScheme(); const CSS = await collectCSS(); const isEnabled = isDarkReaderEnabled();

ES modules を調べたところ、

html

<script type="module"> ...... </script>

で使えるとあり、試行錯誤したのですが、上手く読み込めません。

例えば

html

<script type="module"> import { enable as enableDarkMode, disable as disableDarkMode, auto as followSystemColorScheme, exportGeneratedCSS as collectCSS, isEnabled as isDarkReaderEnabled } from ',./......./darkreader.js'; #パスは適当 </script>

とすると、ファイルは認識するのですが、上手く関数を読み込めません。

多分、npm や node.js を上手く使うのだろうと思い、色々調べましたがごちゃごちゃしてよくわかりません。たまに良さげな記事を見つけても

import ...... from .......

と説明なしに書いてあり、みなさんはわかるんでしょうが、置いてけぼりです。

普通に読み込むときは、頭に「 ./ , ../ , /」などを付けないといけないですし、拡張子も省略できないはずなので、やはり node.js や npm を上手く使うのでしょうが、どうするのでしょうか??

長文駄文失礼しました。どうか、よろしくお願いします。😂

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

npm

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。