#CompositionAPI | Explore Tumblr posts and blogs

trial-and-spiral · 5 years ago

Text

ブログリニューアルは式年遷宮 - ブログをVuePressからGridsomeに変えました

VuePressも悪くはないものの、高速に表示できることは1つの価値であるので、Gatsbyインスパイアで高速化にも力を入れているGridsome移行しました。

今回移行するにあたって全面的にHTML,CSSも書きなおしたりもしました。それによって良い知見がありました。昔からブログを書いていて、もう何度目かわからないほどリニューアルをしてきています。その度に知見が増えるので、式年遷宮みたいだなぁと思った話です。

概要

VuePressからGridsomeにブログのフレームワークを変えました

その際にHTMLやCSSも含めてフルリニューアルしました

結果としてフロントエンド回りの知識がアップデートされました

式年遷宮is何？

神宮式年遷宮（じんぐうしきねんせんぐう）は、神宮（伊勢神宮）において行われる式年遷宮（定期的に行われる遷宮）のことである。原則として20年ごとに、内宮（皇大神宮）・外宮（豊受大神宮）の二つの正宮の正殿、14の別宮の全ての社殿を造り替えて神座を遷す。このとき、宝殿外幣殿、鳥居、御垣、御饌殿など計65棟の殿舎のほか、714種1576点の御装束神宝（装束や須賀利御太刀等の神宝）、宇治橋なども造り替えられる。

早い話、伊勢神宮では20年に一度建物を造り替えます。という話。実は建物が瑞々しく美しくなる、ということだけでなく、その裏では宮大工さん達の技術継承の場として一役かっているとか。

話を自分に戻すと、古くはiBlogの時代からブログテーマはいつも僕は自分で作ってきました。そしてブログシステムを変えたり、タイトルも変えたり、同時にテーマを作りかえるようなリニューアルを何度か行なってきました。その度にCSSを学んだり、HTMLを理解しなおしたり。エンジニアでなかったころから自分のフロントエンド知識のアップデートの場を担ってきました。

エンジニアになった今でもそれは例外ではなく、今回もまた色々と知見が増えたことを実感しました。リニューアルの度に学び直し、技術知識のアップデートが発生することがまるで式年遷宮みたいだなぁと思った次第です。

今回のリニューアルの動機

主な動機は表示までの（体感的な）高速化、サイドバーの拡張です。

以前までのVuePressとGridsomeの間に開発者体験には大きな差はありません。Vue.jsのシングルファイルコンポーネントを効果的に使うことで、非常にサイトは作りやすいです。

一方で、VuePressもまだ若いプロジェクトです。Gridsomeも同じくまだ若いプロジェクトではありますが、Gatsby.jsのノウハウを積極的に取り入れることで完成度はかなり高まってきています。そして一番の気掛かりは表示スピードです。VuePressの時にはページを表示し読めるようになるまでかなり時間がかかることがありました。高速化のノウハウとブログとしての運用面を考えるとGridsomeに軍配があがります。

また同時にもともとはシングルカラムビューを意識して作っていましたが、ブログの効果を正しく発揮するために回遊率を上げるためのサイドバーが必要だとも感じていました。

リニューアルでやったこと

Gridsomeにはスターターと呼ばれるテンプレートがありますが、使わずイチから作りました。これは意図しない不要な依存を避けるためです。また、スターターで開始するとスターターに持たされた機能の意図を読んだり、アップデート状況もチェックしていく必要があるためプレーンな状態で作ることを決めました。

移行前はVuePressなのでディレクトリ構成やデータの扱いさえ直せばそう多くない修正で移行できるだろうと考えました。しかし今回はHTML,CSS含めてイチから書きなおすことにしました。1つは前述のとおりサイドバーなど一部大きく変更する必要があったため、もう1つは以前書いたコードことを忘れていたので読んで理解し修正をするよりイチから書いたほうが結果的に楽と判断したためです。

そして、Gridsomeの特徴的な組み込み機能であるg-imageなどを積極的に活用しました。それとともに以前持っていた関連記事の表示やサイト内検索を自分で実装しなおしました。

今回のリニューアルでついた知見

HTMLのW3Cで策定されているセマンティックなHTMLを再確認

以前から意識していたのでそう大きく認識を改めることはなかったんですが、あらためて再確認の場となりました。意外にも本来の意図を意識したセマンティックなHTMLを書くことは蔑ろにされがちです。特にサーバーサイドエンジニアが片手間でフロントエンドまで見るときはその傾向は顕著になります。

また、HTMLのタグが持つ意味、正しい使いかたの定義は変わることもあります。これを含めて今回再考、再確認する良い場になりました。合言葉は「divタグはフォールバック」。

