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

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

ただいまの
回答率

90.75%

  • Node.js

    1735questions

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

  • npm

    245questions

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

Node.js、npm を使った開発方法がわからない。(node_modules)

受付中

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 378

Node.js と npm 初心者です。
gulp もインストールしました。

最終的にやりたいこと

PWA を作成して Firebase Hosting にデプロイ

現状

Web Starter Kit と同じディレクトリ構成で PWA のレイアウトを Material Components で作成しています。
作っていくうちにディレクトリ構成が正しいのか不安になりました。
※以下記憶があいまいなところがあります。

プロジェクトフォルダ(web-starter-kit-x.x.x)で npm install して node_modules ができました。(package.json がここにあったので)
プロジェクトフォルダで gulp serve を実行してライブリロードできることを確認しました。
次に app フォルダ内の index.html を編集

<link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
・・・略・・・
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>


ここで localhost は /app なのだから上にある node_modules を参照できない。

プロジェクトフォルダをルートにして ../node_modules/ とすれば動くようにはなりますが、当然使うときに localhost/app/ となってしまいます。

まとめると

わからないことだらけですが、

  • ビルドやコンパイルなどの作業で /app 下に .js と .css を生成するのでしょうか。
  • 完成品も node_modules を参照するのか。(app/scripts と app/styles に必要なファイルを生成して、不要になったりするのか)
  • node_modules の正しい場所がわからない。
  • 他、おかしいとところをご指摘ください。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

node_modulesはubuntuだと/usr/local/lib直下にあります。expressなどをインストールしていれば、そこに同じくあるはずです。
localhostのURL指定で参照されるディレクトリはあなたがサーバウェアの設定ファイルに書いたドキュメントルートです。(apacheならhttpd.conf)

私はworkディレクトリ(usr/localとはまったく別のディレクトリを切って)直下にapp.jsを置いてますが、

sudo node app.js

で問題なく動かせています。htmlやcssに関してもworkディレクトリに置いとけば動くはずです。これはnode.jsうんぬんではなくlinuxのディレクトリサービスの話なので、linux本などでそのあたりを学習してみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

ひとまず安心してください。
最後の〆以外はかなりイイところまで行っています。
少しの調整で綺麗なディレクトリ構成になりますので、座学→実践編の順にお付き合いください。

material-components/material-components-web
QuickStartの欄は非常にダメなサンプルなので、真似しないでください。


まず開発者である質問者さんは、CSSやJavaScriptファイルを何処に設置しなければならないか?
そもそもこれが定まらないと話にならないわけですね。

Node.jsのお約束として、
困ったときにはpackage.jsonやgulpfile.babel.jsといったファイルを見ましょう。
今回はディレクトリ構成がどうあるべきかという情報はgulpfile.babel.jsにバッチリ記載されていました。

CSSやSASSのファイルはL.86〜89にあるように、app/stylesディレクトリの配下に存在することを前提としています。

  return gulp.src([
    'app/styles/**/*.scss',
    'app/styles/**/*.css'
  ])

JavaScriptファイルはL.113にあるように./app/scripts/main.jsただひとつです。
次の行に// Other scriptsとか書いてありますが、ファイル同士を無理やりconcatでくっつけるだけのようなので、main.jsを起点に外部ファイルを読み込んで連携した方が筋が良いです。

    gulp.src([
      // Note: Since we are not using useref in the scripts build pipeline,
      //       you need to explicitly list your scripts here in the right order
      //       to be correctly concatenated
      './app/scripts/main.js'
      // Other scripts
    ])

もう少しgulpfile.babel.jsを読み進めましょう。

  • CSS系: L.86〜102
    SASSとしてコンパイルをした後に、dist/stylesに次々と吐き出しています
  • JS系: L.109〜127
    app/scripts/main.jsをbabelで変換掛けて縮小化した後にdist/scripts/main.min.jsとして出力しています
    (ソースマップも吐き出していますのでデベロッパーツールで表示した時に何処でエラー吐いてるか全く分からん…ということもありません)

これがnode_modulesからCSSやJSファイルを連れてくる糸口になります。


node_modules配下のCSSファイルの持ち出し方。

Sassはご存知ですか?
素の芋っぽい書き方しか出来ないCSSと違って、変数やセレクタのネストが出来る超強化CSSです。
ただし、ブラウザはCSSしか読み込めないのでNode.jsでコンパイルしてCSSに変換かけてからデプロイします。

まぁ、そんなSASSですが、importという外部ファイルを読み込む超必殺技を持っています。
3-7 Sassの @import - Sassの教科書

app/styles/main.sassみたいなファイルを作っておいて…

@import '../../node_modules/material-components-web/dist/material-components-web.css'

これでdist/styles/main.cssを開けばnode_modules配下のCSSを持ち出せた事が確認出来るかと思います。


node_modules配下のJSファイルの持ち出し方。

CSSもSASS使って持ち出せるんだから、JSもなんかあるでしょ?
察しがいいですね、その通りです。

JavaScriptにはES2015というバージョンがありまして、
それのimport機能を使って外部のJSファイルにアクセスすることが出来ます。
import - Babel

importとexportは対になっていまして、
慣れるまでは少々難しいとは思いますがこれを機にES2015に関して色々と勉強してみてください。

material-components/material-components-webのトップページにあるように、この一文で取り出せるようになるかと思います。
import {checkbox as mdcCheckbox} from 'material-components-web';

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/30 00:53

    gulpfile.babel.js に何が書いてあるのかなんとなくですが、理解しました。
    SASS も書いたことがありませんが、どのようなものなのかはわかりました。
    gulp.babel.js の 92 行目でコンパイルらしきことをしているので、別で設定やコンパイル作業をする必要はないのでしょうか。

    CSS
    app/styles/main.sass ファイルを作成後、中に
    @import '../../node_modules/material-components-web/dist/material-components-web.css'
    を記述しましたが、app/styles/main.css の更新日時は変わっていませんでした。
    dist/sytles/main.css は更新日時は変わっているものの、dist/index.html を開いても material components が反映されていませんでした。

    JavaScript
    import {checkbox as mdcCheckbox} from 'material-components-web';
    は app/scripts/main.js の上のほうに記述すればよろしいのでしょうか。

    HTML
    app/index.html の CSS と JavaScript は
    <link rel="stylesheet" href="styles/main.css">
    ・・・略・・・
    <script src="scripts/main.min.js"></script>
    <script>mdc.autoInit()</script>
    だけにすればよろしいのでしょうか。

    キャンセル

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

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

関連した質問

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

  • Node.js

    1735questions

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

  • npm

    245questions

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