JavaScript
I18n
npm
p15n

p15nライブラリを作ってみたにぃ! すごいだらぁ!?

多言語化(i18n)があるなら、地域ならではの方言に対応する都道府県化(p15n 1)があっても良くない? と思い作りました。

:link: p15n.js


概要

i18n系のライブラリのように、都道府県ごとに keyvalue を設定することで表示するテキストを 方言表記 できるようにします。

設定値は次のような形。

resources: {

'東京都': {
'title': 'p15nライブラリを作ってみました! すごいでしょ!?',
'description': 'p15n.jsは、簡単に『方言』が使えるライブラリです。'
},
'鳥取県': {
'title': 'p15nライブラリを作ってみたにぃ! すごいだらぁ!?',
'description': 'p15n.jsは簡単に『方言』が使えるライブラリだにぃ。'
}
}

利用する方言を決定するために、都道府県名を渡します。

p15n.init({

pref: '島根県',
fallbackPref: '鳥取県'
});

pref でメインの都道府県を、 fallbackPref で第二候補の都道府県を指定できます。

上の例では、まず島根県を検索し、キーがなければ鳥取県を検索する感じです。

両方ともなければ、標準語(東京都)に設定された値を利用します。

HTML要素などへの方言セットをコールバック関数や、Promise を使って行わせるのは、DOM要素の生成タイミングを意識しなくていいようにと考慮したためです。

このあたりは、有名な i18next のコードを参考にさせていただきました。


Installation


ブラウザから:

<script src="p15n.js"></script>


npmを使う:

$ npm install p15n.js


Usage


コールバック関数を渡す方法:

import p15n from 'p15n';

p15n.init({
pref: '鳥取県',
resources: {
'東京都': {
'title': 'p15nライブラリを作ってみました! すごいでしょ!?',
'description': 'p15n.jsは、簡単に『方言』が使えるライブラリです。'
},
'鳥取県': {
'title': 'p15nライブラリを作ってみたにぃ! すごいだらぁ!?',
'description': 'p15n.jsは簡単に『方言』が使えるライブラリだにぃ。'
}
}
}, function(t) {
// initialized and ready to go!
document.getElementById('title').textContent = p15n.t('title');
document.getElementById('description').textContent = p15n.t('description');
});


Promiseを使う方法:

import p15n from 'p15n';

p15n.init({
pref: '鳥取県',
resources: {
'東京都': {
'title': 'p15nライブラリを作ってみました! すごいでしょ!?',
'description': 'p15n.jsは、簡単に『方言』が使えるライブラリです。'
},
'鳥取県': {
'title': 'p15nライブラリを作ってみたにぃ! すごいだらぁ!?',
'description': 'p15n.jsは簡単に『方言』が使えるライブラリだにぃ。'
}
}
}).then(() => {
// initialized and ready to go!
document.getElementById('title').textContent = p15n.t('title');
document.getElementById('description').textContent = p15n.t('description');
});


まとめ

利用シーンは限られますが、興味のある方は使ってみてください!

ちなみに鳥取弁は20年近く使っていないので、間違ってたらごめんなさい!!





  1. p15nとはPrefectureizationを表しており、都道府県化の意味