<p>みなさま初めまして！<br>
PLAID Engineer Blog初投稿の韓 徹（<a href="https://twitter.com/sskt0809">@sskt0809</a> ）です。</p>
<p>プレイドは、2018/11/3(土)に秋葉原UDXで開催された<a href="https://vuefes.jp/">Vue Fes Japan 2018</a>にプラチナスポンサーとして協賛しました。<br>
私はスポンサーセッションで参加者全員の前で登壇する機会もいただき、Vue Fes Japan参加者の皆さんに<a href="https://karte.io/">KARTE</a>について伝えることができました。</p>
<p>今回のブログでは、Vue Fes Japanの様子や、スポンサー参加の裏話などをお伝えします。</p>
<h2>会場の様子</h2>
<p>自分が会場入りした午前9:00の時点でPLAID以外の各スポンサー企業さんも準備が整っていて、すでに会場はほぼ完成していました。</p>
<p>ヘイ株式会社さんはトイレットペーパーをノベルティに、株式会社リブセンスさんはガチャガチャを用意したりと、ユニークなブースもあり、見るだけで楽しいブースもいくつかありました。</p>
<p>私たちはKARTEのバナーや50インチのディスプレイに公式動画を写し、ノベルティは弊社デザイナーが用意してくれたPLAIDとKARTEのステッカーとメッセージカードを同梱した渾身のステッカーセットを用意しました。<br>
（結果ステッカーセットを渡すと「こんなにステッカーもらえるの？！」って反応がもらえて、大成功でした。）</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/b9e49923-c8ae-483e-b779-4add5e8163be/45B2B854-035A-48D4-B649-5C62402E9464-2.JPEG.jpg" alt="45B2B854-035A-48D4-B649-5C62402E9464-2"><br>
<em>ブースの準備は整った！の様子。</em></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/b5999bcf-07d2-4d4c-b631-d90023827bd0/IMG_0875.JPG.jpg" alt="IMG_0875"><br>
<em>ノベルティのステッカーセット。来場者の皆様に好評でよかったです！</em></p>
<h2>そして開幕</h2>
<p>会場には続々と参加者が入場し、キーノート開始までに約300人の方が集まり会場は熱気に溢れていました。（会場スタッフやスポンサーの方を含むと400人強はいました。）<br>
そして、10:20にVue Fes Japan 2018主催のkazuponさんの開会の挨拶でイベントが開催されました。<br>
まず一発目のプレゼンはVue.jsクリエイターのEvan Youさんのキーノートです。Vue.js 3.0が登場する話、どこが2.x系と変わるかをプレゼンしていました。</p>
<p>そのEvanさんのプレゼンの次がお待ちかねのプラチナスポンサーセッションで弊社PLAIDの登壇です。登壇前はEvanさんの登壇の後であるのと会場の人数の多さのプレッシャーがありましたが、いっぱい練習したんだから大丈夫！大きい声で伝えたいことは強くゆっくり話す！って自分に言い聞かせてましたw</p>
<h2>登壇内容</h2>
<p>今回は「KARTEが1,000サイト以上でVue.jsを動かしている話」という内容で発表しました。以下がスライドです。</p>
<script async class="speakerdeck-embed" data-id="98c6724ce2c94580aa22383431fd7ba3" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<p>主な内容は以下です。</p>
<ul>
<li>プレイドでは、Vue.jsがリリースされた2014年からVue.jsをKARTEの開発で使用している</li>
<li>お客様がKARTEの管理画面で作成したアクション（エンドユーザーに出すポップアップなどのコンテンツのこと）もVue.jsで作られている
<ul>
<li>それらがお客様のWebサイト上（1,000サイト以上！）で動いている</li>
</ul>
</li>
</ul>
<p>プレゼンする前は緊張しましたが、話し始めるとちゃんと練習した甲斐があり、プレゼン自体は大きなミスなく話せたと思います。ただし、最後に言い間違って「ちゃいます、ちゃいます」というお茶目な関西弁が出てしまいました...。その関西弁についてのツイートが2ツイートくらいありました。今やいい思い出です！</p>
<p>発表後はツイートを見ると「KARTEの管理画面すごい！触ってみたい！」「650コンポーネントもあるんだ！」「2014年から使ってるんだ！」「関西弁に安心感を感じる」といったポジティブなツイートばかりだったので、安心と嬉しさがこみ上げました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/7f2096f0-68a7-4413-84d9-343d334e7d25/04AA081E-AF0A-4C38-9D07-CFAC5F1F162F.JPEG.jpg" alt="04AA081E-AF0A-4C38-9D07-CFAC5F1F162F"><br>
<em>登壇時の様子。我ながら顔が硬いですね...。</em></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/3837230f-2643-47f6-8a33-e817229ae73f/Image-from-iOS.jpg" alt="Image-from-iOS"><br>
<em>聞いていただいた方々ありがとうございました！</em></p>
<h2>PLAIDのブースの様子</h2>
<p>プレゼンが終わったからと安心してはいけません。本当に会場の皆さんに魅力を伝えるのは発表の合間合間のブース対応なのです。<br>
発表見てブース来ていただいた人も多数いました。（弊社エンジニアであり、<a href="https://shiganai.org/">しがないラジオ</a>パーソナリティの池上に会いに来た方も多数いました。）</p>
<p>Vue.jsをどのように使われているかという質問はもちろん、KARTEがどういうことができるのか、サービス自身に興味を持っている方も多い印象を受けました。<br>
改めまして、ブースに来ていただいた方ありがとうございました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/78c2e7b4-783a-43a7-b933-9035f9acf530/Image-from-iOS--1-.jpg" alt="Image-from-iOS--1-"><br>
<em>ブースに多数の方々が来てくれました！</em></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/bc056c5d-6cb1-49cd-85c0-3fa9d8367276/FC51D036-7939-4D81-9EA0-604039015FBD.JPEG.jpg" alt="FC51D036-7939-4D81-9EA0-604039015FBD"><br>
<em>エンジニアの民谷（タミー）もブース対応に参戦。ありがとう！</em></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/2f677bec-23b4-44b6-946a-f71836d3a550/18C158A2-317C-48BC-BAD6-67730DD67073.JPEG.jpg" alt="18C158A2-317C-48BC-BAD6-67730DD67073"><br>
<em>エンジニアの野田(@positiveflat)はVue Fes Japanのスタッフとして大活躍していました！</em></p>
<h2>プレゼンで割愛した内容を一部紹介</h2>
<p>今回の発表はアクションの配信する箇所をメインに話しましたが、この内容にfixするまでにプレゼン内容に紆余曲折あり、説明したくても残念ながら割愛した部分を紹介したいと思います。</p>
<h3>Vue.jsをなぜ採用したか</h3>
<p>KARTE ではVue.jsがバージョン0系で登場した2014年から採用しています。当時、様々なフレームワークと比較しましたが、軽量でシンプルなフレームワークであること、状態管理のしやすさなどを理由にVue.jsに決めました。</p>
<p>実際には、学習ハードルが低く一部のデザイナーやフロント経験の浅いエンジニアでも直感的に使えるという特徴から、スピード感を持った開発を続けられています。また、ドキュメントやライブラリの充実など、Vue.jsコミュニティが活発である点もメリットを感じるところです。</p>
<h3>デザインシステムの導入</h3>
<p>PLAIDでは今年の頭からデザインシステム「BAISU（バイス）」の構築プロジェクトが始まりました。BAISUプロジェクトはKARTEのユーザー体験を良くし強いプロダクトを作るのが目的です。内部的にはデザイナーとエンジニアがよりスピード感を持って協業するために、デザイン原則、スタイルガイド、パターンライブラリを用意しました。</p>
<p>実際に一部の画面ではBAISUのガイドラインに沿ったリニューアルしたりと積極的にアップデートしています。弊社ではデザイナーもVue.jsを書くのでBAISUによりスピードを上げて開発できます。BAISUの詳細は後日、弊社デザイナーが書いてくれることを期待。</p>
<h2>最後に</h2>
<p>今回はVue Fes Japanの運営の方々、会場に来ていただいた皆さん、準備を手伝ってくれた弊社スタッフには本当に感謝しています。<br>
自分はこのような大規模なテックカンファレンスに登壇することは初めてで、新しい学びも多く、そして精神面でも色々鍛えられました！<br>
またこのような機会があれば、どんどん積極的に手を上げていこうと思います。</p>
<p>あと、Vue Fes Japanのアフターパーティは非常に豪華でEvan Youさんとも2ショット撮れたので最後まで大満足のカンファレンスでした！</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/5877741e-8196-4d88-a823-4f732167fc71/34C704BC-FFA2-4E37-8F73-5FAF34B4A683.JPEG.jpg" alt="34C704BC-FFA2-4E37-8F73-5FAF34B4A683"><br>
<em>アフターパーティの料理めちゃくちゃ豪華でした。とても美味しかったです。</em></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/3bd4258d-5878-48df-8317-b5dc7ea6cce8/IMG_1339.JPG.jpg" alt="IMG_1339"><br>
<em>Evanさんとの2ショット！寿司トークも盛り上がり、楽しかったです。</em></p>
<h2>仲間を募集しています</h2>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://platform.wantedly.com/visit_buttons/script.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "wantedly-visit-buttons-wjs"));
</script>


