サービス開発の現場から
 OSSを生み出す思考技術 Yuichi Goto (@_yasaichi) October 22, 2018 @ Web現場Meetup #4

self.inspect @_yasaichi yasaichi http://web-salad.hateblo.jp ピクスタ株式会社　 技術推進チームリーダー !2 一般的には「技術基盤」と 言われるようなチーム

本発表について 話すこと • 私がOSSの開発に至る までの思考パターン • 思考パターンを実際の 問題に適用した例 !3 話さないこと • 紹介するOSSの詳細 • 原理の理解に必要な RubyやJSの知識 • 具体的な実装

Agenda 背景と目的 　 OSSを生み出す思考パターン 　 実際の適用例 　 まとめ !4

サービス開発の現場はOSSネタの宝庫 • 私（エンジニア歴4年目）の場合 • 今まで作ったOSSは8つ • 作成したOSSのほとんどが現場で直面した問題が きっかけで生まれたもの • 現場に立っているからこそ、開発者の問題を解決する ソフトウェアを生み出せる !5

個人でOSSを開発・公開するメリット • 自身の能力を外部に示せる形で残せる • 一発当たれば有名（？）になれるかも • 開発する過程で少なからず学びや成長がある • 何かを拡張する場合、作る過程で対象に詳しくなる • 公開する前提で作るので良いプレッシャーがある !6

とはいえ • 経験上、誰もができるわけではなさそう • 技術的なスキルの問題というよりは、単に機会を
 見逃していることが多いように見える • 現場の問題に対してどう向き合うか境目では？ • 自身の思考パターンを共有することで誰かが良い OSSを生み出すきっかけになれば嬉しい ☺ !7

Agenda 　 背景と目的 OSSを生み出す思考パターン 　 実際の適用例 　 まとめ !8

全体の流れ !9 解決策を説明する一文を考える ③ メタ認知 解決策が適用できる別の問題を探す ② 特化 問題をなるべく小さくして解く ① 汎化

フェーズ1: 汎化 • やること 目の前の問題をなるべく小さな別の問題にしてから、 それに対する解決策を考える • なぜやるのか 問題を小さくしようと意識すると、結果として汎用的な 解決策が生まれやすいため !10

フェーズ2: 特化 • やること 得られた解決策が目の前の問題以外のケースにも 適用できないか考える • なぜやるのか 得られた解決策が汎用的かどうか確認するため !11

フェーズ3: メタ認知 • やること 得られた解決策をOSSとして公開したと仮定して、
 提供する機能を説明する一文（英語）を考える • なぜやるのか 他者に説明しようと試みることで、得られた解決策の 有用性を客観的に捉えることできるため !12 READMEを書いても良いが、もう 少しお手軽なこちらがおすすめ

Agenda 　 背景と目的 　 OSSを生み出す思考パターン 実際の適用例 　 まとめ !13

事例1: sass-var ॾࣄ৘ʹΑΓඇެ։ !14

事例2: gakubuchi https://github.com/yasaichi/gakubuchi • RailsのAsset Pipelineを利用して静的ページを
 管理できるようにするgem • 開発のきっかけ メンテ前に public/503.html を修正していた際に、 Viewを書くようにエラーページを書きたいと思った !15

思考の流れ: 汎化フェーズ !16 やりたいことを分解すると、テンプレートエンジンの利用、
 外部CSS/JSの参照、ヘッダー等の再利用の3点 最後の「部分テンプレートの利用」さえ諦めれば、Asset Pipelineがそのまま使えそう。エラーページだしいいか Rakeにはタスクの前後に任意の処理を差し込むAPIがあ るので、エラーページをpublic以下に移す処理だけ書く

思考の流れ: 特化/メタ認知フェーズ !17 実装を工夫すれば、エラーページに限らず任意の静的 ページ（キャンペーンページ等）で同じ仕組みが使えそう 静的ページ全般で使えるので、一言で説明すると"Static pages management with Asset Pipeline"かなあ よさそうなのでgemify！ $

結果 !18 $ echo "gem 'gakubuchi'" >> Gemfile $ bundle install &>/dev/null && bin/rails generate gakubuchi:install create config/initializers/gakubuchi.rb create app/assets/templates $ bin/rails assets:precompile &>/dev/null $ cat public/foo.html <%# app/assets/templates/foo.html.erb %> <%= stylesheet_link_tag 'application', media: 'all' %> precompileすると、外部CSSを参照 したHTMLがpublic以下にできる

番外編: grease https://github.com/yasaichi/grease • Tilt（テンプレートエンジンのAPIを統一するラッ パー）をSprockets v4でも動作させるアダプター • 開発のきっかけ（≠現場の問題） 事例2で紹介したgakubuchiで「Sprockets v4で
 動かないんですけど…」というIssueが立った !19 Asset Pipelineの実装に 使われているgem

思考の流れ !20 gakubuchiにSprockets v4対応のコードを足すのではな く、別のgemとして実装してこれを適用する形にする Tiltが対象としているテンプレートエンジンとSprocketsを 統合するgemを開発する場合にも同じように使えそう ニッチだが、"Tilt adapter for Sprockets 3 or later"と いう一文でわかる人には絶対わかると信じてgemify！ $

https://github.com/metaskills/less-rails/pull/137 !21 結果

何が起きた？ • 特化フェーズでの読みがそのまま当たった • less-rails（RailsでLessを使うためのgem）での Sprockets v4対応にgreaseが利用された • 結果、35万ダウンロードの私的最大ヒット作に ✌ • "問題を小さくしようと意識すると、結果として汎用的 な解決策が生まれる"ことを身をもって実感した !22

Agenda 　 背景と目的 　 OSSを生み出す思考パターン 　 実際の適用例 まとめ !23

まとめ • サービス開発現場の問題をきっかけにOSSの開発に 至るまでの私の思考パターンを紹介した • 汎化→特化→メタ認知の3フェーズで成り立つ • 各フェーズにおいて考えるべきことがある • この思考パターンを実際の問題に適用した例を3つ 紹介し、その効果を示した !24

ご清聴ありがとうございました !25