アイコンなどの画像には、少し前まで CSS Sprites を使うことが多かったと思います。しかし、最近は CSS でスタイリングできるため、カスタムフォントを作成して使用することが増えてきたように感じます。

今回は、webpack と Sass を使ってカスタムフォントを使用する方法と、その際にハマりやすい`url()`での相対パス指定方法について紹介します。



## tl;dr

- Sass でのカスタムフォントの使い方
- webpack でカスタムフォントをロードする方法
- Sass での`url()`での相対パスの指定方法のハマりポイント

## はじめに

はじめに登場人物が多いので、全体のフォルダ構成を明らかにしておきます。
JavaScript のフレームワークは React を使ったのもを想定していますが、カスタムフォント周りの設定については他のフレームワークでも代用できると思います。

```
src/
  components/
    icon/
      icon.scss
      icon.jsx
      My-font.eot
      My-font.woff
      My-font.ttf
      My-font.svg
  entry.js
  style
    style.scss
 webpack.config.js
```

`entry.js`がアプリケーションのエントリーファイルです。
`style.scss`は Sass のエントリーファイルで、`icon.scss`を`@import`しています。
`entry.js`がロードされる時に、`style.scss`もロードされインポートされている Scss ファイルがコンパイルされます。

```scss
// src/style.scss
@import "../components/icon/icon.scss";
```

## Sass でのカスタムフォントの使い方

### Sass ファイルでカスタムフォントを読み込む

カスタムフォントを読み込むには`@font-face`を利用して`font-family`にフォント名を設定します。

カスタムフォントの読み込みについては、Sass ではなく CSS の範疇ですし、詳細については他に良い記事が多くあるのでここでは触れません。

```scss
// src/components/icon/icon.scss
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("./My-font.eot"),
    /* IE9 Compat Modes */ url("./My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("./My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("./My-font.ttf") format("truetype"), /* Safari, Android, iOS */
      url("./My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

### icon コンポーネントの作成

icon コンポーネントは stateless function components で作成した非常にシンプルなものです。
将来的には、アイコンの種類やサイズを prop から渡せるようにするべきだと思います。

```js
// src/components/icon/icon.jsx
exports default function Icon() => {
  return <span className="icon" />
}
```

### icon のスタイリング

icon のスタイリングについては、Bootstrap など既存の CSS フレームワークを参考にするのがいいと思います。
基本的には icon のベースとなるスタイルに`font-family`でフォントを指定した後、`content`でフォントの Unicode を設定すればいいです。

```scss
// src/components/icon/icon.scss
.icon {
  position: relative;
  display: inline-block;

  font-family: "SuperCoolMyFont";
  font-style: normal;
  font-weight: normal;
  font-size: 24px;

  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "\01";
  }
}
```

### フォントの Unicode の探し方(番外編)

フォントの Unicode の確認方法については、自分の場合は SVG ファイルから探すようにしています。
(正直、これがスマートな方法かどうかわかりません。)

SVG ファイルを開くと`unicode`要素があるので、そこから Unicode を抽出します。
例えば、`unicode="&#x01;"`の場合は`&#x`を`\`に変換して`\01`として使います。

```
// src/components/icon/My-font.svg
// 抜粋です
<glyph unicode="&#x01;" d="something cool shape" />
```

もっと正しい方法があったら教えて欲しいです。

## webpack でカスタムフォントをロードする方法

