司法試験短答式過去問演習サイトを作りましたで紹介した司法試験短答式過去問演習サイトの解説を作り始めました。
実質的な内容である法律面と、形式的な枠組みのコード面の両面において、試行錯誤を繰り返しながら悪戦苦闘しています。
一人で両方をやるとどうしても時間がかかりますが、連携に齟齬が生じるということはありませんし、作りたいものを作ることができます。
例えば、法律を学習する際には記憶への定着のしやすさから判例には事件名を必ずつけるようにしたいと思いました。一人二役ですから、コードを書くエンジニアとして「事件名が空白のこともありますか？」といった質問をせずにすみます。
１．解説の内容
最初は自分の言葉で解説を書こうとしましたが、あまりにも労力がかかりますし、その割には得るところが少ない（下手な解説よりも判例や条文をたくさん読みたい）ので、すぐにやめました。
次に、その問題を解くために必要な判例や条文をピンポイントで切り取って示そうと考えましたが、それも思ったより大変でしたし、その問題とは直接関係なくても判例や条文の周辺事項が知りたいこともあるので、単純に判例と条文をそのまま示そうと決めました。
基本的には判例と条文をそのまま示す、それができないときに限り自分の言葉で簡潔な説明をするという方針が定まりました。
２．解説の表示方法
解説をどのように表示するかも悩みました。
判例はPDFをそのまま見せ、条文はその法律の条文全体を見せる方向に決めたので、それなりに大きな表示領域が必要です。
そのような用途ならモーダルかなと思ってしばらく調べました。
VuetifyのDialogを試してみて、問題文と同時に解説の判例や条文を見たいからモーダルをドラッグできるようにしたくてvue-js-modalをインストールしようとしてバージョン不適合に遭遇し、もう一度VuetifyのDialogに戻ってドラッグできるように改造している人のコードを借用させてもらって（vue.js – how to make vuetify dialog draggable – Stack Overflow）思うように動かせるようになりました。しかし問題文が見づらくこれじゃないと感じたのでやり直しです。
私はPCで司法試験短答式過去問演習サイトを使いますから、右サイドバーに解説を表示すればよいと思い直しました。
PDFファイルの埋め込みにはvue-pdfを使ってもよかったのですが、特にこだわりはないのでobjectタグにしました。
３．解説で表示する判例と条文の取得
解説で表示する判例と条文の取得でもいろいろ悩みました。
（１）判例
判例は、APIが公開されているわけではなさそうだったので、自力でURLを解析して理解しました。
結果詳細ページは「https://www.courts.go.jp/app/hanrei_jp/detail2?id=判例ID」のようなURLで、全文PDFは「https://www.courts.go.jp/app/files/hanrei_jp/判例ID下３桁/判例IDゼロパディング６桁_hanrei.pdf」というURLです。判例IDさえわかれば両方のURLを構築できます。
ただ、その全文PDFをそのまま右サイドバーに埋め込むことはちょっと試してみた限りできなかったので、ダウンロードして自前で準備することにしました。著作権法１３条３号があるので著作権的にも問題ないはずですし、後々判例検索機能を作ったりするときにもそのほうが便利だろうと思いました。
（２）法律の条文
法律の条文については法令APIがあるのでこれを使うものだという思い込みがありました。
最初はその問題に関係する条文の部分だけをマウスカーソルを合わせたらツールチップとして表示するのがカッコいいのではないかと考えました。元データのcsvファイルでは「joubun ken 63」のような必要最低限の情報だけ盛り込み、そこから法令APIで必要な情報を取得するという方向です。
必要最低限の情報から表示用に変換するreplaceの関数内では非同期処理が使えなかったのであえて同期処理でAPIに問い合わせるなど、苦労しました。実際にツールチップとして表示してみると、それほどカッコよくもなく、前後の条文を読みたいこともよくあるので、シンプルに法律全体を表示する方向に舵を切りました。
法令APIでは法律全体を取得することもできます。ただ、XML形式での取得になります。そこで、XMLからHTMLに変換するにはどうしたらよいかをかなり調べました。Vue.js内で自分で一つずつ置換することやfast-xml-parserを使って解析することなども考えましたが、XSLTスタイルシートがXMLからHTMLに変換する専用のツールのようだとわかったので、これに取り組みました。
かなりの程度思い通りに変換することができたのですが、e-Gov法令検索で項が丸数字で表現されているのを再現するところで嫌になりました。
そこでふと、わざわざXMLからHTMLに変換しなくても、e-Gov法令検索からhtmlファイルを取得して保存してそれを読み込めばよいのではないかと思いつきました。著作権法１３条１号から著作権的に問題ないはずですし、毎回APIに問い合わせるよりも効率的です。司法試験の短答式試験で関係する法律は限られていますし、それほど改正もされないでしょうから、毎回APIに問い合わせる必要なんてないです。むしろ、法改正に敏感になって、差し替える際に改正点のチェックをするほうがよいとも言えます。
昔読んだ深沢千尋『すぐわかるPerl』の「美しいプログラミングの費用対効果」というコラムを思い出しました。
さて、費用対効果的に効率のいい解を出すのは、プログラミングの技術だけとは限りません。
一度、スケジュール管理ソフトで、春分秋分の日（天文学上の要請でその年その年で変わる）をカレンダーに入れる必要が生じました。総理府を出発点に電話で情報の検索を始め（当時はこんなにインターネットが一般的でなかった）結局とある有名な科学機関に到達しました。電話に出たほうは年配の天文学者らしかったですが、実に機嫌良く話してくれました。「地球だけが太陽の回りを回っているならよいが、実際には月と地球からなる系（けい）が回っており…」から始まる堂々たる講義で、ぼくは必死にメモを取りました。
電話を切ってからちょっとがんばってプログラミングしようとしましたが、１分ほどぼうっと考えて、急に思いついたことがあって、また同じ方に電話しました。「あのー、これから３０年間の春秋分の日、わかりますでしょうか」。幸いにもリストがあって、教えてもらうことができました。そのとき作業していたプログラムは、どんなプログラムもたいていそうですが、３０年も現役で動くとは思えません。そこで聞いた値を定数で埋め込みました。これで十分だったわけです。ぼくはあまりいいプログラマーではありませんが、このとき出した解はニートな解だったと思います。プログラミングにはパソコンだけでなく、電話も使えるという話です。深沢千尋『すぐわかるPerl』（技術評論社、１９９９）２２４ページ
この本が出版されてからもうすぐ３０年ですが、確かにこのPerlのスケジュール管理ソフトが現役で動いているという可能性は低そうです。仮に動いていたとしても、またこれから３０年分の春秋分の日を問い合わせて定数で埋め込めばよいだけですしね。
４．現在の完成形
このような感じです。
作りたいものが作れました。
ソースコードや動作するサイトはAsano-Naoki/shihoushikenからどうぞ。