経緯
下記のサイトを見て、waspって何だ？って感じたので、いろいろ調査した。
ちなみに、下記のサイトは、wasp使ったアプリの紹介をしていた。
What can you build with Wasp - the fastest way to develop React & Node.js apps 🐝 🚀 - DEV Community
公式サイト
概要をまとめてると、Waspはモダンなウェブアプリケーションを構築するためのツールらしい。
クライアント(フロントエンド)、サーバー(バックエンド)、データベースの３要素の連携部分を設定した状態でアプリ開発を始められるのがメリットらしい。
裏で使われている技術ととして、React、Node.js、Prismaを使用しており、ウェブコンポーネントやサーバーのクエリやアクションを定義して、開発を行える。
Quick Start
記事にあるとおりだと、自分はつまずいたのでメモ。
waspのインストール
インストール自体は、下記のコマンドで可能。
windows環境は、WSL環境でやれって描いてあった。
curl -sSL https://get.wasp-lang.dev/installer.sh | sh
自分は、macでやった。
なので、mac前提で話す。(windowsユーザは適時読み替えてね♡)
インストール後、もしかすると、パスが通ってない可能性がある。
なので、インストール後に表示されてたパスを追加する。
自分は、下記だったので、パスを環境変数に入れた。
~/.local/bin
※~はユーザディレクトリだったので、ここでの記載は省略。以下同様に記載
パスへ入れるコマンドは、下記で入れた。
export PATH=$PATH:~/.local/bin
nodeのインストール
waspは、nodeを利用しているツールなので、nodeを入れる。
nodeの環境管理は、いろいろ派閥があるが、俺はvolta派なので、voltaを入れて環境を作った。
QuickStartアプリの作成
waspのインストール、nodeのインストールができたら、任意のフォルダで、下記のコマンドを叩く
wasp new [プロジェクト名]
今回は、サンプルとして、下記のコマンドで作成してみた。
wasp new MyApp
そうすると、カレントディレクトリ下に、MyAppというディレクトリができる。
作られたら、下記コマンドでMyAppに移動してアプリを起動する。
cd MyAPp wast start
そうすると、npmの必要なライブラリのインストールが始まり、サーバー起動して、初期画面のパスをブラウザで開こうとするので許可する。
そうすると、localhost:3000とかを開いて、waspの初期画面が出てくるはず。
追加されるディレクトリ構成とファイルは、以下の通り
感想
とりあえず、なんとか初期画面を出せるようになった。
生成されたソースを見ると、db周りは、sqliteみたい。
画面は、reactで構成されており、dockerとか出力さきにできている。
ベースになっているのは、typescriptのようだった。
出力後は、jsファイルが出ている。
率直に感じたところとしては、ベースとなっている技術要素を知ってないと、使いこなすのは難しいのでは？って感じた。
自分は、reactとprismaの知識がないので、敷居を高く感じた。
ただ、ベースで使われているtypescriptの知識はあるので、学習コストをちゃんと払えば、なんとかなりそうだとも感じた。
また、ビルドプロセスが見えないので、沼った時が危ない気がしてる。
まだbeta版なので、改良されていく気がするが、まだ様子見かな？とは思っている。
こういうテンプレート作成のツールは、結構乱立しているイメージなので、そこで生き残れるか、自分には分からない。
でも、こういうのが出てくるということは、react+prisma+node+sqlite+typescriptは、デファクトスタンダードの一種になっているのかもしれない。
今後を考えると、どれかの技術は覚えておきたいと思った。
今は、node, typescript, sqliteはある程度知識があるので、prismaかreactあたりは、今後を考えると覚えたいと感じた。
個人的には、正式版になるまでは様子見のスタンスで行こうと思ってる。
