[JavaScript][ES2015]classがサポートされていた

Babelの仕様を見ていたらどうやらES2015ではclassをサポートしているようだ。

class hoge{
  foo(){

  }
}

やっとサポートかぁ～。

[JavaScript][ES2015]アロー関数がサポートされていた

Babelの仕様を見ていたらどうやらES2015ではアロー関数をサポートしているようだ。

var hoge = () => {};

まぁ～この辺はtypescriptと一緒だね。

[babel][node][npm][JavaScript][react][webpack]reactでhello world

babelを使ってreactをコンパイルして、最終的な出力はwebpackにしたい。

今までの知識を総動員して下記の手順を踏んだらできた。

package.jsonを用意する。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
}

babelのインストール。

npm install -g babel-cli
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

package.jsonを修正。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  },
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }
}

念のためjQueryをインストール。

npm install --save jquery

完了後、reactとreact-domをインストール。

npm install --save react

npm install --save react-dom

jsファイルで実装を行う。

import React from 'react';
import ReactDOM from 'react-dom';

jQuery(function($){

  ReactDOM.render(
    
Hello, world!
,
    document.getElementById('root')
  );
})

webpack.config.jsを準備する。

const webpack = require('webpack');

module.exports = {
  entry: './_build/app.1.0.0.js',
  output:{
    path:'./_dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      }
    })
  ]
}

babelコマンドでコンパイル。

babel _scr/app.1.0.0.js -o _build/app.1.0.0.js -w

webpackを実行。

webpack --watch

すると見事に表示されました。

[babel][node][npm][JavaScript]babelコマンドでwatchしたい

babelコマンドwatchすることはできるのだろうか？

babel _src/app.1.0.0.js -o _build/app.1.0.0.js -w

という形で、-wをつけてコンパイルすればおｋ

[npm][node]babelでコンパイルするまでの道のり

reactをbabelを使ってコンパイルするにあたってそもそもbabelを使ったことがないので、その方法をついて調査しました。

まずは、Babel CLIをインストール。

npm install -g babel-cli

globalインストールはバッドノウハウなのですが、いったんはこれで。

次に、reactを使いたいので、

npm install --save-dev babel-preset-react

さらに、es2015に変換してほしいので、

npm install --save-dev babel-preset-es2015

にしてpackage.jsonを下のように設定。

{
  "description": "react test",
  "repository": {},
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  },
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  }
}

でターミナルで

babel script.js

を打ち込んだらでました！

上の場合は、ターミナルに表示されてしまうので、ファイルに出力させたい場合は、

babel foo.js -o hoge.js

でOK

やっとできた。

[JavaScript][node][npm]babelインストール時に警告

npmでbabelをただただインストールしたいだけなのにまた警告。

警告の内容は、
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
ってでてきるんだけど、
[node.js][npm]webpackインストール時の警告
と時と同じでmac環境のapiを使う時に発生する警告なので気にしなくていいみたいなんだけど、気持ち悪い。

[TypeScript][JavaScript]jQueryのコンパイル時にエラー

npm経由でjQueryをインストールした場合、tscコマンド打つと、

../node_modules/@types/jquery/index.d.ts(41,63): error TS2304: Cannot find name 'Iterable'.

というコンパイルエラーが発生しました。

で、調査したところ、tsconfig.jsonに、

{
    "compilerOptions": {
          "lib":["es2015", "es2015.iterable", "dom"]
    }
}

という形で、libを入れたらコンパイルエラーが通りしました。

[node.js][npm][jQuery]webpackでjqueryを使う その3

前回、npmを使ってjQueryをwebpackさせる方法について書きましたが、その際に、

const webpack = require('webpack');
 
module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
    })
  ]
}

と書くと警告が表示されましたが、

const webpack = require('webpack');
 
module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      }
    })
  ]
}

と「warnings: false」プロパティーを使ったら警告がとれました。

まぁーあたり前と言えば当たり前なのですが...

[TypeScript][JavaScript]tscコマンドでtscconfig.jsonを読み込ませる方法

どうやらTypeScript 2.0からtscコマンドでtscconfig.jsonを読み込ませることができるみたいなのですが、何故か読み込まれない。

原因を調べたところ、–projectオプションを使えばいけるみたいなので、

