ReactのコードをBabelとBrowserifyでビルドする
何番煎じかわからないくらいの内容だけど、人に説明する機会ができそうなので整理するために書く
npm-script派なのでgulpとかは使いません
各ライブラリ、ツールの説明
雑な説明とリポジトリURL
詳しく知りたい場合は別のサイトでたぶん死ぬほど書いてる
Reactとは
facebook製のviewライブラリ
同じStateがあれば同じ結果が出てきて、おかしかったらState見ればわかるの楽だと思って使い始めました
Babel
ES2015とかのコードをちょっと前の仕様のコードに変換してくれるトランスパイラー
これがあればES2015のコードが動かないブラウザでも動くコードに変換してくれる
JSXを使う場合は、JSXの変換もしてくれる
Browserify
commonjs方式で書いたjavascriptの依存関係を解決してくれるすごいやつ
これがmodule分割したものをまとめてくれてブラウザで動く状態にしてくれる
本題
本題のReactのコードをbabelとBrowseify使ってビルドする
インストール
npmで必要なパッケージをダウンロード
今回は面倒なので全部--save
でインストールする
npm i -S react react-dom browserify babelify babel-preset-es2015 babel-preset-react babel-plugin-transform-es2015-modules-commonjs
Reactコードの準備
ES2015のclassで書いたReactのコードを用意する
//a.js import React from 'react' const A = (props) => ( <div> <h1>A Component</h1> </div> ) export default A; //b.js import React from 'react' const B = (props) => ( <div> <h1>B Component</h1> </div> ) export default B; //main.js import React from 'react' import ReactDOM from 'react-dom' import A from './a' import B from './b' class Main extends React.Component { render() { return ( <div> <A /> <B /> </div> ) } } ReactDOM.render(<Main />, document.getElementById('app'))
browseifyとbabelでビルドする
./node_modules/.bin/browseirfy main.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]
という感じになる
でも待って
流石に長いよね。babelの公式には.babelrc
にbabel(babelify)の設定は記述する
{ "presets": ["es2015", "react"], "plugins": ["transform-es2015-modules-commonjs"] }
これを作ることによって
./node_modules/.bin/browserify main.js -o bundle.js -t babelify
これだけでbuildできるようになる。
babelの設定は.babelrc
に書くのがデフォです。
プロダクションビルド
この状態で作られたbundle.jsは容量も大きいです。
せめてminify化したりしたいですよね
npm i -S uglifyify
uglifyify
を使って圧縮します
こんな感じ
./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify
簡単ですね。
sourcemapを出したいなら
./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify --debug
--debug
オプションを付けるとsourcemapが出せるらしいです
kindle買いました
amazonプライムデーの時にkindle paperwhiteを買いました。
購入から1ヶ月くらい経ったのでレビューしてみる。
- 出版社/メーカー: Amazon
- 発売日: 2015/06/30
- メディア: エレクトロニクス
- この商品を含むブログ (11件) を見る
買ったもの詳細
他のブログとか見て、散々悩んだ結果wifiのみ、キャンペーン情報無しを選択
使った感想としては4GBしかストレージ無いけど1日で4GB分の本読めないしwifiのみで困ってないです。
使ってみて良かった所
重量
kindleを購入する前は本を持ち歩いていて
地味に重いと思ってたのですがkindleは205gらしくとても軽いです。
更に小さいので気軽にかばんに入れて持ち運べます。
読書時間
通学・通勤時間はずっとtwitterをしていたのですが
kindleを買ってから本を読むようになりました。
最近は漫画もほとんど読まない。読むとしても暇な時に一気見。という生活だったのですが
隙間時間が読書時間になって、読書量が増えました
読んだ本
購入から読んだ本
累
- 作者: 松浦だるま
- 出版社/メーカー: 講談社
- 発売日: 2014/01/31
- メディア: Kindle版
- この商品を含むブログを見る
GE〜グッドエンディング〜
GE?グッドエンディング?(1) (週刊少年マガジンコミックス)
- 作者: 流石景
- 出版社/メーカー: 講談社
- 発売日: 2012/10/17
- メディア: Kindle版
- この商品を含むブログを見る
- 作者: 横槍メンゴ
- 出版社/メーカー: スクウェア・エニックス
- 発売日: 2013/08/16
- メディア: Kindle版
- この商品を含むブログ (2件) を見る
scala教科書(途中)
漫画
paperwhiteの解像度300ppiのおかげで字が潰れていて読めないってことはなかった。
ページめくる時のチラつき?が気になるという記事を見かけたけど
個人的には別に気にならず、下のツイートのように楽しく漫画読んでる。
クズの本懐読んでると「花火ちゃん可愛い」って語彙力ない感想しか出てこない
— 普通怪獣ゆず (@yuzu_441) 2016年8月14日
お兄ちゃんが花火ちゃんよりビッチババア選ぶ意味がわからない
— 普通怪獣ゆず (@yuzu_441) 2016年8月14日
技術書
scala教科書をpdfでダウンロードして読んでる。
自分は普通に読めるのですが
母(40代後半)に見せた所「そんな小さい字読むのしんどいわ」と言われたので
自分の感覚以上に文字が小さく、以外と目が疲れてるのかもしれない。
技術書といえばdockerを勉強したくて
scala教科書読み終わったら買って読もうかと思って調べてて、下の商品が気になった
プログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化
- 作者: WINGSプロジェクト阿佐志保
- 出版社/メーカー: 翔泳社
- 発売日: 2015/11/19
- メディア: Kindle版
- この商品を含むブログ (3件) を見る
この商品を見てるとこんな事が書いてた
本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。
文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください
持ってるkindleで試し読みしてみたら
本文は普通に読めるんだけど、太字の部分?だけ字が潰れて読めない…
辛い所とか
電子書籍読み始めると、紙の本はいいんだけど
持ち運ぶのがしんどい(重さ的に)ので結果的に読む時間が上手く取れない
ipad mini2を友達に貸してもらった時は
字潰れてない!拡大せず字が読める!!漫画なんて見開きで読める!!!って感動したけど
E-Ink使ってみるとやっぱり本読むなら目が痛くならないしE-Inkがいいなと思った。
もうちょっと画面大きいといいなと思うけど(希望的にはipad miniくらい)
E-Inkは線画しんどいって聞いたので、画面大きくなるとやっぱり難しいんだろうか
まとめ
技術書読むのはものによっては厳しいの
Amazonなのか、出版社なのか頑張ってなんとかして欲しい。
せめてkindle paperwriteで見れるものを頼む。
とりあえず漫画読む分には、電車の中でも会社でも気づかれずに読めるし
数十冊持ち運べるので、読み終わってしまって先が見れないとかが無いのでいいと思う。
何より会社で花火ちゃんの可愛さを楽しめるあたり最高のツールだと思ったので
今セールやってるし、みんなもkindleとクズの本懐買って、花火ちゃんの可愛さを味わうといいよ。
zaimの履歴画面が期間は選択できるのに集計出ないのbookmarkletで無理やり集計した
社会人になってお小遣い管理を始めました
何使っても一緒か思って、友達に勧められたzaimを使ってますが
携帯の言語設定に全部引っ張られたり、いろいろ辛い所が…
(言語設定くらいさせてくれても…)
そんなzaimさん
履歴画面で検索を押すと期間絞込できることに気づいて
この期間の合計はいくらなんだろと思った
本題
お仕事でjavascript書き始めてテンション高かったので
集計してくれるjavascript書いた
コード
コードはgistに置いた
zaim集計-履歴画面で範囲選択とかできるのに集計出ない不思議
bookmarklet
上のソースを下のページでminifyして、javascript:
付けた結果が下記コード
JSCompress: Minify Javascript Online / Online JavaScript Compression
javascript:!function(){const t=document.querySelectorAll(".list tr:not(:first-child) .price a"),e=Array.prototype.reduce.call(t,function(t,e){const r=e.innerText;return t+parseInt(r.replace(/¥|,/g,""))},0);alert("合計: "+e)}();