JavaScript
npm
library
UniversalJS
oseti

「oseti」と言うUniversalな場面で使えるライブラリ書きました

自己紹介

じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の4年生です。(2018/10/17現在)

イベントや、勉強会に参加してるので是非お会いした際はお声掛けください!

osetiの紹介

konojunya/oseti

osetiは NODE_ENV を元にAPIのBase URLや各種設定を切り替えるJavaScriptのライブラリです。
yamlのパースも自分で書いたので外部ライブラリとの依存関係もありません。

例えば、Productionモードは api.example.com でstagingは staging-api.example.com にAPIのリクエストを送りたいとか、デバッグモードの時の文言を環境で簡単に変えれるようにしたいとか、そういうことを出来るようにします。

最近、Universal JavaScriptへの関心が高まってたので作ってしまおうと言う感じで作ったので、あんまり類似のライブラリを探してません。

使い方

使い方は簡単です。導入するには多分、Node.jsで書いてるサーバーならすぐに取り入れることができます。

まずはインストールします。

# yarn
$ yarn add oseti
# npm
$ npm install oseti

インストールが終わると、osetiが使えるようになります。

まずプロジェクトルートに config.yml と言うファイルを配置してください。

形は自由ですが、 stagingproduction で切り替えるためのものなので

development:
  api_base_url: http://localhost:3000
staging:
  api_base_url: https://staging-api.example.com
production:
  api_base_url: https://api.example.com

みたいな形になると思います。

キーは、 NODE_ENV で指定するものに指定してください。
(development, staging, production etc...)

サーバーのコードで最初に

import oseti from "oseti";
oseti.load();

を行います。 load を行うと config.yml をパースして環境変数 OSETI_ENV に吐き出します。
この load の引数には何も書かなければ config.yml を読みに行く設定になっていますが、ファイル名を指定することもできます。
しかし、yamlしか対応してないのでフォーマットがyamlです。

load をしたあとは、サーバーのどこからでも値を得ることができます。

import oseti from "oseti"

// NODE_ENV = production
oseti.get("api_base_url"); // https://api.example.com

// NODE_ENV = staging
oseti.get("api_base_url"); // https://staging-api.example.com

ロジック内のコードは、変えずに NODE_ENV を切り替えることにより設定を綺麗にできます。

クライアントでの扱い

クライアントのコードでは process.env を参照できないので、どこかのタイミングで window.NODE_ENV=${process.env.NODE_ENV}; window.OSETI_ENV=${process.env.OSETI_ENV} をしてください。

上記の記述をすると、クライアントも

import oseti from "oseti";
oseti.get("api_base_url");

で取得することができます。

あとがき

Twitterは @konojunya です。

GitHubはOSSにしてあります、みなさんからのPR待っていますのでよろしくお願いしますm(_ _)m