Inside Frontend #2に参加してきた

Inside Frontend

inside-frontend.com

大手町日経カンファレンスルームで開催されたINSIDE FRONTENDというカンファレンスに参加してきました。
2回めの開催ということですが、僕は今回が初めての参加でした。

どういうカンファレンスだったか

「Web フロントエンドの現場とこれからをつなぐカンファレンス」ということで、主なスポンサーのCyber Agentさん、日本経済新聞社さん、YAHOO!さんを中心に各現場でのノウハウがたくさん聞けました。
このカンファレンスでは、一般的な講演形式の「セミナー」と、質疑応答形式の「AMA（Ask Me Anything）」が並行しており、AMAではみなさんが普段どのような悩みを持っておられるのか、どのへんに引っかかりポイントがあるのかが、よりわかって良かったです。

やり取りのログは、運営の方がいかにまとめてくださっています！すごいです。

GitHub - insidefrontend/issue2-ama: AMA ブースで聞いてみたい質問をこの Repo の Issue として Submit ください（どなたでも！）

また、当日のセッションのビデオもFRESH!さんにアーカイブされています。（生放送もされていました。）

freshlive.tv freshlive.tv

このエントリでは、僕が参加したセッションをベースに感想を書いていきます。
カンファレンス中に書いたメモもこちらに残しますが、あくまでメモなので、上記のビデオや、公開されている資料、AMAは上記のgithubにまとまっているので時間がある方はそちらを参照される方が良いと思います。
実際に参加して現場感を感じたり、知り合いと会ったり、質問したりというのが良いですが、すべてログに残っているのは素晴らしいです！

セッションの感想

以下感想です。

freeeのアクセシビリティ、いまとこれから - @magi1125 (AMA含む)

docs.google.com Issues · insidefrontend/issue2-ama · GitHub

freeeにおけるアクセシビリティの意識を上げていくときの取り組みの紹介と現状、これからの方向性についての紹介でした。
アクセシビリティチェックリストの紹介や実際にどのようにコードに落としていくかなど技術的な話もありましたが、僕はかなりエモい話だったなと感じました。

正直、アクセシビリティを意識してのプロダクト開発というのをそこまで意識していなかったので、新鮮に聞くことができました。
アクセシビリティというものを、デザインの問題、凝ったアニメーション、などそういったもので 間違って認識していたので改めました。（じゃあアクセシビリティが何なのか、というのは僕の言葉ではうまく説明できる気がしないので、資料を参照ください。）

作るサービスによってアクセシビリティが重要視されるかどうか、必要性が議論されるべきというのは、僕も感じることがありました。
例えば担当している法人向けの管理画面などは、定常運用をいかに効率化するか、間違いがなく運用できるようにするか、などが重要視される、といったような違いがあげられるかと思います。

現場の ES201x とアーキテクチャの変遷と未来 - @mizchi (AMA含む)

speakerdeck.com Issues · insidefrontend/issue2-ama · GitHub

題名通り、フロントエンドのこれまでのアーキテクチャ変遷から、未来を予測すると言った話でmizchiさん節がすごかったです。
僕は現在プロダクションコードとして存在するレベルのjQueryしか知りませんが、ざっくりとこれまでのことを理解できましたし、現状のフロントエンドのライブラリ、フレームワークを大枠で捉えたときにEventとStateとViewを完全に分離するというのは、そうですよねと思って聞けました。

WebComponentsの話や、今のWeb標準とPWAの関係*1などについてもお話されていました。

とはいえ、一番面白かったのはじゃあどうやって現状のものをきれいにするのか、というところでした。
まずやるべきこととしてprettierを入れたり、lintを入れたり、型をつける作業をしたりとかなり泥臭いところからやっていくということで、フリーランスでいろいろな現場を見られているかたがそのように段取りを提示してくださるのは良いなと思いました。

コンポーネントTDDの実践から見えたもの - @pirosikick

www.slideshare.net

ReactとVueにおいてコンポーネントを作成するときにTDDを導入する話。
TDDとは関係のないコンポーネントのテストを書くときのハマりどころから、TDDを導入する際の注意点と、今後の改善点を説明してくださっていました。
TDDについてはTDD本を読んでいたので、目的や良さなど理解できていたように感じました。

コンポーネントのテストということで、デザイン変更のたびに頻繁に変わりうるUIのテストをどこまで書くのかという議論があるのではないかと思っていたのですが、セッションを聞いていてTDDでやるとコンポーネントのテストを見た目とふるまいを分離して書けるのかもしれないなと思いました。
セッション中に紹介されていた以下の資料も参考になりそうでした。

slides.com

動的デザインガイドのつくり方 - @narirou

speakerdeck.com

モノリシックなフロントエンドのアプリケーションをデザインガイドラインを適用するための開発プロセスと、各ステークホルダーとの調整方法をまとめて話してくださっていました。
Design Systemという概念やそれが具体的にどういうものだったのかということはいまいち理解しきれなかったのが残念だったのでもう少し他の資料も当たってみたいと思います。

Micro-benchmarking is Hard - @saneyuki

docs.google.com

開発中にベンチマークを取る際ときに、しっかりと意味のあるベンチマークを取らないと根拠のない数字から可読性の低いコードを生産してしまう可能性があるよ、という話でした 。
具体的には、
大きな（マクロな）機能のベンチマークを取る場合はその機能の使われ方内部の実装をしっかりと理解しなければならないために難しく、
じゃあちいさな（マイクロな）機能のベンチマークはどうなのかというと、利用しているJavaScriptエンジン（今回はフロントエンドの話なので）の最適化の実装によって期待しているような結果が得られない可能性があるので難しいということでした。

