npmの使い方（インストール先）とimportのやり方

今回、外部のライブラリを利用するにあたり、初めてnpmの存在を知り、使用するに至りました。

いろいろ調べながらnpmを導入してみて、以下のインストールを実行することができました。

terminal
1npm install --save @ckeditor/ckeditor5-table

そしてその結果、調べてみるとmacを利用していて、設定を変更していない場合、以下のディレクトリに関連するファイル群がデプロイされていることが判明しました。

terminal
1/usr/local/lib/node_modules/npm/node_modules/@ckeditor

ここでわからない点があるのですが、その後のライブラリを見ると以下のようにimportして利用することを指示されています。

javascript
1import Table from '@ckeditor/ckeditor5-table/src/table';
2import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';

①現状、localhostで実装しているのですが、これは実装先のフォルダ下に配置して、絶対参照なり相対参照なりで呼び出せば良いのでしょうか？
②上記の①に関連するのですが、まだよくわからないnpmですが、パッケージ管理で利用されるツールである事は読み取れました。すると、①のように本来あるべきでない場所に配置してしまった場合、既にインストールしたもの（現在利用しているもの）とLatestバージョンのパッケージ管理ができなくなるような気がする（本当に理解が追いつていないので感覚的にです）のですが、実際は配置等を含めてパーケージ管理が必要なのでしょうか？実際に<script>タグ内に指定のimportを記載したところ以下のようなエラーが発生しております。
SyntaxError: Cannot use import statement outside a module
これも今調べたところ、package.jsonやいろいろキーワードが出てくるのですが、どのような調べ方をすれば解決に至るかわからず、ご質問させていただきました。

追記
実際にimportをしてみたコードは以下の通りです。
過去に記事1 / 過去の記事2
いろいろな過去に記事を拝見して、type属性にmoduleを設定しなければならないや、webpackを使用することが一般的など様々なヒントを見つけることができたのですが、
結果的にnpmでインストールしたものをどのようにimportするのかという体系を理解することができませんでした。
もし、このようなケースで学ぶべき方法や分野について知見のある方がいらっしゃれば、アドバイスをいただければ幸いです。

html
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <script src="./vendor/ckeditor5/ckeditor.js"></script>
7  <script src="./vendor/ckeditor5/translations/ja.js"></script>
8</head>
9<body>
10  <!-- The toolbar will be rendered in this container. -->
11  <div id="toolbar-container"></div>
12
13  <!-- This container will become the editable. -->
14  <div id="editor">
15      <p>This is the initial editor content.</p>
16  </div>
17
18<!-- <script src="./vendor/@ckeditor/ckeditor5-table/src/table.js" charset="utf-8"></script> -->
19
20<script type="module">
21
22import Table from './vendor/@ckeditor/ckeditor5-table/src/table.js';
23import TableToolbar from './vendor/@ckeditor/ckeditor5-table/src/tabletoolbar.js';
24import TableProperties from './vendor/@ckeditor/ckeditor5-table/src/tableproperties.js';
25import TableCellProperties from './vendor/@ckeditor/ckeditor5-table/src/tablecellproperties.js';
26
27    DecoupledEditor
28        .create( document.querySelector( '#editor' ),{
29          plugins: [ Table, TableToolbar, TableProperties, TableCellProperties],
30          table: {
31            contentToolbar: [
32                'tableColumn', 'tableRow', 'mergeTableCells',
33                'tableProperties', 'tableCellProperties'
34            ]
35          },
36          language:'ja'
37        } )
38        .then( editor => {
39            const toolbarContainer = document.querySelector( '#toolbar-container' );
40            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
41        } )
42        .catch( error => {
43            console.error( error );
44        } );
45</script>
46</body>
47</html>

よろしくお願い申し上げます。

hoshi-takanori

2021/04/28 08:18

npm のライブラリを import して使うというのは、webpack などのリソースバンドラーを使って自分の書いたコードとライブラリを一つの js ファイルにまとめて使うことになります。たぶん、今まで jQuery などを使ってきたなら、全く異なる考え方をする必要があるんじゃないでしょうか。一方、npm は使わずに CDN を利用する方法もあるようですね…。

