クイックスタート

nlr-skeleton テンプレートで最初のビジュアルノベルを作成し、ローカルで実行し、次に進む先を確認します

NarraLeaf-React は理解しやすく、使いやすいライブラリです。このガイドでは、NarraLeaf-React を使って最初のビジュアルノベルを作成する方法を説明します。

最初のビジュアルノベルを作成する

それでは、NarraLeaf-React で最初のビジュアルノベルを作成しましょう。

まず、Create React App を使って新しい React アプリを作成します。

アプリを作成したいディレクトリに移動し、次のコマンドを実行してください。

npx nlr-skeleton@latest my-project

これで、NarraLeaf-React テンプレートを使った新しい React アプリが作成されます。

アプリをプレビューするには、次のコマンドでアプリを実行します。

npm run dev

yarn dev

pnpm dev

http://localhost:3000 にアクセスすると、最初のビジュアルノベルを確認できます。

おめでとうございます。これで NarraLeaf-React による最初のビジュアルノベルが完成しました。

src/story.ts ファイルを編集して、自分のストーリーを作成できます。

これで NarraLeaf-React の基本的な考え方を学びました。

NarraLeaf-React の基本的な機能を学び始めることができます。

NarraLeaf-React の基礎について詳しく学びます。

よくある問題への対処法を探している場合は、ソリューションから学び始めることができます。

NarraLeaf-React のソリューションについて詳しく学びます。

上級開発者の方や API リファレンスを探している方は、抽象クラスを使ったストーリーの構築方法から学ぶとよいでしょう。

NarraLeaf-React のコアとなる概念について詳しく学びます。

または、プレイヤーコンポーネントを使ってストーリーを表示する方法から始めることもできます。

Player コンポーネントについて詳しく学びます。