結局、エンジンの内部実装を理解して最適化されにくいようにベンチマーキングするのか、ベンチマークする単位をある程度複雑にして最適化されにくくするのかというような結論だったのではないかと思います。
ふわっと思います、と書いたのは、このセッションが僕にはかなり難しかったからです。
もう少しJavaScriptに詳しくなってから、資料を読み返したいと思います。

まとめ

かなり遅くなりましたが、Inside Frontend #2の感想記事を書きました。
現在、業務にてStorybookの導入を勧めているため、今回のInside Frontend#2ではUIコンポーネントのデザインや設計についてのセッションを多く聞きました。
アクセシビリティやベンチマークなどは初めての話が多く、興味を惹かれたので、優先度付けて深ぼれたらなと思いました。

*1:こちらはデブサミで詳しく話されるようです。

続きを読む

物理の可視化で楽しくカイゼンを回しているヴァル研究所に遊びに行った

ヴァル研究所（以下、ヴァル研）さんに遊びに行ってきました。

www.val.co.jp

f:id:zuckey_17:20180209174211j:plain:w300

サービスとしては、「駅すぱあと」などで有名ですが、ある一方では会社全体で、アジャイルおよびアジャイルのプラクティスを導入され、業務改善にすごく良い感じで取り組んでおられることで有名な会社さんです。

遊びに行ってきた聞いたきたこと、感想などをメモ的に残しておこうと思います。

何をしに行ったのか

f:id:zuckey_17:20180209174251j:plain:w200

有名なスライドで、↓のようなものがあるのですが 、

www.slideshare.net

この発表者のぷぽさん id:pupupopo88 と面識があり、

について事例を見たり、それについて議論したりするという目的で見学に行ってきました。

公開できない情報が記載されていたので、KPTボード、リリーストレイン、カレンダーボード、スプリントボードなどは写真に収めてこれなかったのが残念です。

中の人のブログがあって、物理ボードの雰囲気などは伝わるかなと思っています。

hiiiiiiihikaru.hatenadiary.com

KPTについて

KPTは振り返りツールで、

  • Keep＝よかったこと
  • Problem＝悪かったこと
  • Try＝次に試すこと

の頭文字を取っています。

僕が所属する開発チームでも導入していましたが、「T」が消化されず、意味を見出せなくて立ち消えてしまったという経緯がありました。

話しているうちに、継続させていくにはいくつかポイントがありそうだなと思いました。

物理でやったほうが良い

ヴァル研さんは本当に物理ボードが多く、いろいろなことを物理的に可視化されています。 その中でもKPTは物理でみんなで囲みながらやった方が良いとのことでした。

ワイワイやるのが大事

「KPTで振り返りを始めます」といっても、業務が忙しかったり、やり方に馴染みがなかったりすると辛いというメンバーがいたりします。
そういったことを解消するには、楽しく続けて、習熟させていくということが重要ということでした。
KPTでよく言われるのは「ちょっとくだらないことをあげて発言のハードルを下げる」、というテクニックですが、同じ感じで始めはKを多めにして、より楽しくするということが重要なようです。

PをPのままで放置しない

「やるやら」をまず決める、対応するものをTに落としてマトリクス化（重要度と難しさを軸にする）することが重要とのことでした。 やらないものについては2種類あって、

  • 大した問題ではない
  • 大きな問題すぎる

後者は、別で深掘りするための会議などを設けるといったTにすることが重要とのことでした。
大きすぎる問題について、Tを無理やり作ってしまうと、結局重い問題だけが溜まってしまうというのは僕のチームに起こった問題に近いかもしれないと感じました。

また、「やるやら」や、やらないことの大きさの判断については、本当の課題を見出す技術などが重要というのがありました。
そういったことに長けた外の人を呼んだりしつつ、併せて技術力を磨いていくしかない、ということでした。

リリーストレイン + カレンダーボード + スプリントボード

この3つのボードが、ヴァル研の多くのチーム（特に開発関係）で導入されていたように感じました。

規模の順に リリーストレイン => カレンダーボード => スプリントボード という関係性です。

基本的には

  • リリーストレイン
    • 半年間の大まかなスケジュール（半月単位で見直しあり）
  • カレンダーボード
    • 月1のものリリーストレインからブレイクダウンしたやること、イベント
  • スプリントボード（カンバン）
    • 1週間（1スプリント）単位でのタスクとそのポイント

という風に分類をされているようでした。

すべて物理でやられているところも多かったのですが、開発チームについては、PRとタスクを紐付けたり、リモートワークに対応するためにスプリントボードのみデジタルにされているチームが多いということでした。

また、スプリントボードのタスクはそれぞれに、

  • やる理由
  • ゴール
  • 大まかな方法

を書くことをルール付けされていました。 粒度や書き方などは修正すれば良くて（例えば小さすぎるタスクには何も書かれていなかったりしていました）、徹底することよりも、始めること、それを続けることが大事なのだな、という印象を受けました。

その他

開発以外のチームで導入する良さ

純粋に、そのチームの業務が改善するということ以外にもメリットがあるようでした。
開発以外とも含めたチーム間でアジャイル用語や、アジャイルのプラクティスの言葉が伝わるという状況はかなり嬉しいということでした。
確かに、開発には「それは優先順位低いから次のスプリントでやりますね。」というので伝わることも、営業さんやその他のビジネスサイドの方には、違う言い方をしないと行けないのは積もるとコストなのかなとも思いました。
共通言語の本として、SCRUM BOOT CAMP THE BOOKを導入されていて、一時期購買の書籍購入履歴がそればかりになったという話もされていました。

VSM（Value Stream Mapping）*1

