yutaponのブログ

javascript界隈の興味あるネタを備忘録的に残しておく場所

webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る

この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + p…

YAPC::Asia Tokyo 2015に行ってきた

8/21, 8/22とYAPC::Asia Tokyo 2015@ビッグサイトに行ってきた。 ブログを書くまでがヤップシー。 はじめに 自分が見てきたトークだけ書きます。 聞けなかったトークはtogetterを見るとライブ感ありつつ読めるので 後ほど読んでみる。 togetter.com

ES6構文の ... (Spread operator)と { prop } (shorthand property names)について

es6

昨日twitter見てたらこんなのが流れていまして Concatenating arrays in ES6: arr = [...a, ...b, ...c]; // ES6 arr = a.concat(b, c); // ES5 http://t.co/4scyTyhmIo— Axel Rauschmayer (@rauschma) 2015, 6月 3 何だこの書き方〜と気になったので調べて…

React+FluxでTodoMVCを作ってFluxについて学んでみた

ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参…

KaomojifyJSとかいうUglifyJSの亜種を試してみた

5 Minites of JavaScriptで紹介されていたKaomojifyJSをちょっと触ってみたという記事。 Nekuromento/UglifyJS · GitHub はじめに そもそもuglifyjsはjsのスペースとか改行などを取り除いたり、変数名を短くしてコードを圧縮するツールです。 生成されたコー…

React入門用に簡単なアプリケーション作ってみる

React入門系の記事はもう結構出尽くしてる感ありますがせっかくなので私も。 今回はReact v0.13RC2を使って↓のアプリケーションを写経してみます。(Authorは私ではありません) 見ての通り、抵抗の値を計算するアプリケーションです。 Reactで書かれていた…

フロントエンドでもES6構文使ってみる【webpack+babel-loader(旧6to5-loader)】

es6

【--- 追記(2015/02/22)---】 2/15に6to5がBabelと名称変更したので、記事の内容もBabelを使うよう変更しました。 Not Born to Die · Babel 【--- 追記ここまで ---】 2/7にnode.js v0.12.0がリリースされました。 Node v0.12.0 (Stable) 安定版のメジャー…

gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】

この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを…

gulpでsassをコンパイルするタスクを作る

何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い…

TypeScriptを使ったBackbone.jsアプリケーションの書き方

先日TypeScript使ってBackbone.jsのアプリケーションを書いて、いろいろハマったので備忘録的に書いておきます。 はじめに 既にTypeScript+Backbone.jsのサンプルはいくつか上がってたりします。 有名なのはTypeScript+Backbone.jsでTodoアプリケーションを…

Hubot+HipChat+Yukkuroidで喋るBotを作る

Hubotのスクリプトを作るときに、Yukkuroidと連携するとすぐに声を加えることができるのでオススメ。 やってみたら簡単にできました。 環境について 今回の動作環境はこちら。 Yukkuroidの話なので、Macじゃない方はあまり参考にならないかも。 MacOSX 10.9 …

Ansible使ってVagrant上のCentOSにHubot入れる

GithubKaigiでHubotが結構フィーチャーされてたので触ってみました。 https://hubot.github.com/ https://github.com/github/hubot Hubotでヒューボットと読むらしいです。 (Human + Botとか) 最近思うのですが、何かの環境構築するならAnsibleでPlaybook書…

TypeScriptリファレンス読んだ感想

前に書いた記事の続きになります。 TypeScript触ってみた感想 - yutaponのブログ やっとTypeScript本を一通り読んだ(目を通した)ので、メモ書きをまとめてみる。 大雑把な感想 TypeScriptのことをたくさん書いてあるのは 4章 基礎知識 6章 応用知識 あたり…

Object.defineProperty()について調べた

es5

TypeScript本の5章ではコンパイル後のJSファイルを読めるようにJavaScriptの仕様について解説されています。 Object.defineProperty()というメソッド、ご存知でしょうか。 このメソッドは主に書き換え不可能なオブジェクトプロパティを定義するため使います…

TypeScript触ってみた感想

TypeScriptリファレンスを買って、4章まで読んだのでその感想を。 大雑把な感想としては、勉強しておいて損はない言語、といったところです。 ちなみに章構成はこんな感じです。 概要 開発環境の構築 TypeScript & JavaScript基本文法 基礎知識 必要とされる…

IRKitとSiriを連携して家電制御したかった

GWはIRKitとSiriを使って家電制御する仕組みを作ってたんですが、 SiriProxyがまだiOS7に対応してないとのことで、連携できませんでした。。 完成させてから紹介するつもりでしたが、どんなことをしようとしたのか書いてみます。 IRKitとは IRKit - iPhone,i…

express4でRESTful API作る

ちょっとnode.jsでAPIサーバ作ろうとして express4に上げたらいろいろと使い方が変わっていたので 備忘録的に書いておきます。

