Fukusanの日記らしきもの

なんとも言えない感じで更新したり、しなかったりするブログです

Webpack使ってみた

はじめに

この記事は、Prolab Advent Calendar 2017の12日目の記事として書かれています。

adventar.org


それから、今回の記事の内容に間違いなどが在りましたら、(出来るなら優しく)教えてもらえると幸いです。

本題

Webpackとは?

主にJavaScriptを1つのファイルにまとめるやつ。(個人的見解)

ただし、その他にもSassをcssに変換したりAltJSをトランスパイルしたりなど

様々な機能がある。

Webpack使うと何がいいの?

  • JavaScriptのファイルが1つにまとめられるのでページが表示されるまでにサーバーとの間で行われる通信の回数が少なくなる。
  • npmで落としたライブラリーやフレームワークを利用できる。
  • コーディング中の手間が減る。(webpack-dev-server)

使い方

今回はnpmで落としたライブラリーを利用する、複数ファイルに分けたコードを

1つのファイルにまとめるところまでを説明してみます。

Node.jsの環境が整っていることを前提に書きます。

 

ファイル構成(npm init 後)

自分で作っているのはsrc以下とindex.html、webpack.config.jsです。

.
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── bundle.js
│   └── index.html
├── src
│   ├── main.js
│   └── modules
│       └── sub.js
└── webpack.config.js
  1. まずはnpm init

    ターミナル

    $ npm init

    聞かれる質問にはとりあえず適当に答える。

    (-yというオプションをつければ全部エンターを押した場合の挙動になる)

  2. Webpackをインストールする

    ターミナル

    $ npm install webpack -D -save

    -D -save とは
    package.jsonにwebpackを開発用のモジュールとしてインストールしたことを記録する。という意味

  3. Webpackの設定をする
    JavaScript(webpack.config.js)
    const path = require('path');
    module.exports = {
    	entry: './src/main.js',
    	output:{
    		filename: 'bundle.js',
    		path: path.join(__dirname, '/public')
    	},
    	devtool: 'inline-source-map'
    };
    entryにはWebpackが解析を始める最初のファイル(./src/main.js)、
    output.filenameには出力するファイル名(bundle.js)、
    output.pathには出力先のディレクトリを指定する。
    devtool: 'inline-sorce-map'は出力したファイルのソースマップを出力する設定(デバッグの時便利)
  4. 使うライブラリーを読み込んでおく

    ターミナル

    $ npm install jquery -save


    今回はとりあえずjQueryを読み込んでみる。

  5. main.js,sub.jsを記述する

    JavaScript(main.js)

    const $ = require('jquery');
    const Sub = require('./modules/sub.js');
    $('#output').text(Sub.add(1, 2));

    JavaScript(sub.js)

    module.exports = {
    	add: (a, b)=> a + b
    };

    main.jsではjquery、sub.jsを読み込み利用している。
    sub.jsでは足し算をする関数addを定義している。

  6. Webpackでmain.js,sub.js,jqueryをまとめたbundle.jsを作る

    ターミナル

    $ ./node_modules/.bin/webpack

    Pathを通したりしてないのでちょっと力ずく
    (package.jsonのscriptsにコマンドを書いておけば短いコマンドでよくなるのでとりあえずこれでいいことにする(あんまりよくない))

    このコマンドを打つと、./publicにbundle.jsが作られる。
    htmlでbundle.jsを読み込むと#outputのタグに3と表示される。

    お疲れ様でした。

おまけ

npmでwebpack-dev-serverというモジュールをインストールして

ターミナル

$ npm install webpack-dev-server -D -save

以下のようにwebpack.config.jsを変更すると

const path = require('path');
module.exports = {
	entry: './src/main.js',
	output:{
		filename: 'bundle.js',
		path: path.join(__dirname, '/public')
	},
	devtool: 'inline-source-map',
	devServer : {
		port : 3000,
		contentBase: path.join(__dirname, 'public'),
	},
};

ターミナルで

$ ./node_modules/.bin/webpack-dev-server --inline --hot