僕も初めて知ったのですが、VSMというものが、開発島の至る所に貼ってありました。
僕のかんたんな理解では、開発にかかった時間を可視化することで、どこのプロセスにどれだけの時間がかかっているかを可視化し、効果が高いタスクや改善ポイントを見極めることができる、といったものです。
いろいろな壁に貼ってあるのをざっくりと眺めて、サービスの流れが見えるような気がしたので、本来の目的だけではなくサービス全体を見渡す意味でも良さそうだなと感じました。
また、ヴァル研では、そのプロセスを誰が担当していたかということも書かれており、その部分に詳しい人もわかりやすくなっているのも良さそうでした。

物理ホワイトボード、壁が豊富

自社ビルということもあり、広く、（開発以外も）1チーム5~10人に2枚ずつくらいのホワイトボード があり、さらに壁際に基本的に机がなく、壁がフリーでした。
壁一面をホワイトボードして活用されているところも多かったので、僕の会社にはない感じだなと思いました。*2

物理での可視化は、

的な意味で良いなと思いました。
自社ではどのように実現するのか、物質的な問題は個人では解決が難しいなと悩ましいところだと思いました。

週の真ん中に振り返りをやる

スプリントレビューについてもKPTも週の真ん中にやるのが良いということでした。
理由としては、金曜日になると疲れも溜まって生産性が下がったり、ネガティブな意見が多くなったりするとのことです。
水曜午後1が一番のおすすめポイントらしく、なんとなくキリがいいというだけで週の最後にしていましたが、それだけで雰囲気が良くなるなら即採用なんじゃないかなと思いました。

まとめ

とりとめのないものになってしまいましたが、今回の見学では、「圧倒的な物理の可視化とその維持のノウハウがすごかった」、という印象でした。
組織にアジャイルの概念、プラクティス、そしてカイゼンの文化を導入しようとしたのは、上からのお達しだったらしいですが、それを受けて社員のみなさんがしっかり続けられていたのがすごいなと思いました。
真面目な人間性がそれを実現している、という話をされていまたが、それ以上に本当にカイゼンが必要だと思って、ちょっとつらくても明るく楽しそうにカイゼンしていく人がいたからこそなんだろうな、と思いました。

今回僕は非公式に個人としてでお邪魔させていただきましたが、ヴァル研では会社単位などでも公式に職場見学を受け入れておられるそうです。

お招きいただいたぷぽさんも、 DMにて、

何かを変えたいと思ったとき、特に組織的な事の場合はひとりでやるのはやっぱり厳しくって、仲間を見つけた方がいいです。今はいなくても、仲間にしたい人、なってくれそうな人。

そういう人と会社見学に来ると、また違ったものが得られると思います。(ということもあり、昼間に会社単位で見学、現場の生の声を聞いてもらってます)
（原文ママ）

というふうにおっしゃっていたので、検討してみてはいかがでしょうか？ 実物見るとすごいと思います。

PR

ぷぽさんは僕がパーソナリティを務めているPodcastでもアジャイル関連の話をしていただいているので、よかったらそちらも聞いてみてください。

*1:cf. https://qiita.com/i35_267/items/1c2d75861b55c537f1e0

*2:バーンダウンチャートが物理になっているのはすごいなと思いました。

感想とメモ | WEBエンジニア勉強会 #5@ITプロパートナーズイベントスペース 20180202

勉強会 Redash

OSCAさんの主催されているWEBエンジニア勉強会#5に参加してLTもしてきました。 その反省と他の方の発表の感想を書きます。

web-engineer-meetup.connpass.com

OSCAさんは僕がパーソナリティをしているしがないラジオでもゲスト出演されています。勉強会を主催しようと思った経緯なども話されているので、興味があれば聞いてみてください。

また、会の様子はtogetterにまとまっています。

togetter.com

参加者の構成

ノージャンルということもあって、おなじみとなっている、会の参加者の構成の発表がありました。*1

経験年数

年数 人数
0~1年 12人
1~3年 13人
3~5年 7人
5~10年 12人
10年~ 9人

仕事の分野

分野 人数
サーバーサイド・プログラマー 27人
サーバサイド・アプリ基盤エンジニア 11人
フロントエンドエンジニア 15人
フロントエンドデザイナー 12人
WEBディレクター/プロジェクトマネージャ 6人
インフラ・ネットワークエンジニア 7人
スマートフォンアプリエンジニア 3人
その他 8人

経験年数については、10年以上の人はまとめられてしまっていますが、短い人から長い人まで同程度の分布なのかなと思います。
分野については、サーバーサイドが最も多いですが、その他はまばらにいらっしゃるようでした。ただ、WEBエンジニア勉強会と銘打っているのでスマートフォンアプリエンジニアは少なかったのだな、という印象でした。

自分の発表

Redashの導入とチームをまたいだ変化の話

speakerdeck.com

最近、会社にRedashというOSSのデータ可視化ツールを導入しそこで変わったこと、良かったことを話しました。 内容は資料のとおりなのですが、反省としては次のようなことが挙げられたかなと思っています。

  • 具体例を上げてもう少し詳しくRedashについて紹介すべきだった
  • （時間的に巻いていたとはいえ）かなり早口で喋ってしまった

社内のものだったので具定例を多く書けなかったということもあるのですが、イメージを持っていただくためにももう少し時間があれば環境を作って、例示できれば最高だったなと思いました。

他の方の発表

HTTPレイヤーで行うパフォーマンスチューニング(@engineer_osca)

speakerdeck.com

主催であるOSCAさんの発表です。
これまで通り初心者向けのテーマを選びながらも、実際に動くところまでをデモされているのが素晴らしいです。
年末年始に自分の趣味のプロダクトで試してみた、というエピソードも話されてましたが、サンドボックス的に触れる自分のプロダクトを持つのはすごく良いなと思いました。

とにかく分かりづらいTwelve-Factor Appの解説を試みる(@suke_masa)

www.slideshare.net

