at backyard

Color my life with the chaos of trouble.

2018年元旦、コーディングタイムコンパイルにメタプログラミング、トランスパイルという単語が、僕の心を捉えて離さない件

そもそものきっかけは先月、下記の記事を見たことでした。

qiita.com

ここで書かれている内容は、これからの時代においてとても大事なものになるだろう、と記事を読んで感じました。
私は経験も技術力もまだまだ乏しい人間ではありますが、コーディング時に生じるヒューマンエラーが生産性に大きな影響をもたらすことは何度も経験してきましたし、 技術力や知識をつけていくことでコーディング時間の短縮を図ろうとしても、途中で頭打ちになるのは目に見えています。
よって、コーディング量の削減と、エラーがそもそも発生しない仕組みを作ってしまったほうが合理的だと思います。
その合理的な方法として私はこの記事に書かれている内容が使えると思いました。

さて、上の記事を読んだ後、その記事内でも書かれていた下記の記事も読みました。
2017年に初めてReduxを触り始めた私が感じていた、"ボイラープレートが多くて面倒だな〜"という静かに降り積もりつつあった心の澱はこれで解消されるようです。

qiita.com

正直、すげーなと思いました。
個人的にはRadioheadがThe King of Limbsを出して夏の夕立のようなアフロビートでFuji Rockを沸かしたときぐらいのすげーなでした。

youtu.be

ま、ここらへんの知識は私には皆無なので、あまり喋りすぎて無知を露呈させるよりも、ここで書かれているs2sを試してみて、この世界に足を一歩踏み入れてみようと思います。

s2sのexampleを試してみる。

github.com

ここから備忘録になります。s2sのrepositoryをcloneしてexampleを試してみようと思います。

git clone https://github.com/akameco/s2s.git

# shopping-cartサンプルを触ってみます
cd examples/shopping-cart

# 依存インストール
yarn

# 実行
yarn start

おっと、ここでエラーが発生しました。Redux関連のエラーのようです。。。
エラーログを貼っておきます。

TypeError: Cannot read property 'apply' of undefined
(anonymous function)
node_modules/redux/es/compose.js:29
  26 | 
  27 |   return funcs.reduce(function (a, b) {
  28 |     return function () {
> 29 |       return a(b.apply(undefined, arguments));
  30 |     };
  31 |   });
  32 | }

このエラーについては、既にissueで上がっており、Redux DevTools Extensionを入れることで解決するようでした。

github.com

というわけで、下記の拡張機能Chromeに入れ、再度yarn run startを実行すると正常に動作します。

chrome.google.com

では、いよいよお待ちかねのs2sを試してみます。

yarn run s2s


module.js:538
    throw err;
    ^

Error: Cannot find module '../lib/cli'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/yukishindo/Desktop/try-s2s/s2s/packages/s2s-cli/bin/s2s.js:10:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
error Command failed with exit code 1.

ありゃ、何かエラーが出てしまったようです。
調べてみると、どうやら、yarn run s2sコマンドを打つ前に、s2sのルートにてyarn run buildを実施する必要があるようでした。

# s2sルートにて
yarn run build

すると、上でcannot find module...と言われている箇所にlibディレクトリが作られ、下にbuildされたソースが吐き出されます。
さて、この状態で、再度s2sを実行してみます。

# shopping-cartサンプルに再度移動
cd examples/shopping-cart

# s2s実行
yarn run s2s

早速触ってみます。。。す、すげー!

とりあえずやってみたことといえば、記事に書かれている通りの内容でApp以下にActionTypes.jsを新規作成し、Addアクションを追加だけなのですが、勝手に生成されていく様は、予想以上に感動を呼びました。
今年はさよならボイラープレートを胸に刻んでコードを書いていこうと思います。