Umi Uyuraのブログ

Titaniumを使ったスマートフォンアプリ開発を中心に、プログラミング関連の作業ログ。

React

React v0.14とBabelify v7(Babel v6)へアップデート

新しいReactベースのプロジェクトを作ろうとして、せっかくなので以前作った雛形のパッケージ類をアップデートしておくことにしました。 umi-uyura.hatenablog.com ちょうど最近、Reactがv0.14系になり、トランスパイラであるBabelもv6系になったようなので…

ESLintの設定事始め

先日、とりあえずEmacsでESLintを使う環境を作ってみましたが。 umi-uyura.hatenablog.com チェック内容を設定しておかないと意味がないので、基本的なものだけでも設定しておこうと思い、調べてみました。 設定ファイル雛形の生成 そもそも、これまでESLint…

EmacsのESLint環境をセットアップした

以前、EmacsでReact(JSX)コーディングする環境について調べた際に、JSXの構文チェックとして JSXHint を使うようにしました。 umi-uyura.hatenablog.com ところが、こちらの記事によると、どうやらすでにJSXHintはDeprecatedになっていて、ESLintへの移行を…

NW.jsのパッケージング方式の見直し

先日、自分用のReactのプロジェクトテンプレートの構造を見なおしたついでに、 React + NW.jsのテンプレートの方 (umi-uyura/react-on-nwjs-sample) も同じ方針で改良しておくことに。 umi-uyura.hatenablog.com ついでに、以前のテンプレートでは配布形式の…

自分用Reactひな形プロジェクトのプロジェクト構造を見直し

先日、Reactの勉強用に作ったプロジェクトのひな形( umi-uyura/my-react-boilerplate )ですが、プロジェクトの構造を変更することにしました。 umi-uyura.hatenablog.com 気になってきたところ 当初の構造は以下のような感じでした。 . ├── README.md ├── …

React + Material UI + Moment.jsでタイムゾーン変換ツールを作った

海外のWebinarを見たりする際などに 9:00 AM PST って日本時間のいつになるの?というのを調べることがあるので、タイムゾーン変換ツールを作ってみました。 GitHub Pagesで公開しています。 TimezoneConv ソースはこれです。 umi-uyura/timezoneconv 良かっ…

React + BrowserifyプロジェクトでJS/CSS/HTMLを圧縮(Minify)する

ReactとMaterial UIを組み合わせると、それだけでBrowserifyで結合したJavaScriptファイルが1MB超えてしまうので、やっぱり圧縮とかした方が良いのかな―と思い、やり方を調べてみました。 ※2015/08/03更新 Licensifyを開発された @t_wada さんから改良の連絡…

Material UIのv0.10.0が出ていたので見てみた

Material UIのv0.10.0が出たようです。 Material UI、v0.10.0が出てる。バージョンアップ早い。Breaking Changes書いてあるけど、最近使い始めた自分にはあまり影響なさそう / https://t.co/5QdgldMwuV— Umi Uyura (@umi_uyura) July 10, 2015 またマイナー…

React + Browserify + Babelify環境の自動リロードにBeefyを使ってみた

最近Reactを少し触っていましたが、業務の関係もあって、純粋なWebサイトではなく、主にNW.jsのUI構築用に使っていましたが、せっかくなので、シングルページなWeb制作でも使っていけるようにしようと思って、試しています。 NW.jsのときに作ったBrowserify …

Browserify環境でMoment.jsの国際化を利用しようとしたときのメモ

ちょっとした日時計算をするだけのペライチなWebページを作ろうとしていました。 日時情報を取り扱う処理を実装するので、定番の Moment.js を組み込んでいたのですが。 UI部分は最近取り組んでいるReactを使うことにして、JSXの変換も済ませた形で組み込む…

Material UIのTableをさっそく使ってみて

Material UI v0.9.2でTableコンポーネントが追加されました。 Table - Material UI ちょうどデータの閲覧ツール的なものを作っていたこともあり、これを使うと見た目が整理できて良さ気だな、と思ったのですが、まだ First iteration と言っているくらいなの…

Material UIをLESSからInline Style方式にアップデートした