僕は知らなかったのですが、クラウドで動くアプリケーションが従うべき12個のベストプラクティスというのがTwelve-Factor Appらしいです。
こういう宣言とか定義みたいなものは、一読してパッと理解できるものというよりは例があったり実際に困ったりしたことがないとわからなかったりするな～という印象です。
発表で、「こういうときありますよね？」「こういうときどうですか？」などと問いかけをしてくれると理解が深まるな、と思いました。

なにか作ったらプレスリリースを出そう(@binbin4649)

www.slideshare.net

サービスのPRをするための戦略を話してくださいました。
あまり聞いたことがない話で興味深く聞けたのと、最後に「PRバズーカ」というサービスのPRをされていて進め方がうまいな〜と思ったりしました。

Amazon Rekognitionを用いてフォロワーの男女比を出す(@kzkohashi)

speakerdeck.com

顔認識のAPIを利用した事例の紹介でした。
SNSのフォロワーをアイコンの顔認識で分析するというのは事例としてかなり面白いなと思いました。
またそういう画像認識APIの各クラウドサービス間の比較を行った話や、意外と安く使えるといった話まで、知ってはいつつも触れていない僕にはすごく興味深い発表でした！

Dockerを利用したローカル環境から本番環境までの構築設計(@kkoudev)

www.slideshare.net

Dockerについて利点や、なぜこうしたほうが良いのか、というのを丁寧に解説してくださいました！
Twelve-Factor Appの話と合わせて聞くと「なるほど～」感が強かったです。

非機能要件を考えてみよう！(@iwanaga0918)

昨今のセキュリティの問題やosushiさんの話*2も例に、非機能要件について、定量的にちゃんと考えていますか、という問いかけの話でした。
発表者の方が、SIerということで、IPAの非機能要求グレードをチェックリストとしてやると良い、と言った話もされていました。
もちろんサービスごとにいろいろな側面がありそうですが、非機能要件がある程度定量的に指標化されてチェックリストになっているのは嬉しいんじゃないかなと思いました。

まとめ

WEBエンジニア勉強会は5回目ですが、僕は#1,2,3,5と参加していますが、大規模でなく2時間くらいの規模の勉強会で、テーマをあえて絞らず、幅広い分野の話が一気に聞ける勉強会はなかなかないので面白い試みだな、と思います。

主催者のOSCAさんが、いろんな人に発表されているので、暖かく迎えてくれている感もあって発表しやすい空気があったと思います。

コミュニティとしてもっと活発にしたい、という話もあったので、会のあとにその場でビアバッシュなどがあるともっと交流ができたりするのかなとも思ったりしました。

次回、4月初旬頃に1周年の会があるらしく、日程が合えば是非参加したいなと思いました。

*1:connpassのアンケート機能で調査されています。

*2:https://togetter.com/li/1195320

Eloquent ORMのChunkとCursorをメモリ使用量で比較した

前回書いた記事で、Eloquent ORMにおけるChunkとCursorメソッドの挙動について、発行されるSQL文の観点から調べました。

blog.zuckey17.org

そこで、まとめでも書きましたが、主にメモリ使用量を抑えるために使われるChunkとCursorのメソッドについて、実際にメモリ使用量を調べてみました。

メモリ使用量について、実際に計測してみようと思った

※ 僕自身、PHPのコードでメモリ使用量を意識したことはそこまでなく*1、どのように書けば特定の処理のメモリを調べることができるのか、というところから調べたのでその辺についても少し記載しています。

※ 本エントリで利用しているコードはすべて

github.com

にあります。

また、

  • PHP7.1
  • SQLite3

という環境で実行しています。

目次

PHPの最大メモリを変更する

100,000レコードものテーブルを全件取得しようとすると

PHP Fatal error:  Allowed memory size of 134217728 bytes exhausted (tried to allocate 4096 bytes)

と言って怒られてしまいました。 まず、手元のmacのPHPの設定を見にいきます。

$ php -i | grep php.ini
Configuration File (php.ini) Path => /usr/local/etc/php/7.1
Loaded Configuration File => /usr/local/etc/php/7.1/php.ini

$ cat /usr/local/etc/php/7.1/php.ini | grep memory_limit
memory_limit = 128M

ということで128Mということがわかりました。

常に変更するのは避けたいので、ファイルのはじめに

ini_set('memory_limit', '256M');

と変更を加えておきました。

データセットを用意

歩行者移動支援サービスに関するデータサイト

こちらを利用して、約100,000件のレコードを用意しました。

php-sandbox/migration.php at master · zuckeyM-17/php-sandbox · GitHub

メモリ使用量を測定するスクリプト

php-sandbox/check.php at master · zuckeyM-17/php-sandbox · GitHub

php-sandbox/check-memory-usage/src/scripts at master · zuckeyM-17/php-sandbox · GitHub

<?php

$capsule->getConnection()->enableQueryLog();

echo "CHECK MEMORY USAGE\n";
echo "==================\n";
$start = microtime(true);

// 処理

$time = microtime(true) - $start;
$memory = memory_get_peak_usage(true) / 1024 / 1024;
echo "\n==================\n";
printf("time: %f memory: %f MB" . "\n", $time, $memory);

$queryLog = $capsule->getConnection()->getQueryLog();
foreach ($queryLog as $i => $query) {
    echo 'Query' . ($i + 1) . ': ' . $query['query'] . PHP_EOL;
}

このようなスクリプトを書いて、処理にかかった時間、最大メモリ使用量、発行したクエリを出力しました。

結果

結果は以下のようになりました。

