ピクシブ百科事典を モダンにしよう 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

sample page

sample

text sample

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さんのおかげです。 本当にありがとうございました ! さいごに