tsc -w --project path_to_tscconfig_json/tscconfig.json

と打ち込めばいいみたいで、実際にそうしたらきちんと読み込んでくれた。

参考
TypeScript tsconfig.json について

[node.js][npm][jQuery]webpackでjqueryを使う その2

少し前にwebpackでjQueryを使う方法について書きました。

で、今回は、npmでjQueryをインストールする方法がわかったのでそれ経由でwebpackの設定方法について調べました。

webpack.config.jsを次のように設定します。

const webpack = require('webpack');

module.exports = {
  entry: './src/app.1.0.0.js',
  output:{
    path:'./dist/',
    filename:'app.1.0.0.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
    })
  ]
}

前回に比べて相当シンプルになりました。

で、/src/app.1.0.0.jsには、

var $ = require('jquery');

$(function() {
  console.log("hello")
})

と書きました。

で、最後に、

webpack --watch

を叩きましたが、ビルドはされブラウザで確認しても正常に出力されるのですが、

WARNING in app.1.0.0.js from UglifyJs
Condition always true [./~/jquery/dist/jquery.js:10213,0]

という警告が表示されてしまい、なかなか取ることができない。

jQueryのプログラムを確認するとif文の部分で、必ずtrueになりますよということなのだが。

これ他のエンジニアってどうやって回避しているんだろー？

[node.js][npm][jQuery]npmでjQueryをインストール

npmでjQueryをインストールする方法について調査しました。

ただただ漠然と

npm install jquery --save

と打ったら

npm WARN saveError ENOENT: no such file or directory, open 'C:\package.json'

npm WARN enoent ENOENT: no such file or directory, open 'C:\package.json'
npm WARN hoge No description
npm WARN hoge No repository field.
npm WARN hoge No README data
npm WARN hoge No license field.

と怒られたので同じディレクトリに
package.jsonファイル
と
README.mdファイル
をそれぞれ用意しました。

で、package.jsonファイルに

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "license": "MIT",
}

を入れて、再度、同じコマンドを打ったら

npm WARN hoge@1.0.0 No description
npm WARN hoge@1.0.0 No repository field.

と警告が表示された。

そして、さらに、

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "hoge",
  "repository": {},
  "license": "MIT",
}

と修正を行い、再再実行したら警告が解消されて無事にインストールされました。

descriptionとrepositoryが必須みたい。

[node][gulp][JavaScript]gulpのインストールで警告がでる

ちょっとGulpを使ってみたいなーっと思って下のようにコマンドを打ったら警告が出た。

npm install --save-dev gulp

[Node.js]バージョンに注意！
で確認すると、どうやら、次のバージョンで修正されるみたいなんだけど...

[node.js][windows]node.jsのバージョンアップ

昔、書いたかどうかも忘れてしまったので改めて1エントリー。

windows環境でnode.jsをバージョンアップさせたい時、どうすればいいのだろうか？

いくつか検索してみたのだが、結果的に、exeファイルを再DLしてインストールすれば上書きされたバージョンアップされるみたい。

実際にそうしたら確かにバージョンアップされていた。

[JavaScript]滞在時間の計測

滞在時間の計測をする必要性に迫られたので、やり方を調査しました。

[JavaScript]ページの滞在時間を求める
で確認すると、以下のような形で着地しそうです。

jQuery(function(){
  var _startTime = (new Date()).getTime();
  $(window).on('unload',function(){
    var _endTime = (new Date()).getTime();
    console.log(_endTime - _startTime)
  });
});

まぁーこれ厳密には、dom readyで発火させているので、もっと厳密性を持たしたい場合は、

var _startTime = (new Date()).getTime();
jQuery(function(){
  $(window).on('unload',function(){
    var _endTime = (new Date()).getTime();
    console.log(_endTime - _startTime)
  });
});

にしないといけないかもしれない。

[JavaScript][jQuery]テキストエリアを入力内容に応じて自動的に高さを調整

昔書いたかもしれないのですが、忘れてしまったので、改めて。

テキストエリアを入力内容に応じて自動的に高さを調整する方法を調査しました。

qiita 入力内容の量に応じたtextareaの自動サイズ変更
テキストエリアの高さを文字数に応じて変更
を参考にしながら、少しアレンジして、以下のように実装しました。