$ php check.php all
CHECK MEMORY USAGE
==================
縄文の宿まんてんル華耀亭や亭ザ・サンプラザート
==================
time: 1.418852 memory: 172.007812 MB
Query1: select * from "inns"
$ php check.php chunk10
CHECK MEMORY USAGE
==================
縄文の宿まんてんル華耀亭や亭ザ・サンプラザート
==================
time: 59.299147 memory: 10.000000 MB
Query1: select * from "inns" order by "inns"."id" asc limit 10 offset 0
Query2: select * from "inns" order by "inns"."id" asc limit 10 offset 10
...
Query9780: select * from "inns" order by "inns"."id" asc limit 10 offset 97790
Query9781: select * from "inns" order by "inns"."id" asc limit 10 offset 97800
$ php check.php chunk100
CHECK MEMORY USAGE
==================
縄文の宿まんてんル華耀亭や亭ザ・サンプラザート
==================
time: 9.412318 memory: 4.000000 MB
Query1: select * from "inns" order by "inns"."id" asc limit 100 offset 0
Query2: select * from "inns" order by "inns"."id" asc limit 100 offset 100
~~~~~
Query978: select * from "inns" order by "inns"."id" asc limit 100 offset 97700
Query979: select * from "inns" order by "inns"."id" asc limit 100 offset 97800
$ php check.php chunk1000
CHECK MEMORY USAGE
==================
縄文の宿まんてんル華耀亭や亭ザ・サンプラザート
==================
time: 1.720385 memory: 6.000000 MB
Query1: select * from "inns" order by "inns"."id" asc limit 1000 offset 0
Query2: select * from "inns" order by "inns"."id" asc limit 1000 offset 1000
~~~~
Query97: select * from "inns" order by "inns"."id" asc limit 1000 offset 96000
Query98: select * from "inns" order by "inns"."id" asc limit 1000 offset 97000
$ php check.php cursor
CHECK MEMORY USAGE
==================
縄文の宿まんてんル華耀亭や亭ザ・サンプラザート
==================
time: 1.620625 memory: 4.000000 MB
Query1: select * from "inns"
処理 経過時間(s) 最大メモリ使用量（MB） クエリ数
all 1.418852 172.007812 1
chunk、10件ごと 59.299147 10.000000 97790
chunk、100件ごと 9.412318 4.000000 979
chunk、1000件ごと 1.720385 6.000000 98
cursor 1.620625 6.000000 1

まとめ

前回のブログで、

1回のクエリでアクセスしている分cursorのほうが実行速度は速いものの、メモリの使用量を抑えるという意味では、あまりにも膨大な量のレコードを処理する場合にはcursorよりもchunkのほうが有用なのではないかと考えられると思います。

と書きました。 しかしながら、上記の表を見る限り、Chunk1000以上にするとCursorとでは速度、メモリ使用量でそれほどの違いがなかったという結果になりました。

また、実行速度はさておき、Chunk1000とCursorとでは、

  • 1回のループで作成するモデルインスタンスの数が違う
  • 1回のクエリで取得するレコードの数が違う

にも関わらず、メモリ使用量が同じ値になったのは疑問が残りました。 Cursorの仕組みについて、Eloquentの実装方法について調べて行く必要がありそうに感じました。

検証方法や考察について間違いなどがあればどんどん指摘して欲しいです！！ また、こういうこと検証、試したら面白い、調べて欲しいなどがあればTwitterやコメントなどで言っていただければ嬉しいです！！

*1:Circle CIでのテストがメモリのせいで失敗した時くらい

Eloquent ORMのChunkとCursorについて調べた

Eloquent PHP

前回書いた記事では、Eloquent ORMにおける参照系メソッドについて紹介しました。

blog.zuckey17.org

その中で、ChunkとCursorという項目について、

こちらについては、僕自信の理解が曖昧なため、もう少し調べる必要があると思います。 詳しく理解されている方がいらしたら、コメントで参考サイトなど教えていただきたいです。

と書いたところ

chunk, cursorは発行されるSQLを確認した方がいいと思います

というフィードバックをいただいたので、もう一度調べてみました。

※ 本エントリで利用しているコードはすべて

github.com

にあります。

目次

（もう一度）Chunk と Cursor

公式ドキュメント(和訳)によると以下のように書かれています。

ChunkとCursor

数1000行ものEloquentのレコードを処理する場合、chunkを利用します。chunkメソッドはEloquentのモデルを"塊"で取得し、それを引数として受け取ったクロージャに渡して処理をします。chunkメソッドを使うことによって、巨大なクエリ結果を扱うような処理において、メモリ使用量を防ぐことができます。 chunkメソッドの第1引数は取得する"塊"ごとのレコードの数です。第2引数として渡されるクロージャは、データベースから取得した塊ごとに呼ばれます。そのため、クロージャに"塊"を渡すたびに、毎度クエリが発行されます。

Cursorを使う

cursorメソッドはカーソルを利用して、ただ1回のクエリによってデータベースから取りだしたリストに対し1行ずつ処理を繰り返すことができます。大量のデータを処理する場合、cursorメソッドによってメモリ使用量をかなり削減することができます。

つまり、どちらのメソッドについても、大量のデータを取得する際にメモリ使用量を抑えるためのもののようです。

Eloquentで実際に発行されるSQL文を確認する

Eloquentではいくつか発行されるSQL文を調べる方法があります。

toSqlメソッド

最もシンプルな方法はtoSqlメソッドです。
getメソッドを呼ぶ代わりに、クエリビルダーのインスタンスに対してtoSqlメソッドを呼ぶことでSQL文を取得することができます。
例） php-sandbox/toSql.php at master · zuckeyM-17/php-sandbox · GitHub

<?php
$sql = Book::query()
    ->where('author', '=', '川原　礫')
    ->toSql();

echo 'Query: ' . $sql . PHP_EOL;

// Query: select * from "books" where "author" = ? and "books"."deleted_at" is null

結果から分かる通り、where句でauthorカラムが「川原　礫」さんで絞っていますが、出力されるSQL文の中では指定が?に変わっているのがわかると思います。 *1 これを回避できるのがもうひとつの方法です。