AngularJSを触ってみた感想

AngularJSってどんなものかなとオライリーのAngularJS本を3章まで読み進めたのでその感想を。AngularJSアプリケーション開発ガイド作者: Brad Green,Shyam Seshadri,牧野聡出版社/メーカー: オライリージャパン発売日: 2014/04/18メディア: 大型本この商品を…

1時間1円から使えるSSD VPS、DigitalOceanことはじめ

DigitalOceanといえばSSD VPSなのに1時間当たり約1円弱で使える格安VPSとして有名です。 有名な紹介記事はこちら。 徳丸浩の雑記帳: 試験環境用VPSとして1時間1円から使えるDigitalOceanが安くて便利VagrantとSSDなVPS(Digital Ocean)で1時間1円の使い捨て高…

Ansible使ってVagrantのゲストOSの構成管理する【Playbook: jenkins, node.js】

去年辺りからimmutable infrastructureが盛り上がってきている感があります。 サーバーの環境をコードで記述するツールにはPuppet、Chefなどがありますが、 今回はAnsibleを触ってみます。 Ansible is Simple IT Automationこの記事ではVagrantでCentOS6.5を…

Backbone.js+RequireJSでテンプレートエンジンにHandlebars.jsを使う

前回さらっとHandlebars.jsを使っていたんですが、ふわっとしていたのでもう少し詳しく説明します。 前回の記事: Backbone.js+D3.jsでデータの可視化【準備編】 - yutaponのブログ Handlebars.js: Handlebars.js: Minimal Templating on Steroids RequireJS…

Backbone.js+D3.jsでデータの可視化【準備編】

先週はnode.jsでニコ動のランキング情報をJSON取得するコードを書きましたが、 今回はそのデータを使って棒グラフを書くってところまでやります。 (d3.jsの事前知識は公式のチュートリアルを読んだくらいです。)普通にd3.js使っても面白く無いので、Backbo…

ニコ動のランキング情報をJSONで取得してみる

d3.jsで可視化したら面白そうなデータ無いかなーと思い、 ニコ動なら毎日データが変わって面白そうなのでAPIを調べてみました。だいぶ汚いけどデータを持ってくるところまでは出来たので、 この次くらいに可視化します。 ということで今回はバックエンドでデ…

半加算器と全加算器で足し算してみた【testem+mocha+chai】

TDD

訳あってJavaScriptでのビット演算について調べてたのでその経過を残しておきます。 もっと良いやり方があるに違いないけど、わからない。。 はじめに やりたいことは、2つの数を足す関数を作ることです。 ・・・そんなの簡単!、とはいかなくて、 算術演算…

Browserifyの使い方について調べてみた

最近Browserifyって単語を良く見るようになりました。Browserifyをざっくり説明すると、 ブラウザ上でもNode.js用モジュールを使えるようにする ブラウザでもrequire()を使ったモジュール管理を使えるようにする という特徴があるようです。browser(ブラウ…

Backbone.jsに入門してみる【Router編】

久しぶりのBackbone.js入門。 Backbone.jsガイドブックを見ながらまとめてますが、 後半は試行錯誤のたまもの。 Backbone.Routerとは Backbone.RouterはサーバーサイドMVCフレームワークでいうところのCにあたる部分、でもありますし、VCでもあります。 Back…

ダンボーの目を七色に光らせる【LED換装】

Arduinoとほぼ同時にこのダンボーも購入していて、 実はずっとダンボーの目を七色に光らせることを目標にやってきてました。【Amazon.co.jp限定】 リボルテック ダンボー・ミニ Amazon.co.jpボックスver (リボコンテナ入り/ダンボールカラー)出版社/メーカー…

RequireJSの導入から使い方(Bowerにも触れてみる)

Backbone.jsのRouter編を書く前にどうしてもRequireJSについて おさらいしておきたく書いてみる。あまり深くRequireJSについて理解してなかったこともあり、 結構調査したので理解が深まった。それと今まで使ったことなかったけどBowerにも触れてみる。 結構…

Arduinode使って距離センサーとフルカラーLEDを組み合わせる

前に書いたコードの上に距離センサーを組み合わせてみるだけ。 Arduinode使ってNode.jsからフルカラーLEDを制御してみる - yutaponのブログ前のコードは一定時間毎にLEDをランダムに表示するものでしたが、 今回は距離センサーの値を基準に指定の色を表示し…

JavaScriptだけでメールが送れるらしいのでやってみた【Backbone.js】

JavaScriptというか、XHRでメールを送信できるサービスがあるらしいので試してみます。 これを知った記事がこちら。 jsだけ使ってメールが送れる世の中らしい - 以下斜め読んだ内容そんなサービスを提供してるのがMailChimpのMandrill。 Transactional Email…