ピクシブ百科事典をモダンにしよう - PIXIV SUMMER BOOT CAMP 2020

ピクシブ百科事典をモダンにしよう PIXIV SUMMER BOOT CAMP 2020「技術基盤コース」広島大学大学院 2020.09.18

2 • 所属 ◦ 広島大学大学院先進理工系科学研究科パターン認識 (栗田・宮尾)研究室ディープラーニングを用いた単眼動画像からの深度 (depth)予測 ▪ 応用:
一般的な単眼カメラで3Dモデル構築、ARのオクルージョン処理など • 趣味 ◦ 車輪の再開発 ▪ HTML再考、use-package再考、IME(ddskk)再考。。。 ◦ GitHubでのOSS公開、他プロジェクトへのコントリビューション ◦ GNU Emacsへのコントリビューション • PHPを本格的に触ったことない、HTML/CSSを触ったことがある、タスクランナー知識はgulpで止まっている。。。からインターン開始自己紹介 ※1 ※1: Zhengqi Li. et.al., Learning the Depths of Moving People by Watching Frozen People

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>sample page</title> <link
rel="stylesheet" href="sample1.css"/> </head> <body> <h1>sample</h1> <p> text sample </p> </body> </html> 11 (html ((lang . "en")) (head nil (meta ((charset . "utf-8"))) (title nil "sample page") (link ((rel . "stylesheet") (href . "sample1.css")))) (body nil (h1 nil "sample") (p nil "text sample"))) https://github.com/conao3/seml-mode.el

ピクシブ百科事典 4

やったこと 5 導入からへ移行

6 • これまで: bundlerからruby-sass、またはdockerからsasscによりsass->css変換 • これから: dart-sassをwebpackからキック、sass->css変換 • インパクト: ◦
docker, rubyの依存を削除できた ◦ webpackを導入できた ◦ ruby-sass, sasscからナウでヤングなdart-sassへ移行できた ◦ ruby-sass, sasscで使えないsass文法(modules)が使えるようになった • 大変だったこと: ◦ gulpの時代で私の知識は止まっていたので、 webpack導入難しい。。 ◦ 世の中の記事はsassをminifyして一枚のjsに埋め込むというフローで書かれていたが、私はsassを「それぞれ」、cssとして書き出したかったやったこと導入、からへ移行

ピクシブ百科事典の中身 7

8 • テストが書けない • 関数はスーパーグローバル変数 ($_SERVER) への参照、DBへのアクセスなどがあり出力が不定 • 関数内でechoにより出力しており、戻り値がvoid
• 各クラスが膨張しておりメンテナンス性が低い • コードの改善のために、まずオレオレフレームワークを理解する必要がある • クラスが直接PHPファイルをincludeしている場所があり、1回しか通らないという暗黙の条件が仮定されている ◦ dispatcherがこれだったので、ランタイムに1回のテストしかできない。。オレオレフレームワーク

9 null | ResponseInterface string url 生include commonHelper Router 302
redirect: http -> https en.dic -> en-dic Controller Dispatcher概要動的に文字列でクラス名を作り、 new Dispatcher 前処理コントローラ Nullチェックデータの場合, 生echo こまごまとした処理 - cssのパス - jsのパス - 言語設定 - テンプレート展開... commonHelperは複数回読むとエラーになる $_SERVER index.php

やったこと 10 ピクシブ百科事典のオレオレフレームワークからの脱却クラスをに準拠させる

11 • これまで: オレオレフレームワーク、責務の分割されていないなんでも Dispatcher ◦ $_SERVERへアクセスするグローバル依存の牧歌的な PHP ◦ テストのときは$_SERVERはセットされてないんだけど。。？
• これから: index.phpからPSR-7 (HTTP message interfaces) を渡し、そのオブジェクトから情報を得る • インパクト: ◦ $_SERVERへの依存を削除し、PSR-7オブジェクトを使用するようになった ◦ 適宜変更したPSR-7オブジェクトを渡し、様々な条件でテストできるように ◦ PSR-15 (HTTP Server Request Handlers) ベースのDispatcherへ移行できた • 大変だったこと: ◦ PSR-7...? PSR-15...? 指示の要件が全く理解できない ◦ $_SERVER便利すぎる。でも現代のPHPにするために甘えてはいけない。。やったことをに準拠させる

12 ResponseInterface ServerRequestInterface request 生include commonHelper Router 302 redirect: http
-> https en.dic -> en-dic Controller Dispatcher概要動的に文字列でクラス名を作り、 new Dispatcher 前処理コントローラ Nullチェックデータの場合, 生echo こまごまとした処理 - cssのパス - jsのパス - 言語設定 - テンプレート展開... index.php $_SERVER

事故 13