getQueryLogメソッド

もうひとつの方法は、getQueryLogメソッドです。1プロセスでこのメソッドが呼ばれるまでに実際に発行されたSQL文を出力することができます。
例）php-sandbox/getQueryLog.php at master · zuckeyM-17/php-sandbox · GitHub

<?php

$capsule->getConnection()->enableQueryLog();

$books = Book::query()
    ->where('author', '=', '川原　礫')
    ->get();

var_dump($capsule->getConnection()->getQueryLog());

/**
array(1) {
  [0]=>
  array(3) {
    ["query"]=>
    string(73) "select * from "books" where "author" = ? and "books"."deleted_at" is null"
    ["bindings"]=>
    array(1) {
      [0]=>
      string(12) "川原　礫"
    }
    ["time"]=>
    float(8.81)
  }
}
 */

getQueryLogメソッドは、事前にIlluminate\Database\Connectionクラスのインスタンスに対して、enableQueryLogメソッドを呼んでおく必要があります。
このIlluminate\Database\Connectionクラスは、Laravelフレームワーク内で利用している場合はDBファサード経由でアクセスができ、

DB::enableQueryLog()

と書くことができます。
本エントリではEloquentを単体で利用しているため、事前に用意したCapsuleインスタンスに対して、getConnectionメソッドを呼び、Illuminate\Database\Connectionインスタンスを取得しています。

※ またenableQueryLogをしてそのまま放置すると、そのプロセス中で呼ばれたクエリをすべて保持してしまうので、開発中無駄なSQL文の出力を避けるために、処理の最後にdisableQueryLogメソッドを呼ぶというように使うようです。

ChunkとCursorのSQLを比較する

Chunk

<?php
$capsule->getConnection()->enableQueryLog();

Book::chunk(2, function ($books) {
    foreach ($books as $book) {
        echo $book->name , "\n";
    }
});

$queryLog = $capsule->getConnection()->getQueryLog();

foreach ($queryLog as $i => $query) {
    echo 'Query' . ($i + 1) . ': ' . $query['query'] . PHP_EOL;
}

// Query1: select * from "books" where "books"."deleted_at" is null order by "books"."id" asc limit 2 offset 0
// Query2: select * from "books" where "books"."deleted_at" is null order by "books"."id" asc limit 2 offset 2
// Query3: select * from "books" where "books"."deleted_at" is null order by "books"."id" asc limit 2 offset 4

Cursor

<?php
$capsule->getConnection()->enableQueryLog();

foreach (Book::cursor() as $book) {
    echo $book->name , "\n";
}

$queryLog = $capsule->getConnection()->getQueryLog();

foreach ($queryLog as $i => $query) {
    echo 'Query' . ($i + 1) . ': ' . $query['query'] . PHP_EOL;
}

// Query1: select * from "books" where "books"."deleted_at" is null

ドキュメントの通り、chunkは第1引数に渡される数ごとにクエリを発行しており、cursorは1回のクエリ発行のみとなっているということがわかります。
また、chunkの場合は、クエリ発行を複数に分けるため、必ずORDER BY "PRIMARY_KEY" ASCを指定しています。

上記からわかることとしては、
1回のクエリでアクセスしている分cursorのほうが実行速度は速いものの、メモリの使用量を抑えるという意味では、あまりにも膨大な量のレコードを処理する場合にはcursorよりもchunkのほうが有用なのではないかと考えられると思います。

まとめ

  • Eloquentのchunkとcursorについてもう少し深く調べてみた
    • toSqlメソッドは知っていたが、getQueryLogメソッドによるSQL文の取得はより開発中に役立つと思った
    • ORMのSQL文生成の流れをもう少し深掘りしてみたくなった
    • メモリ使用量について、実際に計測してみようと思った*2

*1:Bookモデルはソフトデリートの設定をしているためdeleted_atカラムがnullのもののみを取り出すようなSQLとなっていることもわかります

*2:次回やります

Eloquent ORMについてなにも知らなかった（1） - 基本的な使い方編 -

Eloquent PHP

先週に書いた記事で、Eloquent ORM（以下Eloquent）をライブラリとして導入する方法を書きました。

blog.zuckey17.org

この記事の中ではじめ、次のようなコードを書いてbooksテーブルについてBookクラスを作り全件を取得して表示しました。

<?php
// ダメなコードです

class Book extends Model {
    protected $table = 'books';

    protected $fillable = [
        'id',
        'isbn',
        'name',
        'author',
        'created',
        'updated',
    ];
}

===

$books = Book::all()->toArray();
foreach($books as $book) {
    echo $book['name'];
}

このコードは動いてはいましたが、2点の指摘をいただきました。

  1. toArrayするのはやめましょう
  2. table、fillableフィールドの指定はいりません。

非常にはずかしいことに、普段Laravelを書いて、Eloquentを使っているというのに知らないことがありすぎたので、本エントリではこれらの指摘とその他に調べた基本的だと思われることをまとめておきます。

以下で記載しているコードの省略なしは、

php-sandbox/basic-eloquent-usage at master · zuckeyM-17/php-sandbox · GitHub

にありますので、確認に使ってみてください。

指摘について

1. toArrayするのはやめましょう

eloquentのcollectionを利用するように変更 · zuckeyM-17/php-sandbox@029ad50 · GitHub

全件取得 ->表示するのは、以下のようにして書けます。

<?php

$books = Book::all();
foreach($books as $book) {
    echo $book->name;
}

Eloquentは、all、getのメソッドを利用するとCollectionクラスという便利なリストのインスタンスを戻してくれます。
例のようにforeachで回すと、単一のModelが取得できますし、Modelであれば、->でフィールドにアクセスできます。
toArray()を使うとそれらの恩恵に預かることができないので、ORMを使う旨味が激減します。

