はてなブックマーク

Angular 2 の RC が出たので試しにコンポーネントを書いてみます。 インスト―ル @angular/ で始まるのが Angular2 本体です。ほかにもいろいろ必要なのでインストールしておきます。 ビルドは Browserify + babelify を使うことにします。 angular2 むけのプリセットがあるので簡単です。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-preset-angular2 $ npm install -S @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic reflect-m

TypeScript 1.8 で JavaScript を直接インポートできるようになるみたいなので試してみました。 インストール まだ開発版なのでバージョンをちゃんと入れる必要があります。 $ npm install -g typescript@1.8.0-dev.20160125 JavaScript をインポートする まずは JavaScript を TypeScript から インポートする簡単なコードを試してみました。 // a.ts import * as b from './b'; b.add(1, 2); // b.js export function add(x, y) { return x + y; } これをコンパイルするには --allowjs オプションをつけます。 $ tsc --outDir out --module commonjs --allowjs a.

React でルーティングをする react-router を試しました。 インストール Browserify + Babel でコンパイルするのでそのツールを React 、 react-router と一緒にインストールしておきます。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-preset-react $ npm install -S react react-dom react-router Hello, World! とりあえず画面になにか表示するところからやってみます。 import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, Rout

TypeScript でコードを書くとコンパイル時に問題を報告してくれてうれしいんですが、既存の JavaScript と組み合わせるときに型の定義を手動で書く必要があってつらみがあります。そこんところを自動でやってくれる dtsmake というツールがあったので使ってみます。 インストール npm でインストールできます。 $ npm install -g dtsmake js から d.ts を作る 適当な JavaScript を用意してみます。 // a.js var a = {}; a.add = function(a, b) { return a + b; }; これの型定義を dtsmake コマンドで生成します。 $ dtsmake -s a.js これで a.d.ts が a.js のとなりに作られます。それが以下です。 // Type definitions for a

Angular-CLI という Angular 2 アプリケーション用のコードの生成なんかをやってくれるツールを試してみました。 インストール npm で angular-cli パッケージをインストールします。 ng コマンドが使えるようになります。 $ npm install -g angular-cli $ ng --version プロジェクトの作成 ng new コマンドで新規プロジェクトを作成します。 $ ng new my-new-app これで my-new-app ディレクトリの中にソースが生成され、必要なパッケージなどもインストールされます。 ソースは TypeScript で書かれていて tslint や typings などのツールも一緒に入ります。 src/main.ts がエントリポイントで src/app/app.component.ts がアプリ本体のコンポ

最近は Browserify より webpack が人気なんて話もあるみたいなので CSS Modules を webpack で試してみました。 インストールと設定 npm コマンドで。CSS のために css-loader と style-loader というモジュールもインストールします。 $ npm install -g webpack $ npm install -D css-loader style-loader 設定は webpack.config.js に書きます。 // webpack.config.js const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { loaders:

TypeScript の .d.ts ファイルを管理する tsd コマンドが非推奨になったみたいです。 typings というツールが十分使えるようになったから、だそうです。 簡単に試してみました。 インストール $ npm install -g typings npm install で普通にインストールできます。 普通に使ってみる まずは適当なライブラリの型定義ファイルを検索してインストールしてみます。 $ typings search bluebird レジストリは github.com/typings/registry にあります。デフォルトではここの npm ディレクトリを見るらしいです。 レジストリにあるのは JSON ファイルで、実際の定義ファイルは他のレポジトリのものが指定されています。 見つかった定義をインストールするには typings install を使います。 $

typescript-eslint-parser という ESLint 用の TypeScript パーサがあったので試してみます。 インストール npm install でインストールされたバージョンだとエラーが出て使えなかったので GitHub レポジトリから直接インストールします。 $ npm install -g eslint $ npm install -D eslint/typescript-eslint-parser まだ alpha バージョンみたいです。 試す 適当な TypeScript を用意して試してみます。 // src/a.ts var x: number = 1; function f(x, number, ...r: any[]) { return x; } .eslint.json に parser を指定します。 { "extends": "eslint

