Windowsでwebpack-dev-serverに環境変数を渡す方法

最近はJavascriptを少し触っている。

課題1

開発環境と本番環境でJavascriptのコードを切り替えたい。

解決方法1

もとからprocess.env.NODE_ENVには設定に応じて値が埋まっている。

if (process.env.NODE_ENV === 'production') {
 // 本番環境
}

if(process.env.NODE_ENV === 'development')){
 //開発環境
}

課題2

開発環境内で更にコードを切り替えたい場合が出てきた。 process.env.NODE_ENV はdevとprdしか自動では定義していないように見える。

解決方法2-1

調べていてよく見るのは、package.jsonのnpm scripts部分で、

$ ENV=hoge webpack

のように、環境変数を付与する方法だが、これはWindows(というよりコマンドプロンプト)では動かない。

SET ENV=hoge&& webpack

とするといいぞ、という記事も見たが、webpack-dev-serverでは

process.env.ENV

はundefinedになっていた。

解決方法2-2

そこで、webpack cliのオプションを見てみると、

webpack.js.org

--define : Define any free variable

というオプションを見つけた。

これで、例えば

$webpack-dev-server --define HOGE=true

とすれば、 Javascript側でHOGEがtrueとして定義されるので、

if(HOGE)){
  console.log('HOGEが定義されてるよ')
}

とすることで、指定した環境向けだけ特定コードを通るように環境変数で切り替えができた。

さらに、上記のコードで

$webpack-dev-server --define HOGE=false

のようにfalseを指定した場合には、webpackのminifyが効いてデッドコード（通ることがありえないコード）はbundleせずに消してくれているようだった。便利。

2018年の振り返り日記

日記のつもりで、今年に思ったことを書いてみる。

これは反省ではなくて、いつかのときに、そういえばそんな年だったなと思い返すための記録である。

仕事の話

さて、2018年だが、勤務先の変更や業務変更や異動などいろいろあった。

会社のことなので細かくは書けないが、

• 仕様書の必要性
• 品質担保の難しさ
• UC記述の粒度の難しさ
• UIの試作はWEBベースで作ると楽

が学びである。

仕様書と品質の話

当然だが、仕様書がないものはテストケースも規定できない。 これまでの私の担当していたプロジェクトは仕様書をまず書き、その後詳細設計に入り実装という流れであった。そのため、仕様書がないという場合がそもそもなかった。 だが、今回、諸事情により、仕様書がない（作らない…）プロジェクトに参加したが、絶望的な品質だった。

そもそも何が正しい動きだかわからないのだから、動くままが仕様であり、つまりバグなどないのだ。 …などと言うわけにもいかず、これはおかしいからバグだ、おかしくないバグじゃない、を各人の判断で行う羽目になる。

しかし各人の判断などという曖昧なものに頼れば当然ぶれる。各人の脳内にオレオレ仕様書が出来上がるのだ。しかも記憶ベースだから途中から整合性が取れなくなる。そもそも存在にすら気が付けない機能もある。

かくして、絶望的な品質の製品が出来上がっていた。 辞めていった某同期が、俺のチームは仕様書がないから無限にバグを直し続けている、と言っていたことを思い出した。 当時は、これがバグドリブン開発だ！（意訳）などと言って笑い飛ばしていたが、いざやるとなるとまさしくこの世の地獄だった。

どうすればいいかは悩ましい。いや、私の気持ちははっきりしている、今の製品開発を止めて、一度仕様書を起こすべきである。 ただ、そうはいかないのが会社である。

UC記述の話

その前のプロジェクトでは、仕様書をUC記述で書こう、ということになっていた。 これはテストケースを起こすのが楽だから、というのが理由の一つである。 だが、テストケースを起こせるようにするべく、粒度を細かくして巨大な仕様を書こうとした結果、途中で破綻した。

UI試作の話

HTML＋CSSで作ると早い。 Ruby on Rails と PythonのFlaskを試したが、Flaskはちょっと凝ったことをすると面倒だったので、簡単なものならFlaskで、基本はRailsのほうがいいかなと思った。

そのほか