ReactとNW.jsでツールなど作っていたときに、デザインフレームワークとして Material UI を使ってみました。 React + NW.jsにデザインフレームワークとしてMaterial UIを組み合わせてみた - Umi Uyuraのブログumi-uyura.hatenablog.com そのときのバージョン…

JSXトランスパイラをBalelifyへ乗り換えた

少し前にReactとNW.jsで遊んでいたのですが。 React(JSX)開発にBrowserifyとReactifyを導入 - Umi Uyuraのブログumi-uyura.hatenablog.com Browserify + ReactifyにWatchifyを導入してJSXの自動ビルド環境を作った - Umi Uyuraのブログumi-uyura.hatenablog.…

差分比較ツールMeldを起動するための「Meld Launcher」を作った

差分比較ツール Meld を起動するためのツール「Meld Launcher ( umi-uyura/meld-launcher )」を作ってみました。 Meld Launcher 何をするものか Meldで比較する対象を、ドラッグ&ドロップで指定して実行するだけのツールです。 Meldはフォルダの比較表示が…

React + NW.jsにデザインフレームワークとしてMaterial UIを組み合わせてみた

私はデザインセンスがかけらもないので、UI部分については、どうしても素っ気ないものになってしまいます。 最近取り組んでいるReact + NW.jsですが、そのまま作ると素のHTML要素が並ぶことになるので、せめて基本的なコンポーネントくらいは見栄えを良くで…

Browserify + ReactifyにWatchifyを導入してJSXの自動ビルド環境を作った

引き続き、Browserifyを勉強中。 React(JSX)開発にBrowserifyとReactifyを導入 - Umi Uyuraのブログumi-uyura.hatenablog.com react-tools(jsx)でやっていた、.jsxの変更を監視してビルドできるようにするため、 Watchify を導入してみることにしました。 イ…

React(JSX)開発にBrowserifyとReactifyを導入

そろそろ <script> タグではなく、Node.jsらしく require でモジュール読み込みしたくなってきたので、Browserifyを試してみることにしました。 ベースとしたプロジェクト 以前React on NW.jsの取っ掛かりとして作ったサンプル があったので、違いを理解するためにも…

EmacsでReact(JSX)コーディングする環境について調べてみた

Reactの開発をする際、JSXで書くのか、それともJavaScriptベースにするのかと大きく2パターンありますが、コンポーネントの構造が把握しやすい点や、タイプ数も少なくなりそうなので、JSXで書くことにしています。 JSXの場合、JavaScriptのコードの中にHTML…

React + NW.jsでFinderからドラッグ&ドロップ

以前node-webkitで作ろうとしていたツールで、MacのFinderからファイルやフォルダをドラッグ&ドロップで指定できるようにしようとしてうまくいかなかったことがあるのですが、ふとGitHubのNW.jsのWikiを見ていたら、 それについて書かれたページ を発見して…

React + NW.js開発時のpackage.jsonを見直し

先日、React + NW.jsのプロジェクトをnode-webkit-builderでパッケージングした際、プロジェクトローカルに開発用の依存パッケージとしてインストールしました。 React + NW.jsのプロジェクトをnode-webkit-builderで配布形式にパッケージングしてみた - Umi…

React.createClassで生成したオブジェクトを入れる変数は大文字で始めること

タイトルどおり、凡ミスをしました。 現象と原因 引き続き、React on NW.jsという構成で社内用のツールを作っていたのですが、ちょっとした小さいコンポーネントを追加した際に画面が崩れる(表示されなくなる)という状態になりました。 とても小さいコンポ…

ReactのAPIを眺めてみた

先日から少しずつ触っているReactですが。 NW.js上でReactを動かしてみた - Umi Uyuraのブログumi-uyura.hatenablog.com とりあえず日本語で入門的な情報がまとまっている 一人React.js Advent Calendar 2014 - Qiita をざっと読んでみました。 後半のAdd-on…

NW.js上でReactを動かしてみた

昨日NW.jsを触ってみたついでに、ツールの中身はReactを使ってみることにしました。 node-webkit改めNW.jsを触ってみた - Umi Uyuraのブログumi-uyura.hatenablog.com 今回作ろうとしているツールは、お客さんが提供しているAPIを叩いて、結果を自社で持って…