プレイドは、2018/11/3(土)に秋葉原UDXで開催されたVue Fes Japan 2018にプラチナスポンサーとして協賛しました。
Vue Fes Japanの様子や、スポンサー参加の裏話などをお伝えします。

Vue Fes Japan 2018に登壇してきました！#vuefes | PLAID engineer blog

Vue Fes Japan 2018に登壇してきました！#vuefes

エンジニアである私が、ビジネスチームを加速させる為に取り組んだ4つのアプローチを記載しました。
エンジニア的な思考を使って、どうチームリーディングすることが効果的なのか。私が取り組んだ中から、特に効果が高かったものを紹介させていただきます。

エンジニアがビジネスチームを加速させる為に取り組んだ4つのアプローチ | PLAID engineer blog

エンジニアがビジネスチームを加速させる為に取り組んだ4つのアプローチ

<p>プレイドのエンジニア兼ハンターの <a href="https://github.com/algas">@algas</a> です。<br>
<a href="https://ramdajs.com">Ramda.js</a> の関数を例にして JavaScript による関数型プログラミングの考え方を紹介します。<br>
本記事では Ramda.js 自体を紹介するのではなく、より深い関数型プログラミングの考え方を学ぶきっかけを作れることを意図しています。</p>
<h2>想定読者</h2>
<ul>
<li>Node.js でアプリケーションを実装したことがある</li>
<li>関数型プログラミングに興味がある</li>
</ul>
<h2>JavaScript でなぜ関数型プログラミングが必要なのか</h2>
<p>JavaScript のモジュールの多くは Mutable で副作用の影響を受けやすい実装になっています。<br>
副作用の影響を受けやすければ、そのモジュールを複数の場所で利用するのが難しくなります。<br>
さらに関数などのインターフェースが適切でなかったり、意図したとおりに機能しなければ再利用するのが難しく冗長なコードが増えてしまうことになります。<br>
冗長なコードは可読性が低く理解するのにも時間がかかります。<br>
それによって不具合を混入しやすくなったり、不具合を解消するのに不要な時間がかかってしまいます。<br>
関数型プログラミングを導入することで、コードを短く保ち素早く実装して不具合を混入しにくくなることが期待できます。<br>
これはもちろん手法の一つであり、すべての問題を解決する万能の魔法ではありません。</p>
<h2>Ramda.js と関数型プログラミング</h2>
<p>Ramda.js は JavaScript の実用的な関数のライブラリです。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/c88bd433-7b95-48db-a621-3166bd1ad72c/ramdaFilled_200x235.png" alt="ramdaFilled_200x235"><br>
以下のような特徴を持っています。</p>
<ol>
<li>純粋関数型<br>
不変で副作用の影響を受けにくいような設計になっています。</li>
<li>自動カリー化<br>
関数の再利用がしやすくなります。</li>
<li>引数の最適化<br>
基本的には最後の引数にデータが来るようになっています。</li>
</ol>
<p>Ramda.js は便利な関数を数多く揃えていて、このライブラリを使ってアプリケーションを実装するだけでも非常に有益です。</p>
<p>Ramda.js を使うとどのように便利なのかについては、<a href="http://randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting-started/">Thinking in Ramda</a> のブログに良くまとめられています。</p>
<h2>map の定義</h2>
<p>Ramda.js の <a href="https://ramdajs.com/docs/#map">map</a> 関数の定義を見てみましょう。</p>
<pre><code class="language-haskell">map :: Functor f =&gt; (a -&gt; b) -&gt; f a -&gt; f b
</code></pre>
<p>上記は JavaScript の文法ではありません。<br>
特に Haskell に馴染みがない読者向けに上記の定義を詳しく説明します。<br>
ちなみに Haskell では Ramda.js の map が <a href="http://hackage.haskell.org/package/base-4.12.0.0/docs/Prelude.html#v:fmap"><code>fmap</code></a> という関数に該当します。</p>
<p>'=&gt;' の左側は関数の型制約です。<br>
<code>Functor f</code> とは f は <code>Functor</code> であることを示しています。<br>
Functor 自体が何かについては後ほど詳しく説明します。</p>
<p><code>-&gt;</code> は関数型コンストラクタです。<br>
<code>a -&gt; b</code> とは型 <code>a</code> の値を引き数に1つ取り、型 <code>b</code> の値を返す関数であることを示しています。<br>
例えば <code>a -&gt; b -&gt; c</code> は第一引数に型 <code>a</code> の値を、第二引数に型 <code>b</code> の値を取り、型 <code>c</code> の値を返す関数です。<br>
a, b のように小文字で書かれた型に特に制約がなければ任意の型であることを表しています。</p>
<p>小文字がスペース区切りで連続している場合には、関数を適用したことを表しています。<br>
つまり <code>f a</code> は関数 f を a に適用した値です。</p>
<p>上記を踏まえてもう一度 <code>map</code> の定義を見直してみます。<br>
<code>map</code> は第一引数に <code>a -&gt; b</code> という値(すなわち関数)、第二引数に <code>f a</code> という値を取り、<code>f b</code> という値を返します。</p>
<p>詳しくは <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land Specification</a> をご参照ください。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/b3490a2b-51bb-45ed-865b-ca289e6f2314/logo.png" alt="logo"></p>
<h2>Functor とは何か？</h2>
<p>Fantasy Land Specification に記載されている <a href="https://github.com/fantasyland/fantasy-land#functor">Functor</a> の定義を見てみましょう。</p>
<ol>
<li>Identity<br>
<code>map(a =&gt; a, u) == u</code><br>
<code>a =&gt; a</code> という「何もしない」関数を map に適用しても、適用する前と同じです。</li>
<li>Composition<br>
<code>map(x =&gt; f(g(x)), u) == map(f, map(g,  u))</code><br>
これは <code>x =&gt; f(g(x))</code> という x に関数 g と関数 f を map で適用した値は、<br>
関数 g を map した値にさらに関数 f を map した値と同じです。</li>
</ol>
<p>Functor とは上記2つの性質 (Identity, Composition) を示すような型制約のことを指します。<br>
上記の map は Functor の例のために仮においたもので、map 以外の Functor の性質を持つ関数も同様の性質を示すことが期待されます。<br>
また map 関数の定義における f には任意の Functor を適用できます。</p>
<h2>Functor 制約を持つ関数の実装例</h2>
<p><a href="https://github.com/ramda/ramda-fantasy">Ramda Fantasy</a> では Functor として Maybe, Either など8つの実装が紹介されています。<br>
また Array, Object も Functor の性質を満たすことが分かっています。<br>
これらはすべて Functor の性質を満たしているので、Ramda.js の map 関数を適用できます。</p>
<p>以下で map 関数を使った実装例を紹介します。</p>
<pre><code class="language-javascript">const R = require('ramda');
const S = require('sanctuary');