• Cookieを使ってみて、基本を少し学んだ。ド基本だが、ドメインそろっていないとダメとか、文字列はエンコードしないといけないとか。
  オブジェクトをJsonでシリアライズ／デシリアライズするのって何に使うんだろ？と前に思ったことがあったが、Cookieに入れるときには便利。
  WEBアプリケーションで、後々のページで再利用するデータを保持するのはどこが定石なのだろう、Cookie？DB？パラメータでずっと渡し続けるのはイケてないだろうなというのは思ったが…。
• 言語は型付きのほうが好き
• GoogleHomeを買ったがまだ開封出来ていない。

買った物

• Surface Pro6
  今このブログを書いている。軽さと性能に満足。
• 自作PC
• Ryzen, Radeon
• AntecのPCケース
  メンテナンス性、剛性が高く買ってよかった。
• YAMAHAのスピーカーとスピーカー台と中華アンプ
• Sony XPERIA XZs
  今年のワーストバイ。電池持ちが異常に悪い。突然の発熱で性能が落ちる。さっさと買い換えたい。
• キャンプ道具
  毎年キャンプしていたが、今年は椅子やマットや焚き火台などを買った。焚き火台は特にお気に入り。
• ゼノブレイド2 黄金の国イーラ
  DLCとは思えない新作ゲームだった
• 星のカービィ スターアライズ
  クリアしていない
• リディー＆スールのアトリエ
  switchで出ているから買ったらまさかの3部作の3作目だった…。面白かったが、switchでいきなり3作目だけ出すのは不親切だと思った。
• スマブラSP ぜんぜん勝てない

コミュ障が約5万円値下げ相当でSurface Pro 6を買う方法

2018年の10月中ごろ、Surface Pro 6が発売になった。

Surface Pro 6 が新登場 – 軽さの中に、無限の可能性を – Microsoft Surface

以前からSurfaceが欲しいと思っていたため、ちょうどいいので購入することにした。

第八世代のCore i5は4コアになり、2コアしかなかった第七世代のCore i7よりも性能が良いと聞いたのが決め手である。　

だが、Surfaceはブランド力もあり、なかなか安売りのセール対象にならないことに定評がある。通常の家電量販店の商品は10％のポイントが付くが、Surfaceは多くの場合に1%しかポイントがつかない。

それでも安く買うためには、家電量販店で値切り交渉をする必要がある。

いくつかのブログを見たが、2-3万程度なら頑張れば下がるようだ。

とはいえ、今回は本当に出たばかりなので、そう簡単に下がらないだろう。

そもそも、家電量販店で店員が寄ってきたら逃げるタイプである私にそのような交渉が出来るはずもない。

ネット通販で安く買おう大作戦

そこで、いくつかのネット通販のキャンペーンを組み合わせて、ポイント還元での最安を目指す。

私の場合、ソフトバンク回線持ちでYahooプレミア会員なので、Yahooショッピングを狙うのが良いと考えた。

• 通常1%
• Yahooカードで+1%
• Yahooカードの通常ポイントで+1%
• ソフトバンク回線契約とプレミアムで+4+5=9%
• 5の付く日の購入での（ポイントサイト利用のためにアプリ経由はしない）で+2%

ここまでがヤフーショッピングの還元で、14%になる。

ただし、月ごとの上限がある。

• ソフトバンク回線で5,000まで
• プレミアムで5,000まで

よって、Surface Pro 6の定価を150,973円として、

10,000＋7,545で17,545ptとなる。

加えて、ポイントサイトの経由をする。

多くのサイトは1%還元だが、ぶっちぎりに多いのがLINEショッピングの不定期キャンペーンである。これは最大で10万円で20,000ポイントまで狙えることが多い。

LINEポイントはLINE Payカードにそのままチャージ出来るので、ほぼ現金と等価である（なお、ギフト券類には変えないほうがお得である）

というわけで、このパターンではまず本体で37,545円相当のポイントを得る。

期間限定ポイントが含まれるので、キーボード購入にあてる

しかし、これはあくまでポイントであり、使わなければ意味がない。

