Hackarade #04: Create Your Own Interpreter

技術部の遠藤（@mametter）です。Rubyの開発やってます。

クックパッドでは、Hackaradeという社内ハッカソンを定期的に開催しています。第1回はRubyインタプリタのハック（MRI Internal Challenge）、第2回は機械学習の体験（Machine Learning Challenge）、第3回はISUCON風の社内コンテストを行いました。 4回目となる今回は、遠藤が講師となり、「言語処理系を自作する」というテーマで開催しました。その概要と成果の一部をご紹介します。

概要

Cookpad Hackarade #04: Create Your Own Interpreter from mametter

言語処理系の作り方の基本を一日で習得することを目標として、「RubyインタプリタをRubyで書くこと」を具体的な課題としました。

言語処理系は通常、プログラムテキストを抽象構文木に変換する「パーサ」と、抽象構文木を元に指示を実行する「評価器」からなります。今回は、評価器の実装にフォーカスしました（パーサは講師が公開しているminruby gemを利用しました）。

フルセットのRubyを一日で作るのは不可能に近いので、"MinRuby"というサブセット言語をターゲット言語としました。MinRubyは、Rubyの言語機能のうち、次のものだけを持つ言語です。

• 四則演算、比較演算
• 文、変数
• 分岐とループ
• 関数呼び出し
• 関数定義
• 配列、ハッシュ

講師からは、インタプリタの骨格となるスクリプト（interp.rb）とテストケースを提供しました。このスクリプトには多数のraise(NotImplementedError)が含まれています。この穴を上から順に埋めていくと、上記の機能が順に実装されていって、テストケースも徐々に通っていきます。このあたりはゲーム感覚で進められるように配慮しました。

すべてのテストが通ったら、最後の課題は「セルフホスト」です。セルフホストとは、ホスト言語（インタプリタを実装している言語）をターゲット言語にすることです。つまり、interp.rbをRubyではなくMinRubyで書き直します。これにより、「interp.rbをinterp.rbの上で動かす」とか、「interp.rbを動かすinterp.rbをinterp.rbの上で動かす」というようなことが可能になります。

発展課題と成果

セルフホストに成功した後は、自由にインタプリタを拡張してもらいました。正確に数えていませんが、少なくとも10人以上の参加者がセルフホストに成功し、さらにいろいろ拡張してくれました。

Hackarade当日の夜はパーティで、有志に成果を発表していただきました。その一部を以下に紹介します。

• 高速化1：case文を直接実装したり頻出ケースを優先したりして3倍以上速くした
• 高速化2：定数畳み込みや部分評価を実装して実行時の無駄な計算を省いた
• 型チェッカ：定数参照の構文を型注釈として使い、num :: Integer = "str"などとするとエラーが出るようにした
• オブジェクト指向：クラスやメソッドを実装した
• splatの実装：可変長引数の関数呼び出しを実装した
• ブロックの実装: yieldでdo...endが呼べるようにした
• 正規表現：マッチングのエンジンから自力で実装した
• gotoの実装：gotoを実装した
• MinSwift：Swiftで同じことを再現しようとした（未完）
• コンパイラ：内部的にバイトコードを生成してからVM実行するようにした
• 完全セルフホスト：MinRubyでパーサを書き、minruby gemに依存せずにinterp.rb単体でセルフホストするようにした

MinRubyは規模が小さいので、手軽に新機能を実験する土台になります。とはいえ、一日でコンパイラや完全セルフホストに到達する人まで出るとは、正直予想を上回りました。

まとめ

「言語処理系を自作する」というテーマで開催した第4回のHackaradeを紹介しました。もともと言語処理系に詳しいエンジニアから、そもそもRubyをあまり触ったことのないエンジニアまで、幅広い人に楽しんでいただけたと思っています。

Hackaradeはクックパッドのエンジニアの技術力向上を目的としているイベントです。社員エンジニアは原則全員参加（もちろん業務として）、今回はさらにエンジニアアルバイトも業務として参加可能でした。そんなクックパッドに興味を持った方は、募集要項ページをご覧ください。

なお、今回の資料はSlideShareとGitHubに公開しています。

https://github.com/mame/cookpad-hackarade-minruby

言語処理系のセルフホストは概念的にはむずかしくないですが、実際にやってみると意外とデバッグがむずかしい（多段になると、どのレベルで例外が起きているのか把握するのに頭を使う）です。読者の方もぜひ一度やってみてください。今回の講義は講師（遠藤）の著書である『RubyでつくるRuby - ゼロから学びなおすプログラミング言語入門』（Amazon）をベースとしています。自力で解くのが難しかった方、答え合わせがしたい方、復習したい方などはご参照ください。