というコマンドを打つことで開発用のサーバーが起動して

localhost:3000でhtmlを開くことが出来ます。

また、この状態ではファイルを保存するたびにwebpackでの処理が必要な箇所にのみ実行され、ブラウザがリロードされます。

(保存した後色々コマンドを打ったりブラウザをリロードしたりする手間が省けて便利)

まとめ

ダラダラ書いていたら0時に遅刻してしまいました(謝罪)。

あまりうまい説明ではないですが、Webpackをこれから使ってみようと思う人の

手助けになれば幸いです。

 

さて、明日(今日)のアドカレ担当はdenchu4491くんです。

どんな記事を書いてくれるか楽しみですね。

Web Audio API使ってみた

はじめに

この記事は、prolab Advent Calendar 2016の12月21日の記事として書かれています(遅刻です)。 www.adventar.org

自己紹介

こんにちは、Fukusanです。 プロラボでJavaScriptを書いたり、 某ちゃんさんにタスクを投げられたりしています。

今回作ってみたもの

今回は、音声ファイルをドロップすると再生する静的HTMLを(深夜テンションで)書きました。
※PCで開いてください、モバイルフレンドリーではないです(ごめんなさい)

音声ファイルをresultの領域にドロップすると再生します。(音が出るので注意)
ファイルをドロップしてから再生されるまで時間がかかる場合があります

See the Pen rWRBxw by 福さん (@Fukusan) on CodePen.

ほんのちょっとWeb Audio APIについて解説

今回、僕が使った機能について簡単に説明します。 ちゃんと理解できているか怪しいので間違いを見つけた方は教えていただけると嬉しいです。

AudioContext

音声の再生を管理するクラス、AudioContext.destinationに接続することでWeb audio APIで音を鳴らす事ができます。

AnalyserNode

AudioContext.createAnalyser()の返り値で、音声の時間と周波数を解析することができます。

AudioBufferSourceNode

AudioContext.createBufferSource()の返り値で、AudioBufferオブジェクトに書き込まれた音声データを再生することができます。

今回作ったものについて

画面への表示についてはcanvasにただ描画しているだけなので省略します。また、音声ファイルの読み込みについても今回は省略します。

音声データのデコードについて

ArrayBufferとして読み込んだファイルのデータを

//audioCtxにはthis.audioContextが入っている
this.audioCtx.decodeAudioData(data,callback)

でデコードします。callbackには、デコードの結果が引数に渡されます。 今回は、デコードの結果をAudioBufferSourceNode.bufferに代入しています。

AudioNodeの接続の関係

AudioNode(AnalyserNode,AudioBufferSourceNodeなど)は

//AudioNodeの部分には
//AnalyserNode,AudioBufferSourceNodeなどが入る
AudioNode.connect(AudioNode);

と書くことによって接続することができます。 今回作ったものでは、 AudioBufferSourceNode→AnalyserNode→AudioContext.destination という風に接続しています。 AudioBufferSourceNodeで再生した音をAnalyserNodeでスペクトル情報を取得して画面表示し さらに、音をAudioContext.destinationに渡して鳴らしています。

スペクトル情報の取得について

音のスペクトル情報はAnalyserNodeのgetByteFrequencyDataメソッドで取得できます。

//this.analyserにはAnalyserNodeが入っている
var spectrums = new Uint8Array(this.analyser.frequencyBinCount);//結果を入れるためのspectrums(Uint8Array)を準備
this.analyser.getByteFrequencyData(spectrums);//spectrumsにスペクトル情報(0~255)を入れる

spectrumsの長さはAnalyserNodeのfftSizeというプロパティの値(デフォルトは2048)により変化しますが、その長さは、AnalyserNode.frequencyBinCountから取得することができます。 このようにして取得したスペクトル情報を使って描画しています。

まとめ

僕はWeb Audio APIを初めて使ってみて、機能がとても充実していることに驚きました。 特にスペクトル情報の取得が簡単に行えることはとても便利です。 ぜひ、一度興味がある方はWeb Audio APIを使ってみてください! ただ、僕は説明が下手なので上記の内容だけで理解できる人は少ないと思います。 もし、興味があるという人は、自分で調べていただくともっとわかりやすいサイトが出てくると思います(このブログの意味…)