特にYahoo側は期間限定ポイントを含んでしまっている。さっさと使わず失効すると意味がないので、Surfaceの周辺機器の購入にあてる。

期間限定ポイントとなるのは、

カード+1、ソフトバンク回線+9、5の付く日+2と思われる。

期間限定ポイントには付与日の問題があり、即時には付与されない。

ヤフーカードの+1%は毎月15日。それ以外は、原則木曜日である。

毎月15日を待つのは厳しいので、せめて木曜日まで待つとして、周辺機器にあてられるのは、

10000+3018の13,018ptとなる。

キーボードが1万円弱であるので、購入として使い切れるため、ほぼ値下げと等価と言っていいだろう。

ちなみに、ヤフーショッピングではポイントに対してもポイントは付くので、周辺機器に対してもそれなりに付くはずである（もう計算が面倒になってきたので省略する）

さらに言うと、本体とキーボード購入のタイミングを月で分けると、ソフトバンク回線の月上限が回復するので、月末の5の付く日が狙い目と見ている。

実際にYahooで買ってみた 

というわけで、実践した。2018/10/25の5のつく日である。

Tポイント側

予想外にコジマが値下げと10%通常だったおかけで、通常ポイントが14,770pt、期間限定12,945ptとなった。

さらにこの表では見えていないが、ヤフーカードの特典が1,477ptある。このため、Tポイントは期間限定含めて29,201ptとなる。

LINEショッピング側

残念ながら今回のLINEのキャンペーンは18,000ptが上限だった。これに、通常の1%である1,477ptが追加される（上限である20%を越えていないため、通常ポイントも有効なはず）

実質価格の計算

もろもろ足して、48,678相当のポイントとなる。

元値が147,744円だったので、実質価格を9万円台まで落とすことが出来た。

この値下げを家電量販店の交渉で出すには相当苦労するだろうから、コミュ力なくてもここまで安い値段を出せるのは、YahooとLINE様様である。

次はタイプカバーキーボード

 次は、木曜日まで期間限定Tポイントの付与を待ち、月もまたいでYahooのポイント上限も回復したあとに、タイプカバーキーボードを買うのみである。ちなみに、ここでもまたLINEのキャンペーンを待つ手もある。私はもう待てずに勢いで買いそうである。

 

作戦2

いやいや、ソフトバンク回線なんて今時持ってないから、という場合を調べてみたが、普通にAmazonが安い。現在価格で125,999円である。Yahooショッピング コジマ店がそもそも147,744円だったので、すでに2万円以上安い。

マイクロソフト Surface Pro 6 [サーフェス プロ 6 ノートパソコン]12.3型 Core i5/256GB/8GB プラチナ

posted with amazlet at 18.10.29

マイクロソフト
売り上げランキング: 9,518

Amazon.co.jpで詳細を見る

 

さらに、あと数日待って10/31には、Amazonタイムセール祭りでポイントアップチャンス が始まる。これは最近月一程度の頻度でやっている。ここでエントリーすると、いつもよりAmazonポイントがもらえる。

ついでに私がAmazonで買い物をするときによくやるのが、

Amazon.co.jp: アカウントにチャージ

経由での還元のかさましである。

9万円分を購入することで、2.5%の還元が付く。

amzn.to

Amazonギフト券の有効期限は10年もある上に、今回のように高額商品をもとから買うのであればすぐに使いきれるため、是非ギフト券を経由するべきである。

 

さらに言えば、ギフト券購入時にセブンイレブンで現金支払いではなくnanaco2回払いをすると、nanacoクレジットカードのポイントも上乗せできる。（ただしnanaco自体のポイントはつかないので注意）

 

私の場合、ギフト券2.5%、クレジットカード1.2%、タイムセール祭りで4%（上限5,000pt）となるので、9,661円相当の還元となり、実質価格は116,338円となる。元値に比べてずいぶんと安く狙える。

 

というわけで、無理して量販店で交渉するぐらいなら、ネットで頑張ると案外安くなる。

 

Surface Pro 6自体の使い勝手は、タイプカバーが届いたら書こうかと思う。