【開催レポ】Cookpad Tech Kitchen #18 生鮮食品EC クックパッドマートの開発秘話

こんにちは。広報部のとくなり餃子大好き（ id:tokunarigyozadaisuki ）です。

2018年9月26日に、Cookpad Tech Kitchen #18 生鮮食品EC クックパッドマートの開発秘話を開催いたしました。クックパッドでは、Cookpad Tech Kitchenを通して、技術やサービス開発に関する知見を定期的に発信しています。

本イベントの登壇者4名

第18回は2018年9月20日にリリースいたしました、「毎日が楽しみになる、食材店。『クックパッドマート』」の開発秘話をテーマとし、事業開始の背景から初期の価値検証プロセス、アプリのデザイン、iOS開発の進め方についてなどたっぷりとお話をさせていただきたました。 本ブログを通して当日の様子をご来場いただけなかったみなさまにもお届けしたいと思います。

生鮮食品ネットスーパー「クックパッドマート」　

クックパッドマートは、精肉店や鮮魚店、ベーカリーなど地域で有名な店や農家の「こだわり食材」をアプリから購入できる生鮮食品ネットスーパーです。 「焼きたてパン」や「朝採れ野菜」などの新鮮な食材を、販売店から集荷した当日に受け取ることができます。1品からでも送料無料で注文が可能、毎回必要な分だけ手軽に購入することができます。 商品は、提供地域の様々な店舗・施設等に設置された「受け取り場所」の中から、利用者が選んだ場所・時間に受け取ることが可能。そのため、日中忙しくて買い物をする時間がない方でも、新鮮なこだわり食材を手軽に入手することができます。

2018年10月10日現在、商品の受け取り場所は学芸大学駅周辺の「なんでも酒やカクヤス　学芸大学前店」「カラオケの鉄人　学芸大学店」の2店舗となります。都市圏を中心に順次拡大を予定しています。

▶︎アプリダウンロードはこちらから https://itunes.apple.com/jp/app/id1434632076

発表プログラム

「クックパッドマートが目指すもの」

はじめにお話いたしましたのは、クックパッドマートの事業責任者である福崎です。クックパッドマートがどのような課題を解決するサービスであるか、またその課題に向き合うチームの紹介をさせていただきました。

「リリースまでに捨てた10のこと」

デザイナー兼エンジニアで、現在は主にアプリのサーバーサイド実装を担当している長野より、クックパッドマートの事業立ち上げの際に行ったプロトタイピングとその結果をふまえた学びについてお話いたしました。

本登壇内容についてはクックパッド開発者ブログでも記事として公開しております！　こちらもぜひご覧ください。　

「クックパッドマートでアプリをデザインした話」

アプリデザインとマーケティングを担当している米田からは、 クックパッドマートをデザインという切り口から振り返り、ラフデザインから実装デザインまでの経緯を発表させていただきました。

発表終盤におまけとしてご紹介しました、クックパッドマート公式キャラクターの「トマート」のTwitterアカウントも、ぜひフォローしてくださいね！

食べたくなるかわいさを目指して、おいしさを磨いているトマ！ https://t.co/VduyyI38lF

— トマート / クックパッドマート (@cookpad_mart) September 21, 2018

「クックパッドマートのアプリ開発について」

最後は、クックパッドマートのiOSアプリ開発を担う中山の登壇です。 なぜアプリを開発することに決めたのか、実際の開発方針や開発速度を上げるために行ったこと、毎日使ってもらえるアプリをつくるために心がけていることなどについて、お話しさせていただきました。

付箋形式でお答えするQ&Aディスカッション

Cookpad Tech Kitchenでは参加者のみなさまからの質問を付箋で集めております。開発体制やスケジュール、iOSアプリのアーキテクチャについてなど具体的な内容から、クックパッドマートの今後の展開などについてなどたくさんのご質問をいただきました。ありがとうございました！

クックパッドマート開発責任者の勝間が司会を担当いたしました

シェフの手作り料理

Cookpad Tech Kitchen ではイベントに参加してくださったみなさまにおもてなしの気持ちを込めて、シェフ手作りのごはんをご用意し、食べながら飲みながらカジュアルに発表を聞いていただけるように工夫しています。

今回は、クックパッドマートで実際にご購入いただける食材でお料理を用意させていただきました！

おわりに

