webpackでRailsアプリのアセットをビルドする

エンジニアの大塔です。
現在はRailsアプリのフロントをメインで触ってます。

webpackerに頼らないフロントエンドビルド環境を構築してみたので、そのお話をします。
 

背景

フロントエンドではNode.jsを使ってJavaScriptやCSS等のアセットをトランスパイルすることが一般的になったかと思います。

思い出すだけでも、フロントエンドではgrunt, Browserify, webpack, SystemJS, rollup.jsと色々なフロントエンドのビルドに絡むツールが出てきました。

自分自身も、元々はBrowserifyやwebpackでES6やTypeScriptのビルドを実行していました。

続きを読む

ES2015のGenerator、および Async/Await を使った非同期処理について

マネーフォワードでフロントエンドの開発者をしています大塔と申します。

今回は個人的にお世話になることの多いGeneratorおよび Async/Await を使って非同期処理を、同期処理っぽく書く方法について、記載させていただきたいと思います。

環境構築

webpackrollupなど新しいバンドラーが出てきていますが、今回はECMAScriptのビルドにgulpを使います。またトランスパイラにはBabelを用います。

  • NodeJS 4.2.1
  • npm 2.14.7
  • Google Chrome 49.0.2623.112 (64-bit)

続きを読む

ReactとReactNativeでFluxなTODOを実装してみた話

流行り言葉ばかりのタイトルになりました。フロントエンドエンジニアの平山です。
先に言っておきますと、マネーフォワードでは流行り言葉を使いこなすフロントエンドエンジニアを募集しています!!!

とりあえず押してからでも遅くはない!
マネーフォワード 採用情報 https://recruit.moneyforward.com/

というわけで、タイトルの通り、ReactとReactNativeで同じ動作をするTODOリストを作ってみました。
 

デモ

React-flux-todo デモ
ReactNative-flux-todo.png

※ React(ウェブ)です。ReactNative編はお手数ですが、READMEを参考に実行をお願いします。

続きを読む

SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法

マネーフォワードでフロントエンドの開発をしています頼本です。

前回の「Haml、Sassを使って効率よくコーディングする方法(基礎編)」に引き続き、
今回は、初級編として、マネーフォワードがどのようにHaml、Sassを使っているのか、実戦で使える内容を例にご紹介いたします。
 

SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法

デフォルトのチェックボックス・ラジオボタンは小さい・・・デザイン的にイケてないので見た目を変更したい・・・そんな要望は多くあると思います。
そこで、今回はinput+labelとSassやCSSで簡単にチェックボックス・ラジオボタンをカスタマイズする方法をご紹介します。
 

チェックボックス・ラジオボタンのデザインをカスタマイズした時の見た目

チェックボックスのカスタマイズ

ラジオボタンのカスタマイズ

続きを読む