webpack でカスタムフォントを使うためには、[url-loader](https://github.com/webpack/url-loader)を使って各フォントファイルをロードできるようにする必要があります。

```js
// webpack.config.js
// 抜粋です
loaders: [
  {
    test: /\.svg$/,
    loader: "url?mimetype=image/svg+xml&name=[path][name].[ext]",
  },
  {
    test: /\.woff$/,
    loader: "url?mimetype=application/font-woff&name=[path][name].[ext]",
  },
  {
    test: /\.woff2$/,
    loader: "url?mimetype=application/font-woff2&name=[path][name].[ext]",
  },
  {
    test: /\.[ot]tf$/,
    loader: "url?mimetype=application/octet-stream&name=[path][name].[ext]",
  },
  {
    test: /\.eot$/,
    loader:
      "url?mimetype=application/vnd.ms-fontobject&name=[path][name].[ext]",
  },
];
```

`name`の部分は好みで変更してください。

私の場合は SVG ファイルをフォントと画像で利用することが多く、これらを別のフォルダで管理することが多いので、格納元のディレクトリ構造そのままで出力してくれる`[path][name].[ext]`を好んで利用しています。

## Sass での`url()`での相対パスの指定方法のハマりポイント

ところが、上の方法では font ファイルが参照できずエラーとなってしまいます。

```
Module not found: Error: Cannot resolve 'file' or 'directory' . /My-font.svg
```

これは現時点では、Sass のコンパイラが URL の書き換えをサポートしていないため、`css-loader`を利用する場合は Sass のエントリーファイルから相対パス指定する必要があるからです。

- [sass-loader: Problems with url(...)](https://github.com/jtangelder/sass-loader#problems-with-url)

そのため、上の`icon.scss`でのパス指定は次のようにする必要があります。

```scss
// src/components/icon/icon.scss
$font-path: "../components/icon/";
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("#{$font-path}My-font.eot"),
    /* IE9 Compat Modes */ url("#{$font-path}My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("#{$font-path}My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("#{$font-path}My-font.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("#{$font-path}My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

これで、相対パスの問題は解決されてフォントを読み込むことができるました。しかし、相対パスの指定が実物のフォントと異なるので違和感が残ります。

私の場合、`$font-path`を Sass のエントリーファイルに移動することで、その違和感を解消しています。

```scss
// src/style.scss
$font-path: "../components/icon/";
@import "../components/icon/icon.scss";

// src/components/icon/icon.scss
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("#{$font-path}My-font.eot"),
    /* IE9 Compat Modes */ url("#{$font-path}My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("#{$font-path}My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("#{$font-path}My-font.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("#{$font-path}My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

これなら違和感なしです。

## まとめ

webpack+Sass でカスタムフォントを使う方法でした。
Sass の相対パスまわりでハマるケースが多いのではないかと思います。

`url()`に関してはフォントだけではなく画像についても同じことが言えるので、それぞれのエコシステムの癖を把握する必要があることを痛感しました。
この辺りは、あまり最近のフロントエンド開発に慣れてない人にとっては、学習が難しい部分となりそうな予感がします。

この記事を書くにあたって、次の記事も参考にしています。

- [Working with Fonts with Webpack | Adrian Hall](https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/)
- [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)

webpack+Sass+reactでカスタムフォントを使う

[react-intl](https://github.com/yahoo/react-intl)を使って React アプリを国際化してみたところ、結構良かったので紹介します。



## tl;dr

- react-intl を使った React アプリの国際化方法
- react-intl を component だけではなく、utility function として使う方法

## react-intl とは

[react-intl](https://github.com/yahoo/react-intl)は、React アプリの国際化を支援するための Component と幾つかの API を提供する、Yahoo 製のライブラリです。
メッセージだけではなく数値(通貨も含む)、日付など幅広く対応しています。

今回は、メッセージの部分に特化して紹介します。

## 基本的な使いかた

基本的な使い方は、次の 3 ステップです。

- 国際化する context を設定する
- 言語設定ファイルを設定する(もし必要であれば)
- react-intl が提供する Component(`FormattedMessage`)を使ってメッセージを国際化する

### 国際化する context を設定する

まず、`IntlProvider`を使って国際化するための context を設定します。
react-intl は、この指定した context 配下で動作するため、アプリケーションのエントリーポイントに近い部分で行ったほうがいいです。
私の場合は、routing を設定する部分と一緒にしています。

```js
import React from "react";
import { IntlProvider } from "react-intl";
import AppRoute from "./AppRoute";

class App extends React.Component {

  constructor(prop) {
    super(prop);
    this.state = {
      locale: "ja",
      message: // 実際のメッセージファイル
    }
  }

  render() {
    return (
      <IntlProvider
        locale={this.state.locale}
        messages={this.state.messages}
      >
        <AppRoute />
      </IntlProvider>
    );
  }

}
```

メッセージファイルについては後で説明します。

### 言語設定ファイルを設定する

複数言語対応する場合は、追加で言語設定ファイルを設定する必要があります。

```js
import { IntlProvider, addLocaleData } from "react-intl";
import ja from "react-intl/locale-data/ja";

addLocaleData([...ja]);

// もっとたくさんの言語が必要な場合
addLocaleData([...ja, ...fr, ...es]);
```

### Component を使ってメッセージを国際化する

メッセージを国際化するためには、`FormattedMessage`を使います。

```js
import { FormattedMessage } from "react-intl";

const MyComponent = () => {
  return (
    <div>
      <FormattedMessage id="happy.birthday.to.you" />
      {/* en: Happy birthday to you */}
      {/* ja: お誕生日おめでとう */}
    </div>
  );
};
```

`FormattedMessage`の`id`はメッセージファイルのキーと一致している必要があります。
`id`は`.`で区切っていますが、これは JSON の object ではなく純粋な文字列キーです。
そのため、上の`id`を指定した場合、メッセージファイルは次のようにする必要があります。

```json
{
  "happy.birthday.to.you": "Happy birthday to you"
}
```

## utility function として使う

react-intl の Component を利用した国際化機能は非常に強力なのですが、国際化の機能自体を pure な function として使いたいケースは結構あると思います。
例えば、次のように Component の props と一緒に利用するケースなどです。

```js
import ChildComponent from "./ChildComponent";

const MyComponent = () => {
  return (
    <div>
      {/* titleを国際化したい!! */}
      <ChildComponent title="" />
    </div>
  );
};
```

そんな場合は、`IntlProvider`を直接使います。

```js
import { IntlProvider } from "react-intl";

import ChildComponent from "./ChildComponent";

const intlProvider = new IntlProvider({ locale, messages }, {});
const { intl } = intlProvider.getChildContext();

const MyComponent = () => {
  return (
    <div>
      {/* titleを国際化したい!! */}
      <ChildComponent
        title={intl.formatMessage({ id: "happy.birthday.to.you" })}
      />
      {/* en: Happy birthday to you */}
      {/* ja: お誕生日おめでとう */}
    </div>
  );
};
```

> `IntlProvider`の第 2 引数は context を渡すので、特に必要なければ`{}`でよろしいかと。

最終的にはいろいろな Component で利用したいので、Singleton な Class にしておくと、後で使い勝手がいいと思います。

## まとめ

[react-intl](https://github.com/yahoo/react-intl)を使うと国際化が非常に楽です。

一工夫することで、pure な utility function としても使うことができるので、非常に利用用途が広い優秀なライブラリだと思います。

react-intlを使ってReactアプリを国際化する

最近、React ＋ Typescript しか書いてないので、久々に小ネタを投下しようかなっと。。。



## tl;dr

- JavaScript でよくやる引数の `object = object || {}` を、Typescript でコンパイルエラーを回避しながらどうやるか。

## ユースケース

例えば、React でこのような stateless function components(以下、`Book`)を作ったとします。
`Book`はインタフェースとして、`book`を受け取って`name`を表示する非常に単純な component です。

```ts
interface IBook {
  name: string;
}

interface IBookProps {
  book: IBook;
}

export defaut function Book({ book }: IBookProps) {
  return <div>{book.name}</div>
};
```

ところが、 `book`は API から取得する必要があり、`Book`を初期化されるタイミングでは`undefined`となっています。

おそらく、`book`を`undefined`のまま、`Book`に渡した場合は、次のようなエラーが発生するでしょう。

```
Uncaught TypeError: Cannot read property 'name' of undefined
```

## ES6 Default parameters を使ってみる

早速、`book = book || {}`と行きたいのですが、ES6 の[Default parameters](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Default_parameters)を使ってみます。

```ts
export defaut function Book({ book = {} }: IBookProps) {
  return <div>{book.name}</div>
};
```

しかし今度は、 `IBook`型と一致しないというコンパイルエラーが出力されます。

```
error TS2322: Type '{}' is not assignable to type 'IBook'. Property 'name' is missing in type '{}'.
```

まぁ、当然ですね。

## 正しい Default parameters の使い方

`{}`には型を設定することができるので、Default parameters を設定するときに正しく型を指定してみます。  
これで、コンパイルエラーを無事回避することができました。さらに IDE の補完も効きます。

```ts
export defaut function Book({ book = {} as IBook }: IBookProps) {
  return <div>{book.name}</div>
};
```

## まとめ

最初は、`IBook`を実装した、クラスを定義してダミーの値を設定しないと無理かと思っていましたが、型を設定することであっさり出来ました。

Typescript の intarface は定義するの少し面倒ですが、こういう場合に重宝するので、定義した方がいいですよー。

October, 2016

webpack+Sass+reactでカスタムフォントを使う

react-intlを使ってReactアプリを国際化する

Typescript+ReactでDefault parametersにObjectを正しく設定する方法