猫モフ Apps - 小説執筆アプリを創ろう - 01. 最初の一歩

猫モフ Apps は、猫をモフモフしながら思いついたアイデアを、バイブコーディングでゆるっと創っていく企画です。

前回で開発環境関連のインストールは終わっているものとして、今回は実際にアプリを作成していきます。

作成するものについて

作成するのは、このような小説執筆アプリ、novelaid-editorのクローンです。
制作の過程で各自の好みに合わせてカスタマイズしてください。

アプリとしては、次の２つを作成します。

  1. novelaid-editor-clone
    • Electron + TypeScript + React
    • 以下、Electron版
  2. novelaid-editor-next
    • Tauri + TypeScript + React + Rust
    • 以下、Tauri版
    • なお、このTauri版は、MORE以降の有料記事で作成

となります。

novelaid-editor-clone は、元の novelaid-editor を再現するもので、Electron で動くアプリなのは変わりません。
novelaid-editor-next は、折角なので Tauri で動くアプリにしてみようという試みです。
並行して進めれば実装としては元のアプリを含めて３つの実装があることになり、まあ、見比べれば違いが分かって面白いんじゃないかなと思います。　　

当初、初心者用としてElectron版の作成を行い、中級者向けとしてTauri版を位置づけて進めていたのですが、実行ファイルを作成するところまで進めた結果、現状、初心者用としてもTauri版が向いていそうな気がしています。
なので、同じようにElectron版とTauri版を作成して好みにあったほうを選ぶのがオススメです。

プログラム的な話でいうと、Electron版もTauri版も同じような構造になっており、内部的にはフロントエンドとバックエンドに分かれています。
Electron版ではその両方をTypeScript(Node.js)で記述します。 それに対して、Tauri版ではフロントエンドは同じくTypeScript(Node.js)ですが、バックエンドはRustで記述します。

異なるプログラミング言語を用いるため敷居が高いかと思ったのですが、実際のところ小説執筆アプリとしてテキスト編集ができる実行ファイルを作成するまでにRustを直接触る必要はありませんでした。 むしろ、Electron版の場合は以下で説明する最初のプロジェクト作成部分等がわかりづらくて初心者向きではないかもしれません。
まあ、折角作成したので、そのままElectron版も並行で進めてはいきます。

プロジェクトの作成

なお、以降のnovelaid-editor-clone、novelaid-editor-nextのアプリ名は適宜好みのものに読み替えて下さい。

Electronのサイトにチュートリアルもありますが、今回はElectron React Boilerplate を使って作成します。
素のElectronで作成しても良いのですが、流石に敷居が高いので、雛形となるリポジトリを使います。

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git novelaid-editor-clone

プロジェクトを作成したいフォルダーで、上記のコマンドを実行します。
Git Extensions を使う場合、マウスの右クリックメニューから「GitExt Clone…」を選びます。
履歴をすべてダウンロードのチェックを外せば、コマンドの--depth 1と同じ効果があります。

※※ 重要 ※※
なお、この時点ではこのプロジェクトは元となったelectron-react-boilerplateと紐づいているため、リモートリポジトリを切り離す必要があります。
フォルダー内に、.gitというフォルダーが作成されているはずですので、一旦、このフォルダーを削除してください。 これで、リポジトリ自体の管理がされていない状態となります。
次に左端のGit用のソース管理のボタンをおして、ソース管理パネルに切り替えて下さい。
ソース管理(Git)の初期化が行われていない扱いにもどっているので、リポジトリを初期化するのボタンを押して初期化して下さい。
すると、新しく.gitフォルダーが作成されてソースの履歴管理ができるようになります。

ここまでで、プロジェクト用のフォルダーが作成され、プロジェクトの雛形が用意されました。
次は実際にアプリを起動してみます。

アプリの起動

まずは、開発環境である Antigravity を起動し、作成したプロジェクト(フォルダー)を開きます。

ターミナルが表示されていない場合、メニューの「ターミナル」→「新しいターミナル」から表示してください。

npm install

ターミナルに上記コマンドを入力することで、依存ライブラリのダウンロードが始まります。 最初はそれなりに時間がかかりますので、猫をモフモフしながら待っていて下さい。 なお、このnpm installは、Electron版、Tauri版、両方で同じです。

npm start

ターミナルに上記コマンドを入力すると、ずらずらと何やら表示されて、アプリが起動します。

右半分は開発ツールが表示されている状態で、メニューのView -> Toggle Developer Toolsで消すことができます。

お疲れ様でした。これで、アプリの雛形が用意され、アプリを起動することができるようになりました。 後は好きにAIに指示を出して、アプリを作るだけですが、その前にもう一つだけやっておくことがあります。

左端のGit用のソース管理のボタンをおして、ソース管理パネルに切り替えて下さい。
Electron版は変更部分にpackage-lock.jsonが表示されている状態になっていると思います。
Tauri版はソース管理(Git)の初期化が行われていないので、リポジトリを初期化するのボタンを押して初期化して下さい。

次に、変更の横の+ボタンを押して、変更をステージングします。
入力欄に最初のコミット等と入力して、コミットボタンを押します。

これで、変更内容の保存が完了です。

次回は、実際にAIに指示を出して、アプリを作っていきます。

MORE

これ以降はTauri版、および、プログラマー寄りの補足的な内容となっています。

前提

Electron版の記事を読んだ上での比較および補足説明になります。 また、VSCode(Antigravity)等の使用方法はそれなりに分かっている読者を想定しています。
多分解説しないこと。

基本的に私(筆者)が知っているレベルのプログラミング関連の説明は書きません。
逆に、Node.js、TypeScript、React、Rust等のWEB関連技術等は私が分かっていない、また、バイブコーディングで適当に処理しているため、再確認のためにメモっていく予定です。

これらの技術的な内容については、作業を進める上で後日判明した内容等を随時、追加、修正を行う場合があります。

プロジェクトの作成(Tauri版)

Tauri版はサイトのチュートリアル通りのインストールでも問題ありません。

npm create tauri-app@latest

プロジェクトを作成したいフォルダーで、上記のコマンドを実行します。

✔ Project name · novelaid-editor-next
✔ Identifier · jp.restar.novelaid-editor-next
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

途中幾つか質問されますが、上記のように選択します。
プロジェクト名等は適宜好みのものに変えて下さい。

Electron版より圧倒的に簡単に始められると言えます。
これだけでも初心者にはElectron版よりTauri版の方が向いていそうな気がします。

ちなみに、Electron版で.gitフォルダーを削除しましたが、削除しない場合は履歴の関連付けがテンプレートのプロジェクトに関連づいたままとなり、後でえらい目にあいました。 具体的にはGitHubにアップロードしようとしても履歴が不完全なために拒否られます。
一応は普段使わないgitのコマンドをあれこれやって何とかはなるんですが、かなり嵌りそうなところです。

また、Electorn版はテンプレートを使用しているため、アプリ名とかを後であちこち書き直す必要があったりもします。

アプリの起動(Tauri版)

npm install
npm run tauri dev

ターミナルに上記コマンドを入力すると、Electron版同様、ずらずらと何やら表示されて、アプリが起動します。


Tauri版は、マウスの右クリックメニューから開発者ツールで調査するを選択すると、開発ツールが表示されます。
キーボードのショートカットとしては、Ctrl+Shift+Iが使えます。

リポジトリ

この連載で作成したアプリのリポジトリは以下の通りです。