$('textarea').on('keydown', function (e) {
    if (e.target.scrollHeight > e.target.offsetHeight) {
        $(e.target).height(e.target.scrollHeight);
    }
    else {
        //_textAreaHeight is default height
        var _height = $(e.target).height() - _textAreaHeight;
        if (_height < _textAreaHeight) {
            _height = _textAreaHeight;
        }
        $(e.target).height(_height);
        if (e.target.scrollHeight > e.target.offsetHeight) {
            $(e.target).height(e.target.scrollHeight);
            return;
        }
        else if ($(e.target).height() <= _textAreaHeight) {
            return;
        }
    }
});

[html][iOS]textareaの改行って2文字分??

どうやらiOSの場合、下のようにソースを組むと改行するときに2カウントされるみたい。

<textarea maxlength="10"></textarea>

でどうやら
textarea要素の文字数の扱いについて
によると、webkitの仕様のようで、つまりandroidでも発生するみたいです。

めんどくせー。

[typescript][JavaScript]changedTouchesプロパティーエラーになってしまう件

下記のようなソースを組んでビルドするとエラーが発生した。

$('.hoge').on('touchstart touchmove ',(e)=>{
  let changedTouches = e.originalEvent.changedTouches[0];
});

Does TypeScript version 1.7.6 support dts lib for touchevents?
で調査すると下記のように組めばいいことがわかりました。

$('.hoge').on('touchstart touchmove ',(e)=>{
  let original = e.originalEvent;
  if(original instanceof TouchEvent){
    let changedTouches = original.changedTouches[0];
  }
});

これでビルドした結果、確かにエラーが取れました。

[jQuery][css]rgbを16進数に変換

jQueryでstyleメソッドを使ってcolorプロパティーを取得すると、rgbで返ってくるので、
これを16進数にしたい場合を調査しました。

jQueryでrgb(255,255,255)を#FFFFFF形式に変換
によると、

jQuery(function(){
    $(".color").click(function(){
        $(".color").css({"borderColor":"#CCC"});
        $(this).css({"borderColor":"blue"});

        //クリックされた要素の背景色取得
        var bgColor = $(this).css("backgroundColor").toString();
        //背景色の余計な文字列削除
        bgColor = bgColor.replace("rgb(","");
        bgColor = bgColor.replace(")","");
        //文字列分割
        bgColor = bgColor.split(",");
        //10進数を16進数に変換して連結
        bgColor = "#"+parseInt(bgColor[0]).toString(16)+parseInt(bgColor[1]).toString(16)+parseInt(bgColor[2]).toString(16);
        //inputに値を設定
        $(this).nextAll("input[type=hidden]").val(bgColor);
    });
});

と記載されているが、実際、10より小さい数字に場合、違う値が返ってしまうと思っていたところ、何人かの人がコメントで突っ込みをしていた。

var bgColor = $(this).css("backgroundColor").toString().match(/\d+/g);
bgColor = "#"+bgColor.map(function(t){return ("0"+(t|0).toString(16)).substr(-2)}).join("");

[jQuery][slick]slickプラグインのfade処理

slickプラグインを使ってスライドではなくフェードで次のバナーに切り替えたい場合は、どうすればいいのだろうか？

<link rel="stylesheet" type="text/css" href="./slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./slick.min.js"></script>
<div class="_slick">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<script>
jQuery(function($){
  var $slick = $('._slick');
  $slickFade.slick({
    autoplay: false,
    autoplaySpeed: 3000,
    infinite:true,
    fade: true,
    cssEase: 'linear'
  });
});
</script>

fadeプロパティーをtrueにすればおｋ

[jQuery][JavaScript]history api state

前回、JavaScriptを使ってhistory back(ヒストリーバック　戻る) 、history forward(ヒストリーフォワード　進む)を検知する方法を書きました。
で、その時に一体、今、どの状態なのか把握したいときがあります。

そんなときは、stateプロパティーで取得することができます。

$(window).on('popstate',function(){
  //初回アクセス
  if (!e.originalEvent.state){
  }else{

  }
});
//history.pushState(state, null, url);

ただ、
History APIとスマホブラウザでのハマりどころ
によると、
iOSの7では、stateを参照することができず、android 4.1もだめだったりするので、それより上のバージョンで使いたいですね。