また、取得には、他にfindやfirst、lastなどのメソッドがあります。
それぞれプライマリキーで検索やlimitを書けているのですが、これらは単一のModelを取得することに利用します。

※ findの引数が配列になっている場合は、Collectionが戻ります。

2. table、fillableフィールドの指定はいりません。

不要なfillableとtableの記述を削除 · zuckeyM-17/php-sandbox@1e42688 · GitHub

tableフィールド

EloquentはActiveRecordパターンの実装*1 なので、1つのModelインスタンスは1テーブルの1レコードと完全に一致します。
そのため、テーブルの名前が複数形のスネークケースという慣例に則っていれば、EloquentはbooksをBookモデルに紐付けるといったように、テーブルの指定を推測してくれます。

この他にも、connectionというフィールドも良く明示的に書いていましたが、DBが複数あるなどの特殊な場合を覗いてはDefaultの設定を見るため、指定する必要はありません。

fillableフィールド

fillableフィールドは悪意のあるユーザーがアプリが意図しない変更をDBに与えないように変更可能かどうかをカラム名のホワイトリストで縛るものです。

以下のようにfillableフィールドに指定した名前のカラムには、fill値を指定してレコードを作成することが可能です。
もし、指定されていたとしても、その値は無視されます。

<?php

class Book extends Model {
    protected $fillable = [
        'isbn',
        'name',
        'author',
    ];
}

===

$newBook = new Book();
$newBook->fill([
    'id' => 111, // 無視される
    'isbn' => '978-4-04-429201-0',
    'name' => '涼宮ハルヒの憂鬱',
    'author' => '谷川 流',
]);
$newBook->save();

同様の役割にguardedというフィールドが存在します。
こちらは、fillableとは逆でブラックリストです。変更されたくない値を明示的に指定することができます。

<?php

protected $guarded = [
    'created',  // createdをfillすることができない
];

その他の基本事項

ここから先は、指摘を受けてからその他に調べて、使ってはいたもののしっかりと理解していなかったり、知らなかったものなどについて紹介します。

ChunkとCursor

公式ドキュメントの以下の項目に記載のあったchunkメソッドとcursorメソッドですが、どちらも大量のデータを取得する際にメモリ使用量を抑える際に使うメソッドのようです。
https://laravel.com/docs/5.5/eloquent#chunking-results

ざっくりとした理解だと、

  • chunk => 複数回に分けてqueryを発行することにより、メモリ使用量を少なくする
  • cursor => カーソルによって1クエリで1行ずつデータを舐めることによりメモリ使用量を少なくする

こちらについては、僕自信の理解が曖昧なため、もう少し調べる必要があると思います。
詳しく理解されている方がいらしたら、コメントで参考サイトなど教えていただきたいです。

Chunk

<?php

Book::chunk(2, function ($books) { // 2冊ずつSQLを回す
    foreach ($books as $book) {
        echo $book->name , "\n";
    }
});

Cursor

<?php

foreach (Book::cursor() as $book) { // カーソルで1行ずつ処理をする
    echo $book->name , "\n";
}

上記どちらも、結果として全件の本のタイトルが表示されます。

Query Scope

クエリスコープはallやgetメソッドを発行する際に、結果を絞り込むのに便利な機能です。

Global Scope

Global Scopeはその定義をそれぞれのModelのbootメソッド内にてaddGlobalScopeにて宣言すれば、すべてのクエリにて絞込みが利用できます。

<?php

use Illuminate\Database\Eloquent\Scope;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Builder;

class BookScope implements Scope
{
    public function apply(Builder $builder, Model $model)
    {
        $builder->where('id', '>', 2);
    }
}

===

class Book extends Model {
    ~~~
    protected static function boot()
    {
        parent::boot();

        static::addGlobalScope(new BookScope);
    }
    ~~~
}

===
$books = Book::all(); // idが2より大きい`Book`のCollectionを取得

また、addGlobalScopeで設定していても、

<?php

$books = Book::withoutGlobalScope(BookScope::class)->get();

とすると、絞込みを回避することもできます。

Anonymous Global Scope

こちらは、Scopeクラスを作らなくても、以下のようにbootメソッド内で絞込み条件を付け足すこともできます。

<?php

class Book extends Model {
    ~~~
    protected static function boot()
    {
        parent::boot();

        static::addGlobalScope('id', function (Builder $builder) {
            $builder->where('id', '>', 2);
        });
    }
    ~~~
}

Local Scope

Local Scopeは各Modelに定義します。 scopeというプレフィックスをつけてpublicなメソッドとして宣言し、クエリを引数に取って、決まった絞込みを利用できます。

<?php

class Book extends Model {
    ~~~
    public function scopeRecent($query) // scopeはプレフィックス、recent()というメソッドがqueryBuilderで使えるようになる
    {
        return $query->where('id', '>', 3);
    }
    ~~~
}

===
$books = Book::recent()->get(); // idが3より大きい`Book`のCollectionを取得

Dynamic Scope

Dynamic ScopeについてもLocal Scope同様各Modelに定義します。 Local Scopeの定義に引数を増やして、絞り込む値を利用時に入れることができます。

まとめ

  • 前回のブログについて指摘していただいた実装を見直し、調査しました
    • ブログを書くことで改善できてよかったです！
  • その他にもEloquentの知らなかった基本的な機能がたくさんあったので、まとめて、自分で書いてみました
    • まだ基本の「き」なのでこれからも少しずつ調べていこうと思います

次回はCollectionの様々な使い方、Eventあたりをやりたいです。

*1:cf. エンタープライズアプリケーションアーキテクチャパターン

ピュアなPHPアプリケーションにLaravel標準ORMのEloquentを導入した