今回のイベントでは、「毎日が楽しみになる、食材店。『クックパッドマート』」の開発秘話についてご紹介いたしました。 クックパッドマートでは、サービス展開に向けて日々取り組んでいるところですが、実現したいことに対して、まだまだ力が足りていません。そこで、サービス立ち上げにコミットしていただける方を募集しております。

サーバーサイドエンジニア
オペレーションマネジャー
コンテンツディレクター
オープンポジション

https://info.cookpad.com/careers

次回のCookpad Tech Kitchenは、11月1日（木）を予定しております。今後のイベント情報についてはConnpassページについて随時更新予定です。イベント更新情報にご興味がある方は、ぜひメンバー登録をポチっとお願いします！

cookpad.connpass.com

Cookpad Product Internship 2018 の振り返り

新規サービス開発部の出口 (@dex1t) です。普段はデザインからアプリ開発まで、新規サービス立ち上げに必要なことを浅く広くやっています。

さて、R&Dインターンや技術インターンに続きまして、9月10日~14日にかけてデザイナーとサービス開発エンジニア向けのプロダクトインターンシップを開催しました。私は本インターンの全体設計と講師を担当しました。この記事ではその内容を簡単にご紹介します。

このインターンはざっくりいうと、デザイナー・エンジニアでペアを組み、ゼロから"使える"サービスを作るという内容です。なかなかハードですね 😉

今年は「一人暮らししている人の料理が楽しみになるサービス」というテーマで、5日間のサービス開発を実践していただきました！

Day 1-2. 基礎編 ✍🏻

1日目から2日目午前は、「サービス開発を実践するための道具を提供する」という建て付けで、講義やミニワークを行いました。

ざっくり以下のような内容で、体験やコンテキストといったサービスデザインに関する抽象的な話から、サービス開発における具体的な手法・ツールまで駆け足で網羅しました。

• サービスとは？体験とは？
• サービス開発におけるマインドセットとプロセス
• ユーザー理解
  • ワーク: ユーザーインタビューの実践
• アイデア発想と言語化
  • ワーク: 価値仮説とストーリー作成
• 試作とテスト
  • ワーク: ペーパープロトタイピング、アクティングアウト

サービス開発に初挑戦の方も多くいたこともあり、調査・発想・試作・試行の各ステップをなるべく丁寧に説明しました。実際の講義資料 (公開可能分のみ) はこちらです。

Day 2-5. 実践編 💪

2日目の午後からはいよいよテーマに沿って実践編のスタートです。

参加者の方にはテーマだけをお渡しし、具体的にどんなサービスを作るのか、言い換えるとどんな問いを立てるのか、その解き方も含めて、全てチーム毎に自ら考えて実行してもらいました。各チームには現場のデザイナーが専属メンターとして付き、全力でチームをサポートします。

序盤

肌感覚をつかむための最初の一歩として、インタビューを各チーム自発的に行っていました。参加者同士でのインタビューはもちろん、その場にいる社員を捕まえたり、電話インタビューしたりと、限られた時間のなかでインプットを増やすために各チーム工夫して動いていました。

中盤

インタビューを繰り返し、課題が見えはじめたところで、次はコンセプトの設計です。メンターに企画案を壁当てしながら、各チーム頭を悩ませていました。コンセプト設計には、価値仮説シートやストーリーシートなど、初日に講義の中で紹介した道具を活用してもらいました。

三日目の午後は中間発表です。ここでは企画案とその動作モックを使って、アクティングアウト形式での発表を必須としました。アクティングアウトは体験のプロトタイピングとも呼ばれる手法で、寸劇形式でサービスの利用体験を表現することで、そのリアリティの有無を確かめることができます。

この中間発表の様子は、動画撮影をして発表者自身にも確認してもらいます。こうすることで、この時点での企画案を客観視することができ、自らの判断で軌道修正するチームも見られました。

また講評者の観点では、テキストベースの企画書を読み込むよりも寸劇形式のほうが理解しやすく、より本質的なフィードバックに集中できるという利点もあります。

即席の名札で登場人物を演じ分けているチームも

終盤

終盤はいよいよ実装です。残り少ない時間の中で、実装すべきところはどこなのか、どこを捨てるのか判断するのはサービス開発エンジニアの腕の見せ所です。弊社オフィスのキッチンで、自分たちのプロトタイプを試しに使いつつ料理するチームも出てきました。

最終発表

5日目の夕方には最終発表として、成果物のデモを中心に発表してもらいました！タイトなスケジュールのなかで、全チーム何らかの形で試すことができるサービスが出来上がっていて素晴らしかったです。

