<p data-line="0" class="code-line"><a href="https://github.com/crowi/crowi" target="_blank" rel="nofollow noopener noreferrer">Crowi</a> の 2.0 を開発していこうと思います。</p>
<p data-line="2" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/314d5525e7ad-20250310.png" loading="lazy" class="md-img"></p>
<h2 id="%E8%83%8C%E6%99%AF" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h2>
<p data-line="6" class="code-line">Crowi は株式会社クロコス (Crocos) の社内Wikiとして2012年から開発していて、その後2014年にオープンソースとして公開しました。</p>
<p data-line="8" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d9df60e39810f" src="https://embed.zenn.studio/card#zenn-embedded__d9df60e39810f" data-content="https%3A%2F%2Fgithub.com%2Fcrowi%2Fcrowi" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/crowi/crowi" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/crowi/crowi</a></p>
<p data-line="10" class="code-line">で、その後メルカリ社内でも使ったりして(先日全サーバー停止したらしいです、お疲れ様でした)、ちまちま開発を続けてきたのですが、2019年に出した v1.7.9 を最後にアップデートが止まったままになっていました。</p>
<p data-line="12" class="code-line">それから、何度か React や node のアップデートに追従したり機能追加しようと思ったりしてちょこちょこいじったりしたこともあったのですが、すぐに忙しくなったりしてしばらく触らないうちに、また周辺ライブラリのバージョンや戦力図が変わったりしてやり直しになったりするのを繰り返し笑、2025年になってしまいました。</p>
<p data-line="14" class="code-line">今更、Wikiシステムの開発してもねえ、と思うかもしれませんが、まあこれは趣味と愛の話なのでヨシとしてください。</p>
<p data-line="16" class="code-line">で、ずっと開発をやり直したい気持ちはあったんですが、まあ他にもっと開発しないといけないものがあり開発の時間を割くならばそっちにフルベットしないとと思っていたのですが(そりゃまあ自分のプロダクトを作っているので)、とにかく生成AIの登場で自分の単位時間あたりにかけるコードの量が爆発的に増加したので、やる気が湧いてきて、思い切って再開することにしたのでした。</p>
<p data-line="18" class="code-line">それから、生成AI系のAPIとつなぎこむことで、ドキュメントサービスはもっと面白くできるな、と思っているので、そのあたりまでもっていけるといいなぁ〜〜と、結構モチベーションがあがっているというのもあります。作りたいんだ！</p>
<p data-line="20" class="code-line">というわけで「すぐに忙しくなったりしてしばらく触らないうちに」を繰り返さないためにw、そして忘れないために記録を残していくことにします。</p>
<h2 id="%E7%8F%BE%E7%8A%B6%E8%AA%BF%E6%9F%BB" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E7%8F%BE%E7%8A%B6%E8%AA%BF%E6%9F%BB" aria-hidden="true"></a> 現状調査</h2>
<p data-line="24" class="code-line">作業途中のブランチとかはもう何もかも覚えていないので、一旦なかったことにして、mainブランチからみていきます。</p>
<ul data-line="26" class="code-line">
<li data-line="26" class="code-line">Node.js v12</li>
<li data-line="27" class="code-line">React v16</li>
<li data-line="28" class="code-line">TypeScript v4.0.8</li>
<li data-line="29" class="code-line">MongoDB v3.6</li>
</ul>
<p data-line="31" class="code-line">その他細かいものも大量に色々あるんですが、まあ、一旦見なかったことにします。</p>
<p data-line="33" class="code-line">あとなんか全体的なことを結構忘れているのでまあ書き出していこうと思います。</p>
<ul data-line="35" class="code-line">
<li data-line="35" class="code-line">そもそも最初のアーキテクチャはSSR (というかいわゆるExpressでのサーバーアプリケーション)
<ul data-line="36" class="code-line">
<li data-line="36" class="code-line">Routingは完全にExpressでしている</li>
<li data-line="37" class="code-line">view!! Swig でレンダリングしている</li>
</ul>
</li>
<li data-line="38" class="code-line">一部フロントエンドのコンポネントをReactに移行していた
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">2012年の開発当初は、基本実装が Swig の HTML + JQuery (!) で Web 画面を作っていた</li>
<li data-line="40" class="code-line">途中から React の登場でクライアントサイドの動的な挙動はそちらに移行しはじめていた</li>
<li data-line="41" class="code-line">基本的には、サーバー側から Hydration 用のデータを渡したものを元に、React componentを初期化してDOMにマウントするという割とプリミティブな方法で</li>
</ul>
</li>
<li data-line="42" class="code-line">TypeScript 移行
<ul data-line="43" class="code-line">
<li data-line="43" class="code-line">こちらも一部は移行しつつサーバーサイドはほとんどJSのまま動作している状態</li>
</ul>
</li>
</ul>
<p data-line="45" class="code-line">まあ2019年ならこれでよかったよねーという感じなんですが、さすがに2025年はこれではいけないと思うのでなのとかしていきましょう</p>
<h2 id="%E6%96%B9%E9%87%9D" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E6%96%B9%E9%87%9D" aria-hidden="true"></a> 方針</h2>
<h3 id="%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC" data-line="49" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC" aria-hidden="true"></a> サーバー</h3>
<p data-line="51" class="code-line">まず、サーバーに関しては、基本、過去のデータを持つ Crowi サーバーと互換性のある状態にしたいと思っています。</p>
<p data-line="53" class="code-line">要件としては、</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">Node.js v20 で動作するようにする</li>
<li data-line="56" class="code-line">既存のデータを読み込むことができる
<ul data-line="57" class="code-line">
<li data-line="57" class="code-line">ただし MongoDB のバージョンが最新になることにより過去データが読めなくなる可能性もあるので、その場合 migration を考える (まだ調査してない)</li>
</ul>
</li>
<li data-line="58" class="code-line">その他の依存パッケージは最新のバージョンに合わせる(可能な限り)</li>
</ul>
<p data-line="60" class="code-line">まずは、ハードルを上げすぎないように、このあたりを目標にします。</p>
<p data-line="62" class="code-line">ここまで済んだら、次の段階として、</p>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">Express からの移行 (なにに、は決まっていないが Hono とかがいいなぁ)</li>
<li data-line="65" class="code-line">MongoDB どうするか
<ul data-line="66" class="code-line">
<li data-line="66" class="code-line">まあ別に MongoDB 好きだけど</li>
<li data-line="67" class="code-line">PostgreSQL とかに移行したい気持ちはあります</li>
</ul>
</li>
</ul>
<p data-line="69" class="code-line">というところですがこのへんはまだ何も決めてません！まずはフロントエンドからかなぁ。</p>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-line="71" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> フロントエンド</h3>
<p data-line="73" class="code-line">フロントエンドが問題で、前述の通りサーバーサイドでのレンダリング、React との自作Hydrationが入り交じる状況になっていて、これは結構移行が難しいと判断しました。</p>
<p data-line="75" class="code-line">したがって、フロントエンドは作り直します。今までのフロントエンドはさようならします。</p>
<p data-line="77" class="code-line">なので、そのための要件として、</p>
<ul data-line="79" class="code-line">
<li data-line="79" class="code-line">まず、サーバーとの切り離しを行う
<ul data-line="80" class="code-line">
<li data-line="80" class="code-line">viewとしてHTMLを返さずサーバーサイドは API を返すだけに変更していく</li>
</ul>
</li>
<li data-line="81" class="code-line">一部ReactのSSRを行っていた部分を引き剥がし、フロントエンドコンポネントをすべて削除</li>
<li data-line="82" class="code-line">その後、フロントエンドのみのSPAアプリケーションとして作り直す
<ul data-line="83" class="code-line">
<li data-line="83" class="code-line">とはいえ、このあたりはNext.jsなどを使うかもしれず、その場合結局SSRになったりするかもしれない</li>
<li data-line="84" class="code-line">いずれにせよ、Expressでのviewからの引き剥がしを行い、既存のフロントエンドは除去、新しいフロントエンドアプリケーションとして作成する</li>
</ul>
</li>
</ul>
<p data-line="86" class="code-line">正直、手が慣れているという点ではNext.jsなんですが、ここ最近のApp Routerの黒魔術感があまり好きではないので、せっかくの趣味アプリならもう少しライトウェイトなフレームワークを使っても良いかなぁ、と思いつつまだ悩んではいます。あ、Reactは使います。</p>
<h3 id="%E3%81%9D%E3%81%AE%E4%BB%96%E6%A7%8B%E6%88%90" data-line="88" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E6%A7%8B%E6%88%90" aria-hidden="true"></a> その他構成</h3>
<p data-line="90" class="code-line">パッケージが古くなりすぎている、あるいはフロントエンド関連で React 前提とするなら何か他の選択肢がある、というものは対応そのものをザクザク切っていきたいと思います。<br>
例えばスライドショーモードでつかっているRevealなど。</p>
<p data-line="93" class="code-line">あとはフロントエンドのアプリケーションの切り分けを行ったうえで、monorepoにしたかったんですが、普通にturborepoもNode.js v18以降しか使えなかったのでw、一旦サーバー側のバージョンアップが終わったら考えます。<br>
バージョンが古いとあらゆる連鎖でこういう事が起こるんだよな(ため息</p>
<h2 id="%E3%81%A8%E3%81%84%E3%81%86%E3%82%8F%E3%81%91%E3%81%A7" data-line="96" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A8%E3%81%84%E3%81%86%E3%82%8F%E3%81%91%E3%81%A7" aria-hidden="true"></a> というわけで</h2>
<p data-line="98" class="code-line">一旦方針だけ書いて、ここまで。<br>
次回からは進捗をなにか書いていけるといいかもしれません。</p>
<p data-line="101" class="code-line">Discordでワイワイしていきたいと思っているので(以前コミッターミーティングに使っていましたが)、興味本位でも、冷やかしでも、アドバイスでも、お手伝いでも大歓迎ですので、ぜひ遊びに来てください。</p>
<p data-line="104" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4af8a4a220e51" src="https://embed.zenn.studio/card#zenn-embedded__4af8a4a220e51" data-content="https%3A%2F%2Fdiscord.gg%2FjnWzJeu" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://discord.gg/jnWzJeu" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://discord.gg/jnWzJeu</a></p>


Crowi 2.0 開発日記 #0

Discussion