Lhankor_Mhy

2021/04/28 08:34

webpack をあまり理解していないのであれなのですが、その＠はエイリアスだと思います。webpackでビルドする際に適切に置き換えられるものだと思います。 https://qiita.com/kazuooooo/items/b0ca9bd74a093824403e

pegy

2021/04/28 10:52

お二方とも、コメントお寄せ頂き、ありがとうございます。 CDNも見つける事ができたのですが、良くGitHubでnpmインスールして、importしてくださいの様な指示を見ます。これを使いこなす様になるには、JavaScriptのモジュールを全般的に理解するとうことかと整理したのですが、方向性は正しいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえずこんな感じでいかがでしょう。
参考: 最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
参考: Quick start - CKEditor 5 Documentation

1) プロジェクトディレクトリを作り、package.json を作る

terminal
1mkdir editor-sample
2cd editor-sample
3npm init -y

これで package.json というファイルができますが、不要なコードがあるので、次のように書き換えます。
(npm init せずに、いきなりこのファイルを作っても構いません。)

json
1{
2  "name": "editor-sample",
3  "version": "1.0.0",
4  "scripts": {
5    "build": "webpack --mode development"
6  }
7}

2) 必要なライブラリを追加

全体で一つのコマンドなので、全部まとめてコピペで実行してください。

terminal
1npm install --save \
2  @ckeditor/ckeditor5-dev-utils \
3  @ckeditor/ckeditor5-editor-decoupled \
4  @ckeditor/ckeditor5-essentials \
5  @ckeditor/ckeditor5-paragraph \
6  @ckeditor/ckeditor5-table \
7  @ckeditor/ckeditor5-theme-lark \
8  postcss-loader@3 \
9  raw-loader@3 \
10  style-loader@1 \
11  webpack@4 \
12  webpack-cli@3

これで package.json は次のようになるはず。
(今までの手順をすっ飛ばして、いきなりこのファイルを作って npm install しても構いません。)

json
1{
2  "name": "editor-sample",
3  "version": "1.0.0",
4  "scripts": {
5    "build": "webpack --mode development"
6  },
7  "dependencies": {
8    "@ckeditor/ckeditor5-dev-utils": "^24.4.2",
9    "@ckeditor/ckeditor5-editor-decoupled": "^27.1.0",
10    "@ckeditor/ckeditor5-essentials": "^27.1.0",
11    "@ckeditor/ckeditor5-paragraph": "^27.1.0",
12    "@ckeditor/ckeditor5-table": "^27.1.0",
13    "@ckeditor/ckeditor5-theme-lark": "^27.1.0",
14    "postcss-loader": "^3.0.0",
15    "raw-loader": "^3.1.0",
16    "style-loader": "^1.3.0",
17    "webpack": "^4.46.0",
18    "webpack-cli": "^3.3.12"
19  }
20}

3) webpack.config.js を作る

リンク先の内容をコピペして webpack.config.js ファイルを作り、一箇所だけ書き換えます。

diff
1 'use strict';
2 
3 const path = require( 'path' );
4 const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
5 
6 module.exports = {
7     // https://webpack.js.org/configuration/entry-context/
8-    entry: './app.js',
9+    entry: './src/index.js',
10 
11     // 以下略

4) dist/index.html ファイルを作る

dist ディレクトリを作って、その中に index.html ファイルを作ります。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6  </head>
7  <body>
8    <div id="toolbar-container"></div>
9    <div id="editor">
10      <p>This is the initial editor content.</p>
11    </div>
12    <script src="./bundle.js"></script>
13  </body>
14</html>

5) src/index.js ファイルを作る

src ディレクトリを作って、その中に index.js ファイルを作ります。

