初心者やReact使いにも使ってほしい、フルスタックWEBアプリ半自動生成ツール「N-Dev」の概要と使い方
「N-Dev」とは
WEBアプリケーション開発の様々な工程をサポートするWEBアプリケーションで、
特にNuxt3 × MySQLのフルスタックアプリの開発を強力にサポートします。
最も重要な機能はDB設計のサポートで、そのDB設計の情報をもとに、設計者の意図を組んだDB構築、マイグレーション、コード・APIの自動生成を行います。
まずは15分（環境構築除く）でフルスタックアプリのデプロイまでを体験しましょう！
機能
- ページ設計（簡易）
- DB設計（、DB設計サポート）
- SQL（dump）ファイルインポート
- ホストDB接続インポート
- SQLファイルエクスポート
- マイグレーション（簡易）
- プロジェクト自動生成（API・Composable・クラス・UI 含む）
追加が予定されている機能
- 時間計測機能付きToDo
- マイグレーション機能強化
- バージョン管理機能
- コメントページ作成機能
- 関連リンク集共有機能
- チャット機能
- PostgreSQL対応
- 同時操作、リアルタイム編集機能
- 法人機能
メリット
まずは「N-Dev」のメリットを見ていきます。
● 高速、軽量
全体を通して、特別に指示しない限り実際のDBと通信を行いません。
これにより、一般的なDBクライアントツールよりも高速で軽量です。
● 自動化
コード生成のかなりの部分を自動化できます。
大きなシステムでも、3割程度は自動化できる可能性があり、また、自動化によってバグや表記ゆれ、実装の個人差を抑えることができます。
● 記録
各操作はログが記録され、誰がいつどのような操作を行ったかを確認できます。
● フルスタック
近年流行りのローコード、ノーコードツールとは異なり、あくまでフルスタックWEBアプリの開発やその導入を自動化、サポートするツールの為、ローコード、ノーコードツールの不便さ、複雑な動作は実装できない、というデメリットがありません。
● 無料
少なくとも現在無料で利用できます。
● クラウド
WEBアプリケーションであるため、場所や環境を選ばずにアクセスできます。
（ただし大画面でないと厳しい）
デメリット
デメリットも把握しなければなりません。
● 独自実装（REST APIでないなど）
各所が独自実装になっており、例えばAPIも本質的には差は無いものの、全てPOSTを使用した実装になっています（変更は容易です）。
● ホスト（DB）の実態は不明
「N-Dev」上で操作するのはあくまでもDB設計データであり、実際に構築されたDBの状態を確認する機能はありません。DBクライアントツールと合わせて用いる前提です。
● フレームワーク・環境が固定される
現在対応しているのが「Nuxt3 × MySQL」のみであり、選べる環境が非常に限定的です。
ReactやPostgreSQLで活用することは少し難しいかもしれません。
● 厳密性のない実装
あくまでも操作者の感覚によった実装であり、MySQLの仕様に完全に準拠した作りにはなっておりません。その為、操作者には最低限の知識が必要になります。
● カスタマイズ性が低い
独自実装とも関係しますが、コードについて、カスタマイズできる機能に乏しく、各々の開発スタイルに合ったコードが生成されるわけではありません。
● 費用
今後有料になる可能性があります。
初心者にお勧めしたい理由
個人的に、初学者に体験してほしいのは、フルスタックの全体像をつかむこと、DBの設計、それと実際にアプリを完成させることです。
WEB開発者を目指す時、どうしても最初にやってしまうのが、机上の勉強か、フロントエンドに限ったプログラミングです。
勿論それらも重要なことではありますが、私が一番重要だと感じているのは、DBの設計、データの取り扱いについて感覚をつかむことで、また、そのモチベーションを保つのは、実際にアプリを作成してデプロイ、つまり公開までやってみることだと思います。
その意味で、高度（に発展させられる構造）でありながら、DB設計からデプロイまでが非常に簡単に経験できる「N-Dev」はおすすめです。
React使いにお勧めしたい理由
単純に、一度Nuxt3に触れてみるべきだと思います。Reactより優れた個所も多々あります。
ありますが、どうしてもNuxtならではの機能、実装が存在し、戸惑う部分もあります。
そういった煩わしい部分は本ツールに任せつつ、また、本ツールをテンプレート、一つの見本として、Nuxt3に触れてみて頂きたいと思ってます。
ま、本ツールが見せるNuxt3は一端も一端ですが。
実施に使ってみる
ここからは実際に使い方について説明してみようと思います。
説明はWindows基準で、初学者でもわかるようにそこそこ丁寧に書いていくつもりです。
十分に知識・経験のある方は最後のほんの少しだけ読んでみてください。
難しいことはありません。
環境定義
今回は、Windows11 を対象にして説明します。
使用するブラウザは、Google Chromeの最新版です。
また、使用するツール等は次の通りとします。
● 開発環境
DB：MySQL 8系
DBクライアントツール：phpMyAdmin（XAMPP）
IDE：WebStorm（Php Storm）
JSランタイム：Bun（Node でも可）
パッケージ管理：Bun（Npm 等でも可）
● デプロイ（公開）環境
サーバ：Vercel
DB：MySQL 8系（GCP）
環境構築・インストール
MySQLインストール
以下のXAMPPと同時にインストール可能な「MariaDB」でも大丈夫です。
私はMySQLの方が安定していると感じているのでMySQLを使用しています。
MariaDBを使用する場合は飛ばしてください。そのままMariaDBを使用するほうが、作業としては簡単になります。
以下のページからインストーラーをダウンロードしてインストールしてください。
詳細は以下のページ等を参考にしてください。
XAMPPインストール
以下のページからダウンロードしてインストールします。
詳細は以下のページ等を参考にしてください。
ただし、そのまま使用すると管理者権限が無い等の理由でうまく動作しない為、以下のサイト等を参考に設定を行ってください。
phpMyAdminの設定
「C:\xampp\phpMyAdmin\config.inc.php」に設定が必要な場合があります。
その場合は以下を参考に設定を行ってみてください。
Node.jsのインストール
以下のページよりNode.jsをダウンロードしてインストールします。
同時にNpmもインストールされます。
次のBunを使用する場合は必ずしも必要ないかもしれませんが、まあどこかで使うと思うのでインストールしておくのが良いと思います。
またはBunのインストール
BunはNode.jsやNpmの機能を持った超新しくて動作の速い版です。最近流行っているので、こちらを使ってもよいでしょう。ただ、少し不安定な部分もありますので、まだ少し上級者向けです。
Windows PowerShellを使用してインストールします。
powershell -c "irm bun.sh/install.ps1 | iex"
IDE・エディタの選定、インストール
プログラムを編集するツールをインストール、設定します。
無料で高機能な、今流行りのツールは「VS Code（Visual Studio Code）」でしょう。
有料でもより特化したツールを求める方、或いは学生の方は学生の間は無料で使えたりしますので、「WebStorm」もおすすめです。
VS Code：https://azure.microsoft.com/ja-jp/products/visual-studio-code
WebStorm：https://www.jetbrains.com/ja-jp/webstorm/
VS Codeを使用する場合、拡張機能のインストールが必要ですが、「Vue - Official」というのをインストールしておけば取り合えずOKと思います。
WebStormは勝手に判別してくれると思いますが、アップデートしたい場合は、以下の記事を参考にしてみてください。
Gitのインストール
コードを管理するための「Git」をインストールします。
手順は以下のページなどを参考にしてください。
公式：https://git-scm.com/book/ja/v2/使い始める-Gitのインストール
ここまでが一般的なプログラム開発の設定です。
XAMPPやphpMyAdminは今の流行からすると少し古い部分もありますが、初学者にはわかりやすく使いやすいため、今回はそれらを選定しました。
特にphpMyAdminは、画面がシンプルで使いやすいため、私も未だに使ってます。
N-Dev
ここからようやく「N-Dev」の話です。普段から開発を行っていて、独自の環境が構築済みの方はここから読んでいただければと思います。
まずは「N-Dev」にアクセスしましょう。
ログイン
ログイン、又はユーザ登録が必要です。
GoogleログインとGitHubログインに対応しており、それらアカウントを持っている方はすぐに使い始められます。
メールログインを使用する場合は、まずユーザの新規登録、その後メールアドレスの確認を行ってください。
ログイン後は以下のページになります。まだアプリはありません。
サンプルアプリの作成
はじめての方は、右上の試験管のアイコンのボタンからサンプルアプリを追加してみましょう。
以下のように、サンプルアプリ「ToDo」が作成されます（2024.4 現在）。
各機能の確認
アプリにアクセスすると、アプリ内のメニューが表示されます。
サンプルアプリで作成される各項目を見てみましょう。
ページ設計
「ページ設計」ページでは、簡単なページの設計を行います。
サンプルアプリでは「/todo」ページのみが用意されています。「/(index)」「/login」ページは”自動生成”時に自動で追加されます。
DB設計
「DB設計」ページでは、DB「todo」に「user」「todo_set」「todo」の3つのテーブルが作成されており、それぞれにサンプルのカラムが登録されています。
ノート
「ノート」ページでは共有したい事項やメモを残すことができます。
「ノート」はノートページで確認できる他、アプリ選択時は常に右下に表示可能で、即時確認・編集が可能です。
サンプルアプリには「サンプルノート」が作成されており、本サンプルの情報が記載してあります。
ログ
「ログ」ページでは対象アプリの操作ログが確認できます。
管理者
「管理者」ページでは、複数人でプロジェクトを管理したい場合に、他の管理者を追加可能です。
自動生成
「自動生成」ページでは、設計した情報に基づくプロジェクトテンプレートをダウンロードできます。
プロジェクトテンプレートの「todo」をクリックするとプロジェクト全体が「N-DEV_template.zip」としてダウンロードされます。
ダウンロード時に「ウイルス検出」のエラーが発生することがあります。悪意のあるコードは含まれておりませんが、以下の手順等をご確認の上自己責任でご利用ください。
これでサンプルアプリのおおよその解説は終了です。
開発環境で動かす
ここからは、開発環境での動かし方について説明します。
これまでのDBやSQL（DB）クライアント、IDEは設定まで完了している前提になります。
DB作成
今回はphpMyAdminからDBを作成する手順を解説します。
まず、「N-Dev」の「DB設計」ページから、DBを作成するSQLファイルをエクスポートします。
エラーチェックでDBにエラーがないことを確認し、「DB作成文を含める」のみチェックして「SQLダウンロード」を行います。
そうすると「todo.sql」がダウンロードされ、これを使用します。
phpMyAdminにアクセスしログインします。
ホーム画面からインポートを選択し、「インポートするファイル」に先ほどの「todo.sql」を指定、「外部キーのチェックを有効にする」をオフにして「インポート」を実行します。
エラーが無く、「todo」のDBが表示されていれば作成完了です。
IDE・エディタで開く
まず任意のフォルダで「自動生成」の項でダウンロードした「N-DEV_template.zip」を解凍します。
解凍すると「todo」フォルダがありますので、これを作業したいフォルダに移動します。
「todo」には既に開発に必要なファイル等がほとんど用意されています。
このフォルダを、用意したIDE等（VS CodeやWebStorm）で開きます。
WebStormの場合、「開く」から「todo」フォルダを選択してください。
サーバ情報を更新する
「/server/utils/dbUtils.ts」にDBへのアクセス情報が記載されています。この「password」を設定したパスワードに変更し、「database」を"todo"に変更します。
サービス環境では環境変数等を利用することが推奨されますが、今回は直接設定します。
パッケージを設定する
パッケージ管理にNpmを使用している場合は、以下のコマンドでライブラリ等をインストールします。
npm i
この操作には時間がかかることがあります。
Bunの場合は以下のようになります。
bun i
実行する
「dev」コマンドから実行します。IDE等のコンソールに以下のように入力して実行してください。
npm run dev
ほとんどの場合は「http://localhost:3000/ 」でアプリが表示されますので、ブラウザから開きます。
なお、停止はコンソールで「Ctrl+C」です。
Bunを使用する場合は「bun run dev」になります、IDE等の実行機能を利用してもかまいません。
実行後は、ユーザ、ToDoセット、ToDoを追加する等、動作を試してみることができます。
簡単な操作に限られますが、操作を行い、実際にDBが更新されることを確認してみましょう。
更新する（発展）
コードを編集し、表示を工夫したり、項目を増やしたりもできます。
デプロイ
ここまでは自分のみがアクセスできる開発環境での操作でしたが、ここからは、他のユーザもアクセスできる外部のサーバに公開していきましょう。
本構成でサービスを公開する場合、外部にDBが必要です。GCP等で用意できますが、少し複雑になり、料金が発生する場合もあります。
外部DBサーバの用意
上に書いた通り、本作業は少し難しくなるかもしれません。
以下などを参考にされてください。
参考：https://qiita.com/_kyamasan/items/0f8cb9d2549838dca8f1
MySQLのサーバを用意します。基本的にはAWSやGCPを利用して用意することになります。
一般的なDB付きのレンタルサーバの場合、localhostでのアクセスのみ許可されており、本件には使用できない場合が多いと思われます。
DBを用意出来たら、「DB作成」の項と同様に「todo」DBを作成します。
また、「/server/utils/dbUtils.ts」のDBサーバ情報を更新します。
開発環境とサービス（実行）環境で使い分ける場合、以下のように記述できます。
password: process.env.NODE_ENV === "development" ? "local-pass" : "server-pass",
外部DBを用意しなくても以下のデプロイ作業は可能ですが、その場合DBに接続する動作でエラーが発生します。
GitHubの設定
GitHubはご存じかもしれません、プログラムをバージョン管理するサービスです。
まずはGitHubにアクセスし、ユーザ登録、ログインを行ってください。
ログイン後「new」から新しいリポジトリ（保存場所）を作ります。
リポジトリ名は任意のもので良いですが、「todo」で良いでしょう。
「Public」と「Private」の選択ですが、わからない場合は「Private」を選択してください。
設定後、「Create repository」します。
GitHubにプッシュする
次に、プロジェクトからGitHubにプログラムを保存します。
まずはコンソールから以下のコマンドでGitを使い始めます。
git init
次に、Gitに追加するファイルを決定します。以下のコマンドでほぼ全ファイル一括で追加できます。
git add .
次に、ファイルのコミットとプッシュを行います。
コンソールでGitのコマンドを実行してもよいですが、例えばWebStormでは、以下のように左のコミットメニューからファイルをすべて選択し、「コミットとプッシュ」することでプッシュできます。
初回は「リモートの定義」が必要で、GitHub認証後、「リモートの定義」の「URL」にGitHubに表示されているSSHのURL（？）を追加して「プッシュ」します。
プッシュが完了すると、GitHub上でプッシュしたファイルを閲覧できます。
Vercelの設定
Vercelは、GitHubと連動して、ほぼ設定なしに自動的にプログラムをデプロイ（公開）できるサービスです。
まずはVercelにアクセスし、ユーザ登録・ログインを完了します。
Vercelでは「Add New」から新しいプロジェクトを開始します。
GitHubで認証すると、自身のGitHubのリポジトリの一覧が表示されますので、その中から先ほどプッシュした「todo」を選択し、「Import」、設定はそのままで「Deploy」しましょう。
Vercelが自動でファイルタイプを判別し、デプロイを実行してくれます。
数十秒から数分待って、「Congratulations!」の文字が出力されたらデプロイ完了です。
既にサービスが公開され、世界中の人がアクセスできる状態になっています。
これで一通りの流れは完了です。お疲れさまでした！
良きデベロッパーライフを～～
終わりに
今回は「N-Dev」の紹介をしました。
まだ粗削りではありますが、かなり有用なサービスになっていると思います。
是非是非ご活用ください。
Discussion