こんな感じで終わりたいと思います。

prolab Advent Calendar 2016、明日はゲ・ドリンク大先生の記事です。

jQuery使ってみた

始めに

皆さんいかがお過ごしでしょうか。
Fukusan(「福さん」でもある)です。
今回、部活のアドベントカレンダーに参加するという形で
生まれて初めて、ブログなるものを書いております。
www.adventar.org

さっそく本題

今回の内容は題名の通り「jQuery」です(今更)。
jQueryについて、ざっくり説明すると、JavaScriptのライブラリーで、
これを使うことによりJavaScriptをより扱いやすくすることが出来ます。
今回は、jQueryの書き方などについて自分の分かる範囲で書いていきたいと思います。

jQueryの読み込み

jQueryを使うには、まずjQueryライブラリーを読み込む必要があります。
読み込み型には、主に次の2つがあります。

  1. Web上からソースを読み込む
  2. ダウンロードしてローカルから読み込む
まず、1の方法から

読み込みたいHTMLソースに以下のように書き込むだけ

例(jQuery1.9.1を読み込む)
JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
次に、2の方法

まず、jQueryの公式サイト
http://jquery.com/download/(公式サイト)
から、jQueryライブラリーをダウンロードします。
バージョンはjQuery1.x系と、jQuery2.x系がありますが、jQuery2.x系は、IE6,7,8をサポートしていません。
なので、理由がないのなら、jQuery1.x系でいいと思います。
次に、HTMLに読み込みます。
以下のようなソースを読み込みたいHTML に書き込みましょう。
JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

jQueryの書き方

基本形

まずは、jQueryの基本形です。

$(function(){
  // 内容
});

これは、「内容」をhtmlを読み込んでから処理を実行する
という意味です。

「要素」を選択する

要素を選ぶ部分を「セレクタ」と言います、jQueryセレクタの書き方はcssセレクタと似ています。
ここでは、基本的なセレクタを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う$('#element')の部分のこと*/
$(function(){
  /*id="element"の要素を選択する*/
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*class="element"の要素を選択する*/
  $('.element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*p要素を選択する*/
  $('p').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*div内のp要素を選択する*/
  $('div p').click(function(){
    $(this).text("クリックされたよ~");
  });
});
実行するタイミングを書く

実行するタイミングを決める部分を「イベント」と言います。
ここでは、基本的なマウス操作関係のイベントを紹介します。

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う.click()の部分のこと*/
  • クリックイベント
$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
  • マウスオーバーイベント
$(function(){
  $('#element').mouseover(function(){
    $(this).text("マウスカーソル乗ったよ~");
  });
});
  • マウスアウトイベント
$(function(){
  $('#element').mouseout(function(){
    $(this).text("マウスカーソル降りたよ~");
  });
});
実行する処理を書く

jQueryでは、要素のcssを書き換えたり、要素を動かしたり、要素を追加したりなど、様々な処理をする事ができます。
ここでは、その中からいくつかを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う.text()の部分のこと*/
  • cssを変更する(ここでは、背景色を変更しています)
$(function(){ 
  $('#element').click(function(){
    $(this).css("background-color","#fff");
  });
  • 要素を動かす(ここでは、要素を500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化させています)
$(function(){ 
  $('#element').click(function(){
    $(this).animate({
      left: 50, opacity: 1
    },500);
  });
  • 要素を追加する(ここでは、id="#element"の要素の後に新しいdiv要素を作っています)
$(function(){ 
  $('#element').click(function(){
    $(this).after('<div>test</div>');
  });
});

最後に

簡単な説明でしたが、jQueryについて、少しでも興味を持っていただけたら幸いです。
この記事に書いた内容は、jQueryの書き方のほんの一部です。
もし、興味を持っていただけたのなら、ぜひ自分で調べて、書いて、学んでください。
ここに書いていない、新しいjQueryの書き方に出会うことができると思います。