js
1import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
2
3import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
4import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
5import Table from '@ckeditor/ckeditor5-table/src/table';
6import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
7import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
8import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
9
10DecoupledEditor
11  .create( document.querySelector( '#editor' ), {
12    plugins: [
13      Essentials, Paragraph,
14      Table, TableToolbar, TableProperties, TableCellProperties
15    ],
16    toolbar: {
17      items: [ 'undo', 'redo', 'insertTable' ]
18    },
19    table: {
20      contentToolbar: [
21        'tableColumn', 'tableRow', 'mergeTableCells',
22        'tableProperties', 'tableCellProperties'
23      ]
24    },
25    language: 'ja'
26  } )
27  .then( editor => {
28    const toolbarContainer = document.querySelector( '#toolbar-container' );
29    toolbarContainer.appendChild( editor.ui.view.toolbar.element );
30    window.editor = editor;
31  } )
32  .catch( error => {
33    console.error( error );
34  } );

6) ビルド

次のコマンドでビルドします。これで dist ディレクトリに bundle.js (および bundle.js.map) ができるはず。

terminal
1npm run build

これでプロジェクトディレクトリの中身は次のようになってるはず。

editor-sample
├── dist
│   ├── bundle.js     (ビルド時に自動生成される)
│   ├── bundle.js.map (ビルド時に自動生成される)
│   └── index.html
├── node_modules      (npm install でインストールされる)
│   └── ...           (中身はたくさんあるので、省略)
├── package-lock.json (npm install でインストールしたものがすべて記録される)
├── package.json
├── src
│   └── index.js
└── webpack.config.js

あとは dist/index.html をブラウザで開くだけ。デプロイの際には dist の中身だけあれば OK です。

投稿2021/04/29 10:20

編集2021/04/29 10:26

hoshi-takanori

総合スコア7901

pegy

2021/04/30 05:06

コメントをいただきありがとうございます。丁寧な解説までいただき申し訳ございません。私自身も折角、詳細までご教示いただいたので、理解しながら進めており、時間がかかってしまい申し訳ございません。プロセスのうち、一つ実行できのですが、理解できない点がございます。 2) 必要なライブラリを追加 npm install --save \ @ckeditor/ckeditor5-dev-utils \ @ckeditor/ckeditor5-editor-decoupled \ @ckeditor/ckeditor5-essentials \ @ckeditor/ckeditor5-paragraph \ @ckeditor/ckeditor5-table \ @ckeditor/ckeditor5-theme-lark \ postcss-loader@3 \ raw-loader@3 \ style-loader@1 \ webpack@4 \ webpack-cli@3 で以上のものをinstallすることを記載いただいているのですが、documentation（https://ckeditor.com/docs/ckeditor5/latest/features/table.html）には上記のものと異なっております。（webpack関連は別物と理解しております。）これに、何に基づきinstall範囲を決定したのでしょうか？是非、後学のためにご教示いただけましたら幸いです。よろしくお願い申し上げます。

pegy

2021/04/30 05:12

依存関係のあるwebpack関係のファイル群は以下のquick-startで見るけることができました。 https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html#lets-start postcss-loader@3 \ raw-loader@3 \ style-loader@1 \ webpack@4 \ webpack-cli@3

hoshi-takanori

2021/04/30 05:59 編集

この回答の趣旨は、質問者さんが npm の扱いに慣れてらっしゃらないようなので、こうすれば動く (動いた) という最小限の手順をお示ししました。npm install に関しては ckeditor と webpack 関連は分けた方が良かったですね。また、私は ckeditor は使ったことがないので、ckeditor の使い方としてはおかしな点があるかもしれません。 ckeditor のパッケージ選択基準ですが、・ckeditor5-editor-decoupled ... DecoupledEditor 本体・ckeditor5-table ... 質問者さんが Table を使いたいようなので・ckeditor5-dev-utils, ckeditor5-theme-lark ... 入れないとビルドエラーになった・ckeditor5-paragraph ... これを入れて plugins に Paragraph を指定しないと文字の入力ができなかった・ckeditor5-essentials ... これを入れたら undo, redo ができるっぽかったのでという感じです。 Table のドキュメントには確かに @ckeditor/ckeditor5-table さえ入れれば良いように書かれてますが、たぶんその前の段階で他のパッケージがインストールされているという前提なのではないかと思います。また、@ckeditor/ckeditor5-build-decoupled-document というパッケージもあって、DecoupledEditor に標準的なプラグインをすべて載せたもののようです。(なぜかサブクラスになってますが、普通に使う分にはこれを参考にして直接 plugins に指定すれば良いはず。) https://ckeditor.com/docs/ckeditor5/latest/examples/builds/document-editor.html https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-build-decoupled-document/src/ckeditor.js --- それから、npm の使い方について大事なことを書き忘れてましたが、 > 設定を変更していない場合、以下のディレクトリに関連するファイル群がデプロイされていることが判明しました。 > /usr/local/lib/node_modules/npm/node_modules/@ckeditor これは npm install -g でグローバルにインストールした場合だと思われますが、npm のライブラリは -g をつけずにローカル (プロジェクトディレクトリの node_modules) にインストールするのが一般的です。これにより、同じライブラリが各プロジェクトごとにインストールされて一見無駄なようですが、そうしないとあるプロジェクトでライブラリのバージョンを変更した場合に他のプロジェクトも影響を受けてしまうので。