CSSの知識をアップデート

前回のリニューアルのタイミングより時が進んだことにより、CSS Grid Layoutが実用的なサポート範囲になったと判断して本格的に使ってみました。他にはposition: stickyも使ってみました。またファーストビューでいかに正確に読みやすいようレンダリングされるか苦心しました。およそ理解してると思っていたCSSもまだまだ学ぶべきがことがあって楽しかったです。 CSS自体の仕様は変わらずとも、ブラウザの対応状況に変化があるので時間経過だけでベストプラクティスは変わるのが興味深いですね。

VueのCompositionAPIの知見がついた

Vue.jsはv3へのバージョンアップを控えており、v3ではCompositionAPIという書き方に対応されます。今までの書き方も変わらず使えますがTypeScriptとの親和性も含め今後ゆるやかに移行していくと予想されます。v2の現在でもこのCompositionAPIを使う方法があり、今回せっかくの機会な触れてみました。

Gridsomeの場合はフレームワークの機能としてGraphQLのクエリ結果をコンポーネントのcomputedに格納する仕組みがあります。これがCompositionAPIとの親和性が低いため全体的、本格的なCompositionAPIメインで使うことは叶いませんでしたがキャッチアップする機会となりました。

Gridsomeの知見、GraphQLの知見がついた

Gridsomeは内部的にGraphQLを使ってページごとのデータを扱う仕組みです。そのため本格的とまでは行かずともGraphQLを触れていく必要があります。今までGraphQLに触れてこなかった僕には良い機会となりました。そしてGridsomeがどう上手くVue.jsとVue.jsのエコシステムを上手く使ってるかに触れることができました。

追加機能開発でいろいろ触れられた

今回、全文検索を実装するにあたって日本語形態素解析ライブラリのkuromoji.jsを使いました。形態素解析をやってみたのは初めてですが、いろんな応用が効く技術ですね。その他にも関連記事機能や、人気記事をどう実装するか考えたり��ることは尽きません。いろんな技術にまずは軽く触れる機会としてブログ開発は1つの良い土台になりえるのかもしれません。

逆に期待と違ったこと

作りなおしで思いのほか時間がかかりました。とはいえ修正よりも楽しくできたので心理的には良かったですが、ちょっと大変でした。

なかでも1つのボトルネックになったのはGraphQLの知識です。まったく触ってないところからのスタートだったので、約束事もわからずなにをどうして良いか掴むのに時間がかかりました。今はある程度わかりましたが、自分で機能を開発するにあたって単純にクエリを書く以外の知見も求められなかなか大変です。

そしてGridsomeにはプラグイン機能があります。公開する、しないはともかく追加機能はプラグイン形式にのっとって作るべきでしょう。が、残念ながらプラグインを使う情報に比べると、プラグインを開発する方法の情報が少なく、自作して開発する方法がよくわかりませんでした。なんとかすでにあるプラグインをいくつか読み解いてみるしか方法がなさそうです。

今回やれなかったこと、やらなかったこと

まず、人気記事一覧の実装はじめ、まだやりのこしている実現したい機能はいくつかあります。今後はゆるやかにそういうのをやっていきたいです。

あえてやらなかったことは、PWA対応でしょうか。プラグインを使えばすぐにできそうですが、個人のブログをPWAにしたところ嬉しい人なんて皆無だと思いあえてやりませんでした。今後も必要ないと思っています。

感想

とまあこんな感じで今回のリニューアルを通して数多くの知識の再確認とキャッチアップの機会を得ました。過去の自分からこれからの自分への知識の受けわたしというか。そしてやはり、手を動かしてナンボだな、ということも再認識しました。あまり個人開発と意識はしてなかったものの良い機会になりました。テーマのような見た目だけでなく機能も自分で開発していける楽しさは自分でブログシステムを扱う醍醐味ですね（逆を言えば必要な機能は自分でなんとかしなきゃいけないけど）。

そして成果物として出来上がった現在はチューニングも効を奏して、表示までの体感速度は爆上がりして満足の行くものになりました。VuePressに比べてGridsomeのドキュメントは必要十分と思えるほどしっかりと充実していますね。また、今後もしCMSや外部ソースとの連携が必要になる際も組み込みやすそうで良い感じです。

見ためはというと、正直大幅なレイアウト変更で以前より見にくくなったのかもしれない懸念はのこります。が、（今の）自分の好みにはなって嬉しい限りです。これからもブログは自分の趣味全開の自分の城的な場所としてやっていきます。

ブログをやるなら現状（VuePressより）Gridsomeという選択肢は間違ってなかったようです。

from Trial and Spiral https://blog.solunita.net/posts/renewal-blog-to-gridsome-from-vuepress/

0 notes