webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る - yutaponのブログ
この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + power-assert + jsdom でテストを書く やらないこと gulpまわり React.js CSSビルドまわり 最終的なコードはこちらに上げておきました(すごく簡素な出来です)。 GitHub - sskyu/webpack-power-assert-jsdom-skeleton はじめに 今年はReact.jsがJSerの中で定着した感がありました。 Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、React
ES6構文の ... (Spread operator)と { prop } (shorthand property names)について - yutaponのブログ
昨日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 何だこの書き方〜と気になったので調べてみた。 ... (Spread operator) この三点リーダーのことですが、よく...argsと書いているコードを見かけます。 あまり深く考えずに、argumentsが取得できるのかなと思ってたのですが、...のふるまいを知るとなるほどと思いました。 ...arr で arr(Array型)の要素をイテレートする 困ったときのMDNを見ると、こんなサンプルがあります。 こちらはES5 syn
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
KaomojifyJSとかいうUglifyJSの亜種を試してみた - yutaponのブログ
5 Minites of JavaScriptで紹介されていたKaomojifyJSをちょっと触ってみたという記事。 GitHub - Nekuromento/UglifyJS: JavaScript parser / mangler / compressor / beautifier library for NodeJS はじめに そもそもuglifyjsはjsのスペースとか改行などを取り除いたり、変数名を短くしてコードを圧縮するツールです。 生成されたコードは人間が読めないようなものになるので、難読化するツールとも言えます。 kaomojifyjsは難読化する際に、変数名などを顔文字化するツールです。 つまりネタツールのようです。 ちょっと触ってみた感じ、単に動かすだけならコマンドライン上で実行するのが 簡単だったので動かす手順を紹介します。 準備 ここからリポジトリをクローンしてきま
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
1時間1円から使えるSSD VPS、DigitalOceanことはじめ - yutaponのブログ
DigitalOceanといえばSSD VPSなのに1時間当たり約1円弱で使える格安VPSとして有名です。 有名な紹介記事はこちら。 徳丸浩の雑記帳: 試験環境用VPSとして1時間1円から使えるDigitalOceanが安くて便利 VagrantとSSDなVPS(Digital Ocean)で1時間1円の使い捨て高速サーバ環境を構築する - Glide Note DigitalOceanのことはrebuildfm#2で知って興味持ちました。 Rebuild: 2: Rails, Redis, VPS (Kenn Ejima) それまでVPSといえばさくらVPSがメジャーだと思ってましたが、 調べてみるとDigitalOceanがなんとも良さ気です。 今回はDigitalOceanの登録から簡単な使い方を説明します。 こちらのリンクから登録していただくと、私に少しバックがあるようです。 Di
Ansible使ってVagrantのゲストOSの構成管理する【Playbook: jenkins, node.js】 - yutaponのブログ
去年辺りからimmutable infrastructureが盛り上がってきている感があります。 サーバーの環境をコードで記述するツールにはPuppet、Chefなどがありますが、 今回はAnsibleを触ってみます。 Ansible is Simple IT Automation この記事ではVagrantでCentOS6.5を入れて、その上にAnsibleでJenkinsを入れるところまでを説明します。 （入門向けで、Ansibleについて突っ込んだことは書いていません） Ansibleとは？ AnsibleはPuppet、Chefなどと同様に構成管理ツールです *1 一番の特徴はPuppet, Chefに比べてリモートホストに特別な設定が必要ないことでしょうか。 ssh接続ができて、python2.4以上が入っていれば動きます。 設定はYAMLで記述し、特にpythonを知らなくても
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