Gulp のプラグインを自分で作ってみます。 gulp のレポジトリにドキュメントがあるのでそれを読むのがいいですが、メモとして書き残しておきます。 用意 プラグインの中で使う gulp-util と through2 をインストールしておきます。 gulp は動作確認用です。 $ npm install -g gulp $ npm install -D gulp-util through2 何もしないプラグイン 簡単な例として「何もしない」をするプラグインを書きます。 // a.js const through = require('through2'); module.exports = () => through.obj((file, encoding, callback) => { callback(null, file); }); これがプラグインの本体です。 Gulp は vi

TypeScript 1.7 が公開されて async await が --target es6 オプションだけでコンパイルできるようになりました。 しかし実行できる環境は今のところないようです。しかたがないので Babel を組み合わせて使ってみます。 例 TypeScript で async や function* を使った適当なコードを用意しました。 // src/a.ts import { count, delay } from './b'; async function main(): Promise<void> { for (const x of count()) { if (x === 2 ** 2) break; console.log(x); await delay(1000); } } main(); // src/b.js export function delay(

Virtual DOM を使ったフロントエンドライブラリである deku のバージョン1.0がリリースされたようなので使ってみます。 インストール Browserify と Babel を使うのでインストールします。 JSX のためのプラグインもいれて起きます。 deku だけでなく virtual-element も必要です。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-plugin-transform-react-jsx $ npm install -S virtual-element deku Hello, World! まずは Hello, World! から // a.js import { render, tree } from 'deku'; import el

テストの実行環境はDockerで作ると、環境をアレコレする必要がなくて便利です。 フロントエンドのテスト環境も簡単に建てられて、簡単に捨てられると便利なはずです。 というわけで Docker を使って Karma の環境を構築してみます。 必要なもの docker docker-compose npm Dockerfile まずは Dockerfile を用意します。コンテナ内で必要なのは xvfb chrome firefox node npm karma あたりです。 FROM ubuntu:14.04 RUN apt-get install -y wget && \ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \ echo "deb http://dl.go

TypeScript 1.5 がこの前出たばかりですが、もう 1.6 がリリースされました。幾つか機能を試してみます。 インストール npm で普通に入ります。 $ npm install typescript tsconfig.json tsc --init を実行すると tsconfig.json を作ってくれます。 { "compilerOptions": { "module": "commonjs", "target": "es3", "noImplicitAny": false, "outDir": "built", "rootDir": ".", "sourceMap": false }, "exclude": [ "node_modules" ] } なにもないところから書くより幾分か楽になります。 target を es5 したり、 noImplicitAny を true

テンプレートエンジンである Jade を React と組み合わせて使ってみます。 インストール ES6 でプログラムを書くために babel を使います。 Jade の変換には react-jade を使います。それぞれインストールしておきます。 $ npm install -g browserify bablify $ npm install -D react-jade $ npm install -S react Jade の変更用コード Jade の変換にいい感じのコマンドなどがないようなので自分で書きます。 app.jade を app.js にコンパイルします。 var fs = require('fs'); var path = require('path'); var jade = require('react-jade'); var code = jade.compile

AngularJS 1.4 が近いうちリリースされるようです。その中でで対応する機能の中に CommonJS Modules も含まれるようです。 今回は Browserify と Angular 1.4 beta を組み合わせて使ってみます。 必要な知識 npm コマンド browserify コマンド AngularJS インストール bower でもインストールできますが、今回は Browserify と組み合わせるため npm を使います。 AngularJS 1.4 はまだベータなのでバージョンを指定しないと入りません。 Browserify が入っていない場合はそれも入れます。 $ npm install angular@1.4.0-beta.6 $ npm install -g browserify 簡単な例 実際に HelloWorld を AngularJS 1.4 で作

流行りの React を流行りの Babel と組み合わせて使ってみます。実は Babel は JSX に対応しており普通にコンパイルできるのですが、今日は npm browserify とも組み合わせてみます。 gulp を使ってもできそうですが、 babelify を使うのが簡単そうです。 必要な知識 npm React 参考 Browserify 参考 インストール browserify babelify react をそれぞれ適切な場所にインストールします。 $ npm install -g browserify $ npm install -D babelify $ npm install -S react React のプログラム プログラムを用意します。せっかく Browserify を使うので複数ファイルに分けてみます。 // index.js import React f