若者の成長曲線は半端なく、おじさんエンジニアは日々恐怖を覚えます。 出る杭はちゃんと打っておきましょう。 環境の弄りがいのあるツールを教えるEmacs, VIM, zsh, tmuxなど…設定のいじりがいのあるツールは理想の環境を追い求めても終わりはなく、コンフィグはどんどん膨れ上がるばかりです。 それらを「一流のプログラマは、一つの道具にこだわりとことん使い尽くすもんだぜ」とでも言って、ずっとDotfilesのリポジトリばかりいじるようになってくれれば、彼らがプログラミングに費やす時間は減るはずです。 バイナリアンにさせるいくらアプリケーションが作れても、低レイヤのことが分からないとダメだと刷り込みます。 「プログラムがどうやって起動するか分かってる? えっ、mainを書けばそれが呼ばれる? あのなぁ、_startというのがあってだな…」 無駄に低レイヤに詳しいおじさん力を活かして、あた

注意：この記事では Babel 5 を使っています。 Babel 6 を使用する場合は、このままだと動作しません。対応方法は、Quick guide: how to update Babel 5.x -> 6.x — Medium 等を参照して下さい。 Grunt や Gulp などのタスクランナーを使わず、webpack だけでフロントエンドを開発する方法を調べてみました。 以下、実際に簡単なウェブアプリケーションを作ってみます。 環境 webpack 1.12.0 ESLint v1.2.1 OS X 10.10.5 前提条件 JavaScriptは ECMAScript 6 で書けるようにします。但し、今回の記事内では ECMAScript 5の文法のみ使用しています。 CSSファイルは webpackで処理することにより、JavaScript のコードで表現されるようになります。こ

5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016 シングルページアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。 このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」（通称デブサミ）のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。 注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気

(2016/05/23 追記) 記事内で取り扱っている技術で、はてぶコメント等で質問の多かった「webpack」についての解説記事を書きました。 最新版で学ぶwebpack入門 – JS開発のモジュールバンドラ - ICS MEDIA Web技術はよく技術の進化が早いと言われます。多くの技術が現れては消える中で、どの技術を学ぶべきかを選択するのは重要です。選択するポイントの1つに「技術の将来性・人気があるかどうか？」があります。今回は基本的なフロントエンド技術である「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」の3つについて、それぞれの人気をGoogleトレンドで調べてみました。 CSSコーディングの流行り CSSは、SassやLESSに代表される「CSSプリプロセッサー」を使ってプログラミングすることで、品質と効率を大きく向上させることが可能

最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"

Railsでgulpを使ってアセットファイルの管理できる環境を構築します。 gulpはアセットを管理するツールで、js、css、imagesなどのアセットファイルをビルドして、それをRailsから参照する流れです。 また、gemにバンドルされているアセットファイルもあるので、Sprockets(Railsのアセット管理のgem)は有効にしておきます。有効にしておきますが極力使いません。 gulpでsass/scssのコンパイル、ES6のコンパイル(babel, webpack)、gulpの便利プラグイン(変更監視、画面リロード、通知)、ミニファイ、ダイジェスト付与をできるようにします。 そして、gulpで作成されたcssやjsのアセットファイルをRailsからロードできるようにします。 参考にソースファイルをGitHubに上げたあります。 https://github.com/nipe03