最終発表では、弊社CTOやデザイナー統括マネージャーを含む5名が審査員となり、優秀賞1チームを選ばせていただきました。

優勝チームは「その場限りのコミュニティでの料理通話体験」というコンセプトで、通話をしながら料理が楽しめるアプリの提案でした。デザインの観点では「料理経験が浅く失敗が多い」「1人で作って1人で食べるのが孤独」というマイナスをただ埋めるだけでなく、「失敗やハプニングも含めてみんなで楽しもう」という考え方でプラスに転換している点を評価しました。また、赤の他人との料理通話をどうアイスブレイクするかといった細かい配慮が、UIとしても表現できており素晴らしかったです。エンジニアリングの観点では、時間が無い中で「通話しながら料理する」という多くの人にとって未知な体験を、実際にその場で試せるクオリティで仕上げた点を高く評価しました！

最後は懇親会で終了しました！チェキコーナーも人気 ✌️

ということで、5日間でゼロからサービス作りをするというハードな内容でしたが、皆さんやり切っていただけました👏👏👏

プロダクトインターンシップで伝えたかったこと

ここからは裏話として、インターンの設計面についてです。今回5日間に渡って講義や実践を行いましたが、伝えたいことは大きく3つありました。

リアリティのある仮説をもつ

サービス開発は正解がなく、「やってみないと分からない」が大前提なのですが、無闇にやればいいという訳でもなく、仮説の質を上げるのが大事なポイントです。

良い仮説 (企画) とは何なのか。非常に難しい問題で私も分かりませんが、そのひとつにリアリティがあること、企画を聞いただけでサービスを使う情景がありありと目に浮かぶことは必要条件であると私は思います。（十分条件ではない😑）

講師側としては、問いの立て方をインターンシップで教えることは難しく、1day形式など特に時間が限られるワークショップでは、問いが立てやすいように仕立てた材料を、ペルソナのような形で渡しています。

ただし現場のサービス開発では、ペルソナが上から降ってくることはあり得ません。自分たちで情報を取りに行き、肌感を掴むことが求められます。

そのやり方も現場では人それぞれ様々ですが、今回は最も汎用的なツールとして、ユーザーインタビューを実践してもらいました。各チーム自ら工夫して情報を取りに行き、自分たちで見聞きした一次情報を元にしているからこそ、リアリティのある仮説が立てられることを体感してもらえたかな、と思います。

とりあえずやってみる

今回講義の冒頭では、次のようなインターン中に求める姿勢を明文化しました。過去に開催したこの手のワークショップでの反省も踏まえてなのですが、コンセプトワークだけでなく実際のモノに落とし込む部分を強く求めました。

この3つは、デザインファーム IDEOのValuesから表現を一部借りています。余談ですが、このValuesは新規サービス開発をやってる人間としてすごく共感できます。

やってみないと分からない状況下では、長々と議論やブレストをしても非効率になり得ます。荒削りでも良いので一度形にしてみると、正解でなくても、その形が間違っていることは最低限分かります。そうして徐々にボケた輪郭をシャープに描いていく姿勢は大切です。

試作と試行を繰り返す

また形にするのは一度限りではありません。それを壊してまた作ってを繰り返すのがサービス開発の基本姿勢です。今回最終発表で評価が高かったチームはいずれも、プロトタイプを何らかの形で自分たちで試してみたチームでした。今回優秀賞となったチームは、初対面の社員を捕まえて実際に電話しながら料理したり、帰宅後もお互いに通話しながら料理したりと、試行錯誤を繰り返しつつサービスを形づくるプロセスも素晴らしかったです。

インターン生 (奥) が初対面の社員 (手前) と通話しながら料理する様子

5日間という現場以上にハードなスケジュールなこともあり、繰り返しができても1, 2回だったことは講師としての反省点でした。またインターンの制約上、テストする対象が自分たちや社員止まりでしたが、本来は実際の想定ユーザーにテストできるとベストです。これらの点は来年のインターンシップでは改善できればと思っています。

まとめ

今回のサマーインターンシップでは、講師により仕立てられたサービス開発ではなく、より実践的なリアリティのあるサービス開発を体感していただけたかな、と思います。参加していただいた皆さま、本当にありがとうございました！！

また、このようなサービス開発は現場でももちろん実践しています。新卒・中途問わず、ご興味あるかたは各ポジションにご応募いただくか、@dex1t までお声がけください 🙌