Quick Start

ビルド設定なしで、Next2Dアプリを作成する事ができます。

npx create-next2d-app app-name
cd app-name
npm start

ディレクトリ構成

project
├── src
│   ├── index.js
│   ├── App.js
│   ├── Packages.js // It will be generated automatically.
│   │
│   ├── component
│   │   └── default empty
│   │
│   ├── config
│   │   ├── config.json  // Configuration files for each environment.
│   │   ├── routing.json // Request settings before loading the view.
│   │   ├── stage.json   // Display(Stage) area setting. 
│   │   └── Config.js    // It will be generated automatically.
│   │
│   ├── content // Symbolic access to JSON created with NoCode Tool
│   │   ├── TopContent.js
│   │   └── HomeContent.js
│   │
│   ├── image
│   │   └── default empty
│   │
│   ├── model // business logic
│   │   ├── api
│   │   │   └── HomeText.js
│   │   └── callback
│   │       └── Background.js
│   │
│   └── view // Per-page View, ViewModel files.
│       ├── top
│       │   ├── TopView.js
│       │   └── TopViewModel.js
│       └── home
│           ├── HomeView.js
│           └── HomeViewModel.js
│
└── __tests__ // Unit Test directory
    └── model
        └── default empty

フローチャート

コマンド

• 開発サーバーを起動します。

npm start

• ルーティングJSONファイルから必要なViewクラスとViewModelクラスを生成します。

npm run generate

• 指定した環境変数の本番アプリを書き出します。

npm run build -- --env="prd"

• テストランナーを起動します。

npm test

JSON設定

stage.json

Option settings

config.json

| 環境毎に異なった変数値を設定できます。`all`で設定した値はすべての環境で利用可能です。

routing.json

ルーティングに設定できるプロパティの上位は、英数字、スラッシュ、ハイフン、アンダースコアです。スラッシュ、ハイフン、アンダースコアをキーとして、CamelCaseでViewクラスにアクセスします。

Example

以下のサンプルの場合、`https://example.com/quest/list`でアクセスを有効にし、`QuestListView.js`をコンテキストに設定します。

{
  "quest/list": {
    "requests": []
  }
}

第2階層のプロパティ設定

`requests`プロパティで設定可能なプロパティ。