14 • $_SERVER['REQUEST_URI']と$request->getUri()->getPath()は等価ではなかった。 ◦ 後者はGETクエリが落ちていた ◦ 検索できない事故

15 • $_SERVER['REQUEST_URI']と$request->getUri()->getPath()は等価ではなかった。 ◦ 後者はGETクエリが落ちていた ◦ 検索できない ◦ 約10分で気付き、一つ前のデプロイに即リバート ◦
初デプロイでサービスを壊しました。。 • 教訓 ◦ デプロイ前及び実装中の手動テストは ja版/en版それぞれの記事閲覧のみで、記事検索はテストしていなかった。 ◦ デプロイ前のコードレビューは実装者の私、メンター、さらっとレビューしてもらったチームメンバー2人と、4人が関わっていたが防げなかった。。 ◦ 人間のレビューは必要。しかし機械によるテストも絶対に必要。事故

やったこと 16 ピクシブ百科事典のオレオレフレームワークからの脱却コントローラクラスをに準拠させる

17 • 文脈: DispatcherはPSR-15ベースになった。コントローラもPSR-15ベースへ • これまで: ControllerBaseというクラスを拡張したコントローラ Dispatcherはそのコントローラの内容を生echoにより出力 • これから:
- ControllerBaseクラスの依存を削除し、 PSR-15ベースのシングルアクションコントローラへ。 - Dispatcherは本来の責務であるコントローラの起動のみを担当し、生echoで出力しない。 - PHPUnitによるテストの追加 ! PSR-15ベースになったためテストが書けるようになった。 • 大変だったこと ◦ やはりPSR-7/PSR-15に慣れていなかった。。(インターン4日目) ◦ Interfaceと実際のオブジェクトとの関係の把握 ◦ {Stream, Response,,,}Factoryから{Stream, Response,,,}を作る概念が慣れなかったやったことコントローラクラスをに準拠させる

18 ResponseInterface 生include commonHelper Router 302 redirect: http -> https
en.dic -> en-dic RequestHandlerInterface \Dic\Ja\Http\Controller\Sitemap\IndexAction Dispatcher概要 Dispatcher 前処理データの場合, 生echo こまごまとした処理 - cssのパス - jsのパス - 言語設定 - テンプレート展開... コントローラ Nullチェック従来の Controller ServerRequestInterface request index.php RequestHandlerInterface の場合、早期リターン

やったこと 19 ピクシブ百科事典のオレオレフレームワークからの脱却の前処理をのミドルウェアとして実装

20 • 文脈: Dispatcher, コントローラはPSR-15ベースになった。ルーティング前処理 (特定の条件に対して404を返す) もPSR-15ベースへ • これまで:
ルーティングする前にDispatcherが条件チェック • これから: Dispatcherを呼ぶ前のPSR-15, Middlewareとして起動するように • 大変だったこと / 気付き: ◦ PSR-15 Middleware...? ◦ しかし、ここらへんで理解が進み、 PSRベースの抽象化による設計のクリーンさ、標準インターフェースをそれぞれのクラスが実装しているという安心感に気付く ◦ PHPStanによる静的解析が本来の力を出し始め、機械の助言を得ながら実装するという体験の良さを実感やったことの前処理をのミドルウェアとして実装

21 ResponseInterface Router 302 redirect: http -> https en.dic ->
en-dic RequestHandlerInterface \Dic\Ja\Http\Controller\Sitemap\IndexAction Dispatcher概要こまごまとした処理 - cssのパス - jsのパス - 言語設定 - テンプレート展開... コントローラ Nullチェック従来の Controller ServerRequestInterface request index.php Dispatcher 前処理 commonHelper RequestHandlerInterface の場合、早期リターンデータの場合, 生echo

まとめ 22

23 • ピクシブ百科事典を (ほんの一部のクラスだが) 現代のPHPに近づけることができた • これからの追加要件にも見通しやすく対応できるコードベースにできた • オレオレフレームワークから現代の PHPにするという、
技術的なやりがいのある、とても良いテーマを実践できた • index.phpとDispatcher.phpを変更したので、ピクシブ百科事典にアクセスすると必ず私のコードが動く... ! という達成感まとめ

24 • チームメンバーとの交流/雑談はとても刺激になりました。ありがとうございました ! • メンターのtadsanさんには「PHP...? 触ったことないです...」という私に現代のPHPの概念を分かりやすく解説して頂き、さらにペアプロにも長時間付き合って頂けました。
この8日間、充実したインターンにできたのは tadsanさんのおかげです。本当にありがとうございました ! さいごに

ピクシブ百科事典をモダンにしよう - PIXIV SUMMER BOOT CAMP 2020

ピクシブ百科事典をモダンにしよう - PIXIV SUMMER BOOT CAMP 2020

Naoya Yamashita

More Decks by Naoya Yamashita

Other Decks in Technology

Featured

Transcript