ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

WebpackでMoment.jsを使う時の注意点

JavaScript

公式マニュアルには書いてあるのだが、何も設定せずに、Webpackを使うと標準のMoment.jsのコード量がとても大きいため、最終的に出力されるファイルも必然的に大きくなってしまう。

momentjs.com

そこで不要なローカルタイムの設定を削除し、必要なタイムゾーンのみ残すには、Webpackでpluginを使う必要がある。

// 省略
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

// 省略
module.exports = {
  plugins: [
    new MomentLocalesPlugin({
      localesToKeep: ['es-us']
    })
  ]
};

// 省略

これ盲目的に使うとコード量が肥大化してしまうので注意が必要である。

IE11でforEachがエラーになってしまう現象について

JavaScript

document.querySelectorAllで複数のDOMを取得して、forEachでループさせようとするとIE11でエラーが発生する。

document.querySelectorAll('.hoge').forEach(function(currentValue){

})

そこで素直にfor文を使ってエラーを解消することにした。

var _hoge = document.querySelectorAll('.hoge');
for(var i=0;i<_hoge.length;i++){
  var _currentValue = _hoge[i];
}

IE11ってモダンブラウザじゃーないのかぁ〜。

せめてサポートしておいてくれよと思ってしまった。

scss cssのベンダープレフィックスを追加するmixin

css scss sass

scss、css共にコーディングする時に、ベンダープレフィックスをつけるのが正直めんどくさい。

もっと手軽に解決する方法はないのか探していたら、mixinで処理する方法を発見した。

css-tricks.com

上で紹介されているmixinでもいいのだが、もっとコンパクトに書けるかもしれないと思い、少し修正を加えた。

@mixin vendor-prefix($property, $value) {
    $vendor-prefixes: (
        "moz",
        "webkit",
        "ms"
    );
    @each $vendor-prefix in $vendor-prefixes {
        #{'-' + $vendor-prefix + '-' + $property}: $value;
    }
    #{$property}: $value;
}

上で紹介したコードの方が2つの点で利点があると思っている。

まず1個目は、vendor prefixがmixinのローカル変数として定義されるのでグローバル環境を汚染しないということ。

2個目は、呼び出す時に、変数を一つ減らすことによって、cssプロパティーとその値だけを引数に設定すればいいので運用しやすいということ。

今後はこちらを使っていく。

今さら聞けないwebpackを使ってVue.jsを始める

Vue

今さらwebpackを使ってVue.jsを初めてみた。

まずは、npm経由でVue.jsをインストール

npm install vue

importを使ってVueをインクルードさせた上で、JavaScriptの実装をする。

import Vue from 'vue';
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

webpack.config.jsの設定を行う。

const path = require('path');

module.exports = {
  mode: "production",
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname)
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    },
  },
  watch: true
};

最後はお決まりの、configコマンドを打って終了！

npx webpack --config webpack.config.js

babel.jsを使わない分導入までの敷居が低くていいかも！

React.Componentでclassを付与する時の注意点

React

React.Componentのrenderメソッドを使ってDOMを表示する時がある。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

ここで、htmlタグにclass属性を追加したい場合、一つ注意点がある。

それは、classとそのままではなく、classNameと書く必要があるということ。

// NGパターン
class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div class="foo">Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

// OKパターン
class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div className="foo">Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

参考

reactjs.org

Swiperをnpm経由で使い最後にwebpack

JavaScript

Swiperというレスポンシブ対応をしたスライダー(カルーセル)プラグインがある。

idangero.us

jQueryプラグインとしても使えるし、jQueryに依存せず独立して使うことができるわけだが、今回、npm経由でインストールを行い、最後に、webpackする方法について調査したので、それをまとめる。

まず、ターミナルで、npmコマンドをうってインストールをする。

npm install swiper

次に実行するjsでimportでswiperをインクルードさせる。

import Swiper from 'swiper';
new Swiper('#hoge', {

});

最後に、webpackで一つにまとめる。

npx webpack --config webpack.config.js

JSXでReact.Componentを宣言する時の注意点

React JavaScript

Components and Props

reactjs.org

と

JSX In DepthのUser-Defined Components Must Be Capitalized

reactjs.org

を読み返してびっくりしたことがあった。

React.Componentを表示する時、頭文字を大文字にしないといけないということだ。

どういうことか例を出す。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

例として簡単なソースコードを記載した。

divタグにHelloMessageコンポーネントを表示させる処理なのだが、HelloMessageの頭文字がHと大文字になっているのでこの処理は正常終了する。

ところがだ、Hを小文字にした場合は、エラーが発生する。

class helloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <helloMessage />,
  document.getElementById('test')
);

これはどういうことかというと、React側の処理として、小文字の場合は、ブラウザがサポートしている標準のタグと認識するので、React.Componentが小文字だとそのままタグとして表示しようとしてエラーになってしまう。

今まで当たり前のように、React.Component宣言時は、頭文字を大文字にしていたので気にならなかったので、これは盲点だった。