pegy

2021/04/30 06:01

失礼いたしました、Creating an editorのセクションを見落としておりました。ご放念ください。

pegy

2021/04/30 06:07

入れ違いになってしまいました、コメントをいただきありがとうございます。まだ道半ばで牛歩で理解しようとしているところ、申し訳ございません。根本的な部分かもしれませんが、このようにバージョンや依存関係を含めて管理して利用する場合、CDNを利用するケースとは異なるアプローチをとっているという理解で良いのでしょうか？（換言すればCDNを利用すれば干渉する可能性もあるため、基本的にはパッケージごと自分のサーバーに収めて管理していく方針となる）たびたび申し訳ございませんが、よろしくお願い申し上げます。

hoshi-takanori

2021/04/30 06:15

CDN を利用するのであれば、次の HTML だけで、上に書いた @ckeditor/ckeditor5-build-decoupled-document が利用できるようです。ただ、これだと table の contentToolbar が少ないですよね。このようなカスタマイズを行いたい場合は、npm を使って自分でビルドすることになるのだと思います。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/decoupled-document/ckeditor.js"></script> </head> <body> <div id="toolbar-container"></div> <div id="editor"> <p>This is the initial editor content.</p> </div> <script> DecoupledEditor .create( document.querySelector( '#editor' ) ) .then( editor => { const toolbarContainer = document.querySelector( '#toolbar-container' ); toolbarContainer.appendChild( editor.ui.view.toolbar.element ); window.editor = editor; } ) .catch( error => { console.error( error ); } ); </script> </body> </html>

pegy

2021/04/30 06:37

コメントありがとうございます。一通り、動かすことができました！ありがとうございます。最後に本当に申し訳ないのですが、試しに追加のパッケージをnpmでインストールをしてみようと動きをチェックしていました。例えば、@ckeditor/ckeditor5-font/src/fontsizeというものを以下で見つけることができたため、試しました。（https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-build-decoupled-document/src/ckeditor.js）基本的に上のご指示いただいているものが適切に動作している前提で、 ①npm install --save @ckeditor/ckeditor5-font/src/fontsize（editor-sampleディレクトリで実行） ②npm run bulidして新たな.bandle.jsを生成するという流れかと理解しております。そこで、①を実行したところ、ターミナル上で以下のようなエラーが検出され実行できません。 npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Applications/MAMP/htdocs/textile/@ckeditor/ckeditor5-font/src/fontsize/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory, open '/Applications/MAMP/htdocs/textile/@ckeditor/ckeditor5-font/src/fontsize/package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent ※editor-sampleディレクトリは都合上、textileに名称変更しており、package.jsonの"name"もこれに合わせて変更しております。 pathがないと言われていますが、これから--saveで自動で作られるものと認識しており、原因がわからず調べています。そもそも追加する方法として間違いがあればご指摘いただければ幸いです。ご迷惑をおかけしていると思いますので、これを最後にいたします。

pegy

2021/04/30 06:39

漏れましたが、インストール先のグローバルとローカルについてご教示ありがとうございます。関連記事を拝見して違いについても理解することができました！

hoshi-takanori

2021/04/30 07:07 編集

