jsのパッケージをインストールする場合npmを使うことが多いですが、yarnを使うとより高速にインストールできるというので試してみました。
next.jsでHello worldプログラム（zeitの公式ページに掲載されている）を動かす際に
npm run devしてコマンドを実行してもエラーが出て動かなかったので原因を調べてみました。
エラーを見たところ、
Error: listen EADDRINUSE :::3000と表示されていました。
デフォルトでhttp://localhost:3000 でページが表示されるようなのですが、私の環境ではMacのApacheがポート番号3000を抑えていたので動かないのだろうと推測しました。
次にnext.jsで使用するポート番号を調べたところgithubに方法が載っていました。package.jsonの”dev” : “next”となっているところを以下の通りに変更すればよいことがわかりました。
"scripts": { "dev": "next -p 任意のポート番号" }試しにポート番号を8080などにかえてnpm run devしたところ、ブラウザでhttp://localhost:8080にアクセスして問題なくHello Worldが表示されました。
Velocity.jsでアニメーションさせるCSSのプロパティとその値を丸ごと変数に入れて動かす方法を調べました。
当初
<button class="btn">translateX:"+=100"</button>となっているHTMLからjQueryで
var val = "{"+$(".btn").html()+"}";として値を取得しそのままVelocity.jsで使おうとしていたのですが、動きませんでした。
以下のようにHTMLを変更し、splitで分割しブラケット記法にした変数に代入すると丸ごと変数を利用できます。
<button class="btn">translateX:+=100</button>あとでブラケット記法にした変数に代入する際に自動的にクオーテーションが追加されるので値のクオーテーションをとりました。
$(".btn").on('click',function(){
var opt = $(this).html().split(":");//コロンで値を分割して配列optに代入
var val = {};//ブラケット記法のための変数
val[opt[0]] = opt[1];//プロパティに対してその値を代入
$(this).velocity(
val ,
"easeInSine",
);
});button要素をクリックすると、クリックしたボタンがX軸方向に100px移動します。