
# Oshaveryを支える技術
これは[共同開発鯖アドベントカレンダー 2021](https://qiita.com/advent-calendar/2021/growthers) 7日目の記事です.  

Web系だけでなくBotやTRPGの話などいろいろな記事が出ているこのアドベントカレンダーですが,  
今日は***Oshaveryを支える技術*** の話をしていきたいと思います.  

<details><summary>筆者の自己紹介とかです.(長いので折り畳み)</summary>
    <a href="https://twitter.com/laminne33">@laminne33569</a>です.<br>
    この1年間はほぼずっとTSを書いています.<br>
    共同開発鯖にOshaveryの開発を提案した元凶の元凶で,
    当初からバックエンドの開発を担当しています.
</details>

### Oshaveryとは？
共同開発鯖で今年(2021年)の5月ぐらい[^1]から開発しているチャットアプリです.  
共同開発鯖のメンバー合計7人で共同開発(デザイナー1人とロゴを書いた1人を合わせて9人です)されました.  
詳しくは一日目の記事をご覧ください.
![Oshaveryのスクリーンショット](https://github.com/Growthers/Oshavery-Server/raw/master/docs/oshavery-screenshot.png)
(技育展[^2]開催期間中に実際に稼働していた時のスクリーンショット)

もともとは筆者([@laminne](https://laminne33569.net))が2020年11月～2021年5月の間で設計していたもの[^3]で,  
その仕様の一部を~~そのまま流用~~もとにして`Oshavery`のAPIを設計したので,  
仕様策定の期間が短く済みました.
![当時のスクリーンショット](https://i.imgur.com/406cIfd.png)
(当時のUI設計段階のスクリーンショット)

### TypeScript
JavaScriptの上位互換となる言語です.

`Oshavery`("オシャベリー"と読みます)は(現在)バックエンド/フロントエンドともに100%TypeScriptで書かれています.  
開発初期はGolangで実装されていましたが,いろいろ[^4]あってTypeScriptを使うことになりました.  

(Goと比べて)速度があまり早くないといった問題はありますが,  
開発コスト的にはTypeScriptで実装して正解だったのではないかと今は思っています.

### Express
JS製のWebサーバーフレームワークで,Node.js界で一番名を知られたフレームワークじゃないのかと言えるほど使われています  
型定義がありTS側から使えないことは無いですがリクエストボディに型がつかないなどの不満点があり(一番は速度が遅いことですが)Fastifyに乗り換えました

### Fastify
JS製の超高速(ベンチマークではNodejs組み込みの実装より高速)なWebサーバーフレームワークです.  
比較的新しく(日本語の情報は少ないものの),TypeScriptに標準で対応しているので採用しています.  
(他の特徴としてJSON Schemaでバリデーションが書けるとかありますが今の所採用できてません)

### Vue.js
フロントエンドフレームワークの一つで,Star数的にはReactを超えるとかなんとかなやつです.  
最近(と入っても去年の暮れ)v3が出たばかりでライブラリがv3対応していなかったりTSとの相性が良くないなどの微妙なところが多かったためNext.jsに乗り換えました

### Next.js
Reactをベースにした新しいフロントエンドのフレームワークです.  
画像を最適化してくれたりルーティングをいい感じにしてくれたりする便利なもの...みたいです  
`Oshavery`は当初Vueを使おうとしていましたが,TypeScriptとの相性が微妙ということがわかりNext.jsに落ち着きました.  
(`Oshavery`の開発はバックエンドとフロントエンドで分かれていて,バックエンド側の開発者である筆者はこの辺りはあまり詳しくありません...申し訳ないです)

### Prisma
TypeScript製のORM[^5]で,独自のスキーマファイルを書くことでそれに対応するTypeScriptの型定義を自動生成してくれます.  
SQL文を書く必要がなくクライアントも自動生成されるので,メソッドチェーンでつなげるだけで必要なデータを取り出せる利点があります.  

### WebSocket
サーバーとクライアント間で相互,かつリアルタイムにデータをやり取りするプロトコルです.  
主にメッセージの投稿や更新を通知するのに使われています.  
(技育展の期間ではWebSocketの設定ミスでリロードしないとメッセージを更新できないという状態になっていましたが,実際はWebSocketを通してリアルタイムで更新されます.)  
Socket.ioというライブラリが非常に有名ですが,`Oshavery`ではwsというライブラリを使っています[^6].

## 最後に
`Oshavery`はまだまだ開発の途上にある非常に若いアプリケーションです.  
(執筆時点ではマージされていませんが,現在の最新バージョンはv0.1.4)  
なんとなくの仕様は決まっていても明文化されていなかったり不明な部分もまだたくさん残っていますし
,  
メンバーが動ける時間は限られているので完成はいつ頃になるかはわかりませんが,頑張って開発を進めていきますので<ruby>応援<rp>（</rp><rt>プルリク</rt><rp>）</rp></ruby>よろしくお願いします.  
(何が言いたいかというと,結局のところコードに対して貢献してほしいということです.PRお待ちしています.)

[^1]: 共同開発鯖で仕様などをまとめ始めたのはこのころです
[^2]: サポーターズさんが開催している学生によるアウトプットの展覧会みたいなものです.  
`Oshavery`はこのイベントに共同開発鯖名義で出品しました.
[^3]: (構想自体は4年ほど前からありましたが,)Node.jsを使ってモダンなアプリケーションを作って自分の技術力を向上させることが目的でした.  
実際に開発してみて(去年と比較して)技術力は向上したと思っています.
[^4]: (メンバーが多忙だったこともあり)開発がストップしてしまったため,無理を言って言語を変えた歴史があります
[^5]: Object Relational Mappingの略で,データベースの操作などをしてくれるライブラリのこと
[^6]: Socket.ioも内部ではWebSocketを利用していますが,分厚いライブラリでのちにBotなどからアクセスすることを考えるとできるだけ薄いライブラリを使う必要がありました.そのため,`Oshavery`ではSocket.ioを使っていません

