近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる...! 覚える方はともかく、 教える側がツライ。 今回、未来なJavaScriptやCSSの文法で書いても、よしなにとりなしてくれるWebサーバ「Felt」を作ったので、ご査収ください。 (2016/7/19 関連ツールとの比較を追記しました) GitHub: https://github.com/cognitom/felt npm: https://www.npmjs.com/package/

npmはJavaScriptのパッケージマネージャです(今更感)。依存するライブラリはpackage.jsonに登録されていき、npm installだけで必要なライブラリが読み込まれます。と書くとシンプルな話ですが、実は結構奥が深いのです。そんなnpmのdependencies5種類、ちゃんと使い分けしてますか? 本稿では、順番に見ていきたいと思います。(npmのドキュメントも見てね) dependencies devDependencies peerDependencies optionalDependencies bundledDependencies

このドキュメントは、Riotの公式ドキュメントのWhy Riot?とRiot developer guideの全訳です。修正あれば、こちらにプルリクエストください 追記・公式に取り込みました! 記事はこのまま置いておきますが、最新版は公式サイトを参照してください。 公式ドキュメント: http://riotjs.com/ja/ なぜ Riot? 答え1: カスタムタグ RiotはIE8以降の全てのブラウザで、カスタムタグを実現します。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </f

JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで

「3分でできるnpmモジュール」に、公開のための手順がまとめられていて分かりやすかったので(感謝)、実際に3時間でモジュールを作ってみました。そのときにやったことのメモ。 (ちなみに、作ったのはPhantomJSをgulpから使いやすくするプラグインgulp-phantomです。よかったら使ってください〜) なにするの? モジュールのお膳立て 実装 GitHubにソースコードを置く npmに公開する 1時間目 まずはお膳立てから。最低限、必要なファイルはこのあたりです。1時間目に、太字のファイルからやっつけます。 package.json .npmignore .gitignore .travis.yml index.js test/ LICENSE README.md package.json こんな感じのやつですね。公開しないプロジェクトだと、dependencies以外、省略している

PhantomJSはすごく便利なのですが、ちょろっと使いたいだけのときにスクリプトファイルを用意するのは若干面倒です。対話モード(REPL)も用意されていますが、対話的に使うだけならChromeの方が使いやすい場面が多いです。 今回の想定シーンは、「GitHubでStarしてくれた人の一覧が欲しい」というようなケース。時々、Issueで全員に連絡したいことがありますよね。↓ こういうやつ。 @user1, @user2, @user3, ... GitHubだとJSONを返すAPIが用意されているので、それを使います。 コンソールを開く 新規タブを開いて、about:blankに移動します。まっさらな状態にするのがポイントです。 jQueryを仕込む PhantomJSを使う場合もそうですが、素のJavaScriptだと面倒が多いので、jQueryを仕込みます。次の2行を実行すればOK。