Eloquent PHP

本エントリでは、ピュアなPHPで書かれたWebアプリケーションにLaravel標準のORMであるEloquentを導入した際にやったことを簡単にまとめています。

実施した際はPHP5.6でしたが、学習のためも含めて本エントリ内のソースコードはPHP7.2で動作させています。
経緯でも書かせていただいていますが、データベースはSQLite3を使っていますが、macOSで動かす場合にはすでにインストールされていると思うのでsqlite3 -versionで確認してから動かしてみてください。

経緯

事前に、Eloquentを導入するに至った経緯を簡単に説明しておきたいと思います。

SQLite3をデータソースにしたレガシーなプロジェクト

あるプロジェクトが素のPHPで書かれています。すべてのAPIがその1つのモノリシックなPHPアプリケーションとなっています。
ここで問題となっているのが、データベースとしてSQLite3を利用していることでした。
SQLite3はデータベースをファイルとして扱うため、

  • ファイルI/Oが遅くなる
  • サーバの分散ができない

という問題を抱えています。
また、行ロックではなくテーブルロックであるため書き込みが多いようなアプリケーションには向かない、という問題もありました。
嬉しいことに、サービスの成長によってサーバをスケールアウトできるようにしてリソースに余裕がほしいという要望が出てくることになりました。

Laravelへの移行は一朝一夕ではできない

ほかのプロジェクトではLaravelを利用しており、データベースは一部SQLite3を引き継いでいるものの、多くはMySQL(AWS Aurora)です。
ただ、前述のアプリケーションの大きさゆえに、Laravel + MySQLへの移行はすぐには難しく、まずは、MySQLへの移行をする準備として、Laravel標準のORMであるEloquentを既存のコードに入れていくという運びとなりました。

クライアントごとにSQLite3のファイルが異なる

また、管理していたSQLite3のファイルは複数存在しました。
グローバルな情報を扱うアプリケーションに唯一のデータベースと、クライアントにつき幾つか存在するデータベースがあり、リクエストの方法によって、クライアントごとに書き込みや参照をするデータベースを変えるということをしていました。
今回は、こちらの話には触れず、Eloquentの導入部分のみを書きます。
こちらの話も今後別記事として書きたいと思います。

やったこと

あとは淡々とやっていったこと、その際に調べたことを書きます。

※ 簡単な例を用意しました。
https://github.com/zuckeyM-17/php-sandbox/tree/master/use-eloquent-at-pure-php-app

4ステップでできます。

  1. PHPのバージョン管理ツールであるcomposerをインストール
  2. illuminate/databaseというパッケージをインストール
  3. illuminate/databaseの設定
  4. 必要なEloquentモデルを作成

1. PHPのバージョン管理ツールであるcomposerをインストール

$ cd ./src
$ curl -sS https://getcomposer.org/installer | php

用意した例では、環境を汚さないようcomposer.pharというファイルをsrcディレクトリ直下にダウンロードするという方法を取っています。

2. illuminate/databaseというパッケージをインストール

$ ./composer.phar require illuminate/database

ステップ1で用意したcomposer.pharを利用して illuminate/databaseというパッケージをインストールします。
Larvelを構成するライブラリはすべてgithubのilluminateというところに所属します。
そこでdatabase部分を担当する、illuminate/databaseをインストールするわけです。

illuminate/databaseのREADME.mdの日本語訳が見当たらなかったので、和訳しました。

3. illuminate/databaseの設定

ほぼ、illuminate/databaseのREADMEを読めば簡単に作ることができます。
READMEではデータソースがMySQLだったため、例ではSQLiteで指定しました。
SQLiteで必要な項目は、ファイルへのパスのみなので簡単です。

<?php

use Illuminate\Database\Capsule\Manager as Capsule;

$capsule = new Capsule;

$capsule->addConnection([
    'driver'    => 'sqlite',
    'database'  => SRC_DIR . '/app.db',     // ここにSQLiteファイルへのパスを入れる
]);

$capsule->setAsGlobal();
$capsule->bootEloquent();

4. 必要なEloquentモデルを作成

illuminate\Database\Eloquent\Modelというクラスを継承したモデルクラスを作成します。
EloquentはActiveRecordの実装となっているため、Modelクラスはテーブルについて1つ作成し、Modelクラスに生えた便利なメソッドでテーブルにアクセスすることができます。
最低限な実装をすると以下のようになります。

<?php
require_once dirname(__FILE__).'/database.php';
use Illuminate\Database\Eloquent\Model;
class Book extends Model {}

これで、Bookモデルがアプリケーションで使えるようになりました。
以下ではBookの中身を取り出して表示しています。

<?php
define('SRC_DIR', dirname(__FILE__));

require_once(SRC_DIR . '/vendor/autoload.php');
require_once(SRC_DIR . '/database.php');
require_once(SRC_DIR. '/Book.php');

$books = Book::all();

foreach($books as $book) {
    echo $book->isbn, "\t" , $book->name, "\t", $book->author, "\t", $book->created, "\t", $book->updated, PHP_EOL;
}

まとめ

Eloquentをライブラリとして導入しました。
illuminate/databaseというパッケージを入れることで可能でした。
ただ、 illuminate/database単体では、マイグレーション周りをサポートしていないらしく、今回のユースケースでは既存のテーブルに対して行うということだったので、ただ純粋にEloquentをライブラリとして使うということを目的とすると、調査が甘かったようです。
EloquentのModelは便利なメソッドがたくさん生えているので、そちらについても今後紹介して行こうと思います。

また、illuminateなどOSSとしてのLaravelのプロジェクトについて少し知識がついたので、これからもう少しソースコードをしっかり追っていきたいなとも思いました。

間違っている部分、この施策についてのフィードバックなどありましたら、いただけると嬉しいです！