読者です 読者をやめる 読者になる 読者になる

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…

Arduinode使ってNode.jsからフルカラーLEDを制御してみる

Arduinoの教本に必ず載っているフルカラーLEDの制御。 それをNode.js経由でやってみます。ArduinoとNode.jsの間にはArduinodeというライブラリを使いました。 mironal/arduinode · GitHub 作者さまに感謝です。

CSSのクラス名を決めるときに抑えておきたいBEMって概念

css

普段フロントの開発ばかりやってるので、たまにはCSSのネタを。CSSのidとかclassとかの命名って難しいです。 適当につけてると破綻してくる。そこでBEMを覚えておくと命名に規則性を持たせることができます。 でも結論からいうと、完全にBEMで作るのは現実的…

2014年の目標とかいろいろ

新年迎えてから結構日が経ちますが、ここで今年の目標など残しておきます、 という自分向けの記事。以下今年の目標 ブログを週一更新する JS以外の言語を習得する Webサービス公開してみる ブログを週一更新する 慣れてる人にはなんてことはないと思いますが…

MacでRaspberry PiにNode.jsをインストールする

Raspberry Piが届いたので早速Node.jsを入れてみました。 Raspberry Piとは Raspberry Pi - Wikipedia 簡単に言うと、すごく小さいLinux系PCです。 PCなのに$35と安価で、メインとしては使いにくいですが ちょっとしたタスクを任せるには適しています。前回…

Node-SerialPort使って温度センサーの値を読み取る

最近ArduinoとかRaspberry Piとかに興味を持ちだしました。 フィジカルコンピューティングって分野になるっぽいです。それで取っ掛かりとしてArduinoから電子工作に入門して、 入門書も半分くらい実践してみたところで Node.jsとArduinoを連携させてみようと…

Backbone.jsに入門してみる【サーバー通信編 (Model, Collection)】

今回はBackbone.ModelとBackbone.Collectionを使って サーバーサイドとRESTな通信をしてみます。サーバーとの通信ですが、別に難しいことはありません。 jQueryでいう $.get(), $.post() をBackbone.js風に使うだけです。 はじめに サーバーとの通信ですが、…

git, git-flowの補完とプロンプトにブランチ名を表示する

git

JS界隈じゃないけどTips的な記事を。 今どきGitを使わないで開発することはないと思うので、 開発しやすいように補完を入れましょう。 それとgit-flowなど、たくさんのブランチを切り替えて開発するときに 便利なのでプロンプトにブランチ名を表示しましょう…

node.jsでRedisを使ってみる【実践編】

久しぶりの更新。 node.js + Redisでチャット作ろうとして挫折してました。orz 作ったもの githubに置いておきました。 yussk/mychat · GitHub 動かし方 cloneして、redis起動して、依存モジュールをインストールすれば動きます。 $ git clone git@github.co…

node.jsでRedisを使ってみる【準備編】

久しぶりにnode.jsです。 普通に動くAPIを用意したいので、ストレージを選定する必要があります。候補としては MySQL Redis MongoDB の3つがあったのですが、MySQLは結構つかったことがあるので あまり使ったことのないRedisにしました。 機会があればMongoD…

Backbone.jsに入門してみる【Model+Collection+View連携編】

今回はModel, Collection, Viewの連携をしてみます。 設計 電話帳をずっと例にしてきたので今回も電話帳で。電話帳は複数の電話情報の集合なので、 電話情報(Model) 電話帳(Collection) と整理することができます。 これらを表示するために、 1件あたり…

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

今回はBackbone.Viewを取り扱います。 この記事を書く前にいろいろ試してみたのですが、 なかなか難しく理解が甘いので2回やります。 Backbone.Viewとは MVCモデルでいうVCがBackbone.Viewになります。 サーバーサイドのMVCフレームワークを使ってきた人には…

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

Backbone.Collectionは本格的に使ったことがないです^^; ほんとの入門になります。 Backbone.Collectionとは CollectionはModelの集合を扱いたい場合に使います。 前回は電話帳を作ろうとしていたのですが、 電話情報がModelであって、それを束ねる電話帳がC…

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

今日はBackbone.Modelについてです。 Backbone.Collectionはあまり使ったことがないので、また別で扱います。 Backbone.Modelとは Modelといえば、MVCのMのことです。 DBから値を得たり、表示用に加工したり、ロジックを書いたりします。 注意したいのがDOM…

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

普段からBackbone.js使ってますが、実は細かい仕様はわかっていなかったり^^; 初心に返って基礎的なところを振り返ります。 Backbone.jsって何? Backbone.jsはクライアントサイドのMVCフレームワークです。 と、よく説明されますが、サーバーサイドで慣れ親…

javascriptでテスト駆動開発 Mocha+expect.js+testem【後編】

TDD

前回はtestemを使って自動でテストが走る環境作りをしました。今回も引き続きTDDっぽいことしていきます。 addメソッドをテストする 前回作ったcalcモジュールのaddメソッドをテストしていきます。まずは新しいターミナルを立ちあげて、 プロジェクトのディ…

javascriptでテスト駆動開発 Mocha+expect.js+testem【前編】

TDD

JavaScriptのテストをするツール達 テスト駆動するときに必要なツールが2つあります。 テストフレームワーク テストランナー テストフレームワーク いわゆるxUnit系のツールがこれにあたります。 JavaScriptでの有名ドコロは下記のスライドが参考になります…

node.jsでRESTful API作る

node.js触るのは5ヶ月ぶりくらいなのでリハビリも兼ねて。まだRESTなAPI作ったこと無いな・・ ということで、アプリケーションサーバとしてnode.jsを選んだときに RESTfulなAPIを返すサーバを作ってみます。ちなみにほぼ node.jsでREST APIを作るのに最適なe…

express3.2を触ってみる

初投稿になります。 web系のエンジニアしてます、sskyuことyutaponです。 普段はBackbone.jsとかjsRenderとか使ってフロント側のコードを書いてます。 と、前置きはこのくらいにして、今回はnode.js界隈のmvcフレームワークであるexpressを触ってみた感想で…