はじめに

個人ベースでなんかちょっと遊びで作ろうと思ったときに、electronとかWebGLとかが存在したり、GUIを作るときが楽だったりという理由でプロトタイピングにjavascriptとかブラウザベースでの開発をしてみることが自分は多いのです。

そこで何らかのライブラリやフレームワークを使用するとき、今までは個人で遊ぶ程度ということもあり、公式からソースをダウンロードして、scriptタグで読み込んで…というふうに行っていました。

けど、流石にかっこ悪いなと思ったり、自分のレベルアップのために、流行ってるというnpmで云々しようと思ったら意味がわからなかったのでお勉強の結果をまとめたということです。

最後になるたけ簡略化した具体的なコードを示そうと思います(ネットに落ちてる情報が分散していたり難しかったりが多い気がします。)

お勉強の結果の結論

せっかちな人のために結局の手順だけ書いておきます。

npm installでパッケージ追加
↓
requireでパッケージをインポートしてコードを書く
↓
Browerifyでブラウザで実行できる形にビルド
↓
ブラウザで開いて動作確認　

そもそもNode.jsとは

Node.jsはもともとはサーバーサイドの処理をjavascriptで書けるのがウリの環境であって、こいつ自体はソースにライブラリのような形で組み込まれるものではありません。

いや何を当たり前なことを…と思うかたもいると思うのですが、.jsってついてるライブラリとかがあるので最初勘違いしてました

ところがこのNode.jsは、後述のnpm+browserifyによってもはやサーバー側なのかクライアント側なのかよくわからないものになっていると思われます。

npmとは

Node.jsのパッケージマネージャーです。様々なライブラリや依存関係などを便利に管理してくれるものです。

このnpmがbrowserifyによって非常に便利になったため、ありとあらゆるパッケージやライブラリが集約された結果Node.jsの立場がサーバー側とは断言しにくいものになりました。

いまやjQueryもnpmを経由するのが一般的?になっているらしく大変なことです。

初心者バイバイ環境

Browserifyとは

npmとよくセットで出てくるこの子がnpmをさらに便利にしてしまいました。
Browserifyは,"require"という、他言語で言うところのimportのような機能を開放し、かつそういったimport関係などをまとめた、ブラウザで動くコードを生成してくれる子です。

ブラウザ側用のコードを生成できることがポイントで、これを使用するとNode.jsのもともとの理念から離れてクライアント側もNode.jsの環境を使用して作ることができるようになってしまいます。

他にも機能はあるとは思うんですが、ここが一番大きい気がします。

これによって、
npmでパッケージ管理→requireでパッケージ利用→browesrifyでビルドすると直ぐブラウザで開けるコード
といった開発手順が可能になりました。自分で複数わけたソースの統合も容易なので劇的だと思います。

実際にnpm+Browserifyで環境を作る。

ここからが実際の簡単な開発の例です。

Node.js(npm)のインストール

Node.jsをインストールするとnpmもインストールできるので、インストールしましょう。
https://nodejs.org/ja/download/
↑公式です。ある程度詳しい方はhomebrewとかでいいとおもいます。

プロジェクトフォルダを作る。

サンプルプロジェクトを作ります。構成はこんな感じです。

sample_project/
 |
 |---build/
 |---src/
 |---index.html

index.htmlは最低限の簡素なものにしておきます。

index.html

<!doctype html>
<html lang="ja">

    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <style>
            #square{
                width: 300px;
                height: 300px;
                background: black;
            }
        </style>

    </head>
    <body>
        <div id="square"></div>
    </body>
    </html>

ひらくと黒い四角形がでていると思います。

npm環境を初期化。

以降カレントディレクトリはsample_projectであるとします。

cd sample_project

ここでnpm_initを叩きます。今回はすべてエンターキーで良いです。
ライセンスや、gitのリポジトリなどを登録できるので、本当になにか作るときはちゃんと入力しましょう。

すると、package.jsonというのができます。このpackage.jsonはスクリプトの登録などで使います(後述)

npmでパッケージの導入。

先程あげた必須であるところのBrowserifyとanime.jsというのを試しに導入してみたいと思います。

npm install browserify --save
npm install animejs --save

でローカルにインストールします。

!npmのグローバルインストールとローカルインストールとは。
そのままの意味でそのプロジェクトのみにインストールするか、全体にインストールするかです。-gオプションをつけるとグローバルになります。基本的にはローカルが推奨です。
すると、node_modulseフォルダが作成され、anime.jsやbrowserify関連のフォルダがいろいろできていると思います。

現状のフォルダ構成はこんな感じだと思います。

sample_project/
 |
 |---build/
 |---node_modules/
 |       |---フォルダたくさん
 |---src/
 |---index.html
 |---package.json
 |---package-lock.json

srcフォルダにもととなるソースコードを書く。

Browserifyでビルドする前のソースコードを作ります。
index.htmlに読み込みを追記することなくrequireで使いたいパッケージを使いたいところで呼び出すことができます。

main.js

function test(){
    const anime = require("animejs");
    let s = document.getElementById("square");
    anime({
            targets: s,
            translateX: [
                {value : 250, duration:1000, delay:300},
                {value : 0, duration:1000, delay:300}
            ],
            loop:true
        });
}

window.addEventListener('DOMContentLoaded',test);

index.htmlにBrowserifyでビルドしたあとのソースコードを読み込む部分を追記する。

でビルド後のjsを読み込みます。まるで手間が変わってないかのようですが、Browserifyは複数のjsをまとめてビルドすることが可能なので、ここで読み込むスクリプト数は減らせますし、またhtml側をいじることも減ります。

index.html

<!doctype html>
<html lang="ja">

    <head>
        <title>sample</title>
        <meta charset="utf-8">
      <!--********************************************************-->
        <script src="./build/main_com.js"></script>    <!--追加部分-->
      <!--********************************************************-->
        <style>
            #square{
                width: 300px;
                height: 300px;
                background: black;
            }
        </style>

    </head>
    <body>
        <div id="square"></div>
    </body>
    </html>

browseifyでbuildしてみる。

まず、package.jsonのscriptに以下のbuildようにスクリプトを追加します。

package.json

  "scripts": {
     "build" : "browserify ./src/main.js > ./build/main_com.js"
  },

登録したら、コマンドラインで以下を叩いてみます。

npm run build

するとbuildにブラウザで実行可能な形のjsができています。index.htmlで読み込む設定をしてあるので、この状態でindex.htmlを開くと黒い四角が左右に動いているのがわかると思います。

たまに詰まるところ。

指定ディストリビューションのrequire

パッケージによってはminバージョンなど複数のディストリビューションがあることがあります。その際にbrowserifyで指定のディストリビューションを読み込むには、package.jsonに以下のような要素を追加します。