LoginSignup
3

Svelte Kit で ChatGPT API 使用したチャットサービス作った。マークダウンのコピペとかできる。おそらく ChatGPT PLUS より安く使える。

Last updated at Posted at 2023-03-08

↑ ChatGPT API (OpenAI API) でチャットサービスを開発しました。マークダウンのコピペをしやすいように実装しています。まだ自分自身 OpenAI API を使用して日が浅いため ChatGPT PLUS より安いとは断言できませんが、おそらく安く済みます。機能などの紹介は note でしているため Qiita では技術的なお話をメインでします。

ソースコードはこちらです。

スクリーンショット

スクリーンショット 2023-03-08 18.11.12.png
ChatGPT Clone ですね。チャットシステムとか開発したことなかったので、勉強がてら Svelte Kit を使用して開発しました。
ChatGPT との違いは「マークダウン有効無効ボタン」、「コードのテーマ変更」、「使用料金の表示」ですね。

技術スタック

大まかに以下を使用しています。

  • Svelte Kit
  • XState
  • Vite
  • Ionicframework
  • Capacitor.js

Svelte Kit と Ionicframework

デザインは Ionicframework に全任せしています。以前、 Tailwindcss などを使用していましたが、個人開発においては Ionicframework に軍配が上がりますね。 Ionicframework は本当に使いやすく、まさに Web Component の王様ですね。ただし、 Svelte で Ionicframework を使用するときにやや使いづらい点があります。それは slot 被りです。

Slot 問題

Svelte での slot は、コンポーネントの slot tag の name として使用されます。

<slot name="header" />
// ↑ これにコンポーネントを挿入したい時は以下のように書く
<span slot="header" />

この slot が Ionicframework とコンフリクトしています。 Ionicframework での slot は、コンポーネントの位置を指定するために使用します。

<ion-item>
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Default Item Lines</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

そのため Svelte を使用しているときは、 ルートで slot を書くことができません。以下のような分離されたコンポーネントは作成できません。

  <ion-icon name="star" slot="start"></ion-icon>

Element with a slot='...' attribute must be a child of a component or a descendant of a custom elementsvelte(invalid-slotted-content)

残念ですが、この場合は、 onMount などを使用し、 setAttribute で slot を更新するなどの方法が必要です。

on:click などのイベント問題

svelte でのイベントは on:click などで実行します。

<span on:click={() => console.log("click")} />

しかし、Ionicframework でのイベントは onIonClick という名前になっており、 on:IonClick ではトリガーを発生させることができませんでした。onIonClick としても発火しません。 on の次の名前は小文字ではないと発火しないのかもしれません。対策として、on:ionClick となるような形定義を作ります。以下のように書きます。

すると、

<ion-button on:ionClick={(e) => console.log(e.detail.value)} />

で無事に発火できるようになります。

XState

これはチャットする箇所のロジックを全てステートマシンとして実装しています。チャットのような、ロード、待機、などのステータスが時間で変化するときに最適です。

Capacitor.js

これは Web アプリをネイティブアプリに変換してくれるツールです。今回は、データ保存用として使用しています。今のところネイティブアプリにする予定はないですが、使用していることですぐにネイティブアプリ化できます。素晴らしい。

あとがき

自分自身が、 ChatGPT PLUS を辞めて、使用するツールとして開発しました。安く済むといいなぁ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3