const mapFunc = R.map(R.compose(S.mult(2), S.add(1)));
const a = [1,2,3];
const z = S.Just(42);
const n = S.Nothing;
const w = S.Right(99);
const e = S.Left(&quot;error&quot;);

console.log(mapFunc(a));
console.log(mapFunc(z));
console.log(mapFunc(n));
console.log(mapFunc(w));
console.log(mapFunc(e));
</code></pre>
<p><code>mapFunc</code> は Number を値に持つ Functor の中身に &quot;1 を足して 2 倍する&quot; 関数です。<br>
上記で mapFunc という関数を異なる Functor に適用していることに注目してください。<br>
ここでは List Number, Maybe Number, Either Number のそれぞれの値に全く同じ形式で mapFunc を適用しています。</p>
<p>出力結果は以下のとおりです。</p>
<pre><code>[ 4, 6, 8 ]
Just (86)
Nothing
Right (200)
Left (&quot;error&quot;)
</code></pre>
<p>各値に &quot;1を足して2倍した&quot; 結果が得られていますね。</p>
<h2>そもそも Functor を使うと何がうれしいの？</h2>
<p>Functor 自体は抽象的な存在であり、そのものが実践的な役割を持つわけではありません。<br>
Functor である Maybe などが実際に便利さを示します。<br>
したがって、ここでは Maybe を使うと何が便利になるかということを例に説明します。<br>
<code>Maybe a</code> は <code>Nothing</code> と <code>Just a</code> という2つの値コンストラクタを持ちます。</p>
<pre><code class="language-Haskell">Maybe a = Nothing | Just a
</code></pre>
<p>※ <a href="https://github.com/sanctuary-js/sanctuary">Sanctuary.js</a> の実装では <code>S.Nothing</code> と <code>S.Just(value)</code> という関数がコンストラクタです。<br>
ここで a は Non-Nullable Value になります。null は Nothing に変換されます。<br>
Maybe の世界には null は存在しないので、値が null であるかどうかをチェックする必要はありません。<br>
実装例で示したように Functor (Maybe) であることを前提とした関数を適用した場合には、Nothing か Just かを気にすることなく関数を適用することができます。<br>
Maybe を使う場合に null または Nothing を気にしなければならないのは、以下の2つの時だけです。</p>
<ol>
<li>外界から Maybe の世界に値を変換する時</li>
<li>Maybe の世界から外界に値を変換する時</li>
</ol>
<p>つまり、Maybe を使うと多くのプログラマにとって煩わしい null チェックの回数を大幅に減らすことができます。</p>
<p>本記事では Functor を主な例として説明しましたが、Fantasy Land に記載されているように Functor よりもさらに複雑な条件を持つ Applicative や Monad などの概念も存在します。<br>
これらを詳しくするには余白が足りないので他書にその役割を譲ることにします。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/2c88e33e-e64f-4f54-88ee-4205b516b80a/dependencies.png" alt="dependencies"></p>
<p>上記は Fantasy Land Specification から引用した図です。</p>
<h2>まとめ</h2>
<p>本記事では Ramda.js, Fantasy-Land を中心に Functor を使った JavaScript による関数型プログラミングに触れる試みをしました。<br>
現実的に現段階において本記事の概念に近づく実装をするためには以下を実践するほうがよいでしょう。</p>
<ul>
<li><a href="https://www.typescriptlang.org/">TypeScript</a> で <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html">strictNullChecks</a> を有効にする</li>
<li><a href="http://www.purescript.org/">PureScript</a> で実装する</li>
</ul>
<p>また本記事では説明できなかった項目やさらに発展的な内容を知るには Haskell などのプログラミング言語の仕様や実装を学ぶことをオススメします。</p>
<h2>参考文献</h2>
<ul>
<li><a href="https://ramdajs.com/">Ramda.js</a></li>
<li><a href="https://github.com/fantasyland/fantasy-land">Fantasy Land Specification</a></li>
<li><a href="https://github.com/ramda/ramda-fantasy">Ramda Fantasy</a></li>
<li><a href="https://github.com/sanctuary-js/sanctuary">Sanctuary.js</a></li>
<li><a href="http://hackage.haskell.org/">Hackage</a></li>
<li><a href="http://randycoulman.com/blog/categories/thinking-in-ramda/">Courageous Software: Thinking In Ramda</a></li>
</ul>
<h2>最後に</h2>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://platform.wantedly.com/visit_buttons/script.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "wantedly-visit-buttons-wjs"));
</script>


Ramda.jsの関数を例にしてJavaScriptによる関数型プログラミングの考え方を紹介します