fontsize を使うには npm install --save @ckeditor/ckeditor5-font して、src/index.js を書き換えて npm run bulid することになるかと。 js ファイルで import するものと npm install するパッケージ名が違うので紛らわしいですね。パッケージ名に関しては　https://www.npmjs.com/ というサイトで管理されていて、ckeditor 関連のパッケージのリストは https://www.npmjs.com/~ckeditor で見れます。また、https://github.com/ckeditor/ckeditor5#packages にも書いてあります。また、--save オプションは package.json ファイルの dependency を更新するという意味ですが、最近の npm ではデフォルトで package.json ファイルを更新するので、実は不要だったりします。 --- たぶん一番聞きたいことは「なんでこんな面倒なこと (ビルドとか環境構築とか) をしなきゃいけないのか。ブラウザが直接 import を処理してくれたら良いのに。」ってことだと思います。確かに、書いたものをそのまま動かすのと、ビルドという作業を挟むのとでは、根本的に考え方やワークフローを変える必要があって大変だと思いますが、今のところブラウザで import するのはまだ実用的ではないと思うので、頑張ってください。

pegy

2021/04/30 07:32

コメントありがとうございます。なるほど、 ①直接importすることと、webpackを通じて利用することでinstall先の名称が違ったのですが、単純なところに気がつかずに申し訳ございません。 ②また、当初読んだ記事で、maisumakun様の回答記事(https://teratail.com/questions/157447)で"WebpackやParcelを使ってimportを事前に解決したJSを利用することが現状一般的というものを拝見しました。まさに、hoshi-takanori様が仰る、ブラウザで直接importするところは実用出来ではない点と重なる部分かと思います。この点は現状そのような問題が生じているのか、どのようにしてWebpackやParcelといったツールはそこを解決してくれるのかというところを個人的にもう少し勉強してみようと思います。 ③npmやWebpackに初めて触れ、結果的に動作させることができましたが、package.jsonやweboack.config.jsがどのように体系的に役割を担っているかについて、まだまだ理解が足りないため、教えていただいた記事をはじめ、もう少し深度がある勉強をしてみようと思います。結果的にindex.jsのimport先がsrc直下には存在しないディレクトリだったりするのですがここらへんは＠のエイリアスというものと関係があるのだろうと推察はしますが、学ぶことが盛り沢山です！いずれにしましても、勉強する方向を導いてくださるだけではなく、細かいコード等を含めてご教示いただきましたことにつきまして、感謝に耐えません。改めて御礼申し上げます。また、たくさんのお時間を割いていただきましたことについて、お詫びを申し上げます。よろしくお願い申し上げます。

hoshi-takanori

2021/04/30 07:57

> また、たくさんのお時間を割いていただきましたことについて、お詫びを申し上げます。ここはそういうサイトなので、謝らなくても大丈夫ですよ。pegy さんは細かいことに気がついて、一つ一つ理解しようとされているので、とても良い姿勢だと思います。(こちらもつい答えたくなってしまう…。) > 結果的にindex.jsのimport先がsrc直下には存在しないディレクトリだったりするのですがここらへんは＠のエイリアスというものと関係があるのだろうと推察はしますが、学ぶことが盛り沢山です！「＠がエイリアス」というのはその回答者さんの勘違いだと思います。npm のパッケージ名は本来 / を含まないものでしたが、関連するパッケージをまとめるために「@グループ名/パッケージ名」という名前 (scoped package というらしい) をつけられるようになったようです。 https://docs.npmjs.com/about-scopes node_modules の中を覗くと山のようにパッケージがあります。例えば webpack は node_modules/webpack というディレクトリの中にいろんなファイルが入ってます。ckeditor　の場合は、node_modules/@ckeditor というディレクトリの中に関連するパッケージが入っていて、@ckeditor/ckeditor5-font は node_modules/@ckeditor/ckeditor5-font ですね。そして、import FontSize from '@ckeditor/ckeditor5-font/src/fontsize'; で import されるファイルは、その中にある node_modules/@ckeditor/ckeditor5-font/src/fontsize.js というファイルになります。

行動規範の内容に同意します