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

ピクシブ百科事典をモダンにしよう - ピクシブ夏インターンシップ「PIXIV SUMMER BOOT CAMP 2020」

Transcript

1. ピクシブ百科事典を モダンにしよう PIXIV SUMMER BOOT CAMP 2020「技術基盤コース」 広島大学大学院 2020.09.18
2. 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
3. <!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. ピクシブ百科事典 4
5. やったこと 5 導入 から へ移行
6. 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. ピクシブ百科事典の中身 7
8. 8 • テストが書けない • 関数はスーパーグローバル変数 ($_SERVER) への参照、DBへのアクセスなどがあり 出力が不定 • 関数内でechoにより出力しており、戻り値がvoid • 各クラスが膨張しておりメンテナンス性が低い • コードの改善のために、まずオレオレフレームワークを理解する必要がある • クラスが直接PHPファイルをincludeしている場所があり、1回しか通らないという暗黙の条 件が仮定されている ◦ dispatcherがこれだったので、ランタイムに1回のテストしかできない。。 オレオレフレームワーク
9. 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. やったこと 10 ピクシブ百科事典のオレオレフレームワークからの脱却 クラスを に準拠させる
11. 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. 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. 事故 13
14. 14 • $_SERVER['REQUEST_URI']と$request->getUri()->getPath()は等価ではなかった。 ◦ 後者はGETクエリが落ちていた ◦ 検索できない 事故
15. 15 • $_SERVER['REQUEST_URI']と$request->getUri()->getPath()は等価ではなかった。 ◦ 後者はGETクエリが落ちていた ◦ 検索できない ◦ 約10分で気付き、一つ前のデプロイに即リバート ◦ 初デプロイでサービスを壊しました。。 • 教訓 ◦ デプロイ前及び実装中の手動テストは ja版/en版それぞれの記事閲覧のみで、記事 検索はテストしていなかった。 ◦ デプロイ前のコードレビューは実装者の私、メンター、さらっとレビューしてもらった チームメンバー2人と、4人が関わっていたが防げなかった。。 ◦ 人間のレビューは必要。しかし機械によるテストも絶対に必要。 事故
16. やったこと 16 ピクシブ百科事典のオレオレフレームワークからの脱却 コントローラクラスを に準拠させる
17. 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. 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. やったこと 19 ピクシブ百科事典のオレオレフレームワークからの脱却 の前処理を のミドルウェアとして実装
20. 20 • 文脈: Dispatcher, コントローラはPSR-15ベースになった。 ルーティング前処理 (特定の条件に対して404を返す) もPSR-15ベースへ • これまで: ルーティングする前にDispatcherが条件チェック • これから: Dispatcherを呼ぶ前のPSR-15, Middlewareとして起動するように • 大変だったこと / 気付き: ◦ PSR-15 Middleware...? ◦ しかし、ここらへんで理解が進み、 PSRベースの抽象化による設計のクリーンさ、標準イン ターフェースをそれぞれのクラスが実装しているという安心感に気付く ◦ PHPStanによる静的解析が本来の力を出し始め、機械の助言を得ながら実装する という体験の良さを実感 やったこと の前処理を のミドルウェアとして実装
21. 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. まとめ 22
23. 23 • ピクシブ百科事典を (ほんの一部のクラスだが) 現代のPHPに近づけることができた • これからの追加要件にも見通しやすく対応できるコードベースにできた • オレオレフレームワークから現代の PHPにするという、 技術的なやりがいのある、とても良いテーマを実践できた • index.phpとDispatcher.phpを変更したので、ピクシブ百科事典にアクセスすると 必ず私のコードが動く... ! という達成感 まとめ
24. 24 • チームメンバーとの交流/雑談はとても刺激になりました。 ありがとうございました ! • メンターのtadsanさんには「PHP...? 触ったことないです...」という私に 現代のPHPの概念を分かりやすく解説して頂き、さらにペアプロにも長時間付き合って頂けまし た。 この8日間、充実したインターンにできたのは tadsanさんのおかげです。 本当にありがとうございました ! さいごに