AdonisJs というフレームワークを解説してみる(基本的な使い方編:1 インストール)v4.1
何年か前に記事書いたフレームワーク「AdonisJs」について、私が裁量のあるお仕事で採用してみて良かったので、今後の自分やその他技術者のために解説記事を書く。
3.2が stableだったころには、フレームワークにバグが目立ったり、細かい設定ができなかったりしたけど、4.1で結構よくなった。
(POSTしたデータを受け取る時に <input type="text" name="hoge[]">
みたいな記述で、大量のデータをPOSTするときに、コントローラ側で配列として取得できるが、その配列の数の制限をコンフィグで変更できなかったり...)
Adonisは、Nodejs上で動く LaravelインスパイアなフルスタックWebアプリケーションフレームワーク。
最近日本語の解説記事もぽつぽつ増えてる気がするけど、もうちょっと増えてユーザー増えてくれたらよいなあと思う。(Starも記事執筆時で5,898ついてる)
インストール
必須環境
- Nodejs >= 8.0.0
- npm >= 3.0.0
今から Nodejsをインストールする人は、LTS版が10.15.x 系なのであまり気にしないでいいかもしれないが、2017年に環境構築をしてそのままの人は最新の LTS版をインストールする。
また、速度的な問題などで npm
を使いたくない場合は yarn
(https://yarnpkg.com/ja/docs/getting-started) もインストールしておく。
CLI インストール
Adonisには、LaravelやRails、Djangoなどのフレームワークにあるように、コマンドラインツールが用意されているので、インストールする。 (Linux環境だと sudo をよしなにつける。)
npm i -g @adonisjs/cli
プロジェクト作成
プロジェクトの作成は、 adonis new
コマンドを使用する。
$ adonis new --help Usage: new <name> [options] Arguments: name Name of the project directory Options: --api-only Scaffold project for api server --api Scaffold project for api server --slim Scaffold smallest possible Adonisjs application --blueprint [value] Path to github project blueprint --branch [value] Specify git branch for project blueprint --skip-install Do not install modules from npm --yarn Use yarn over npm for modules installation --cnpm Use cnpm over npm for installation --raw Disable animations and colored output About: Create a new AdonisJs application
adonis new <プロジェクトのディレクトリ名>
でプロジェクトを作成する。
yarn
を使用するには、adonis new <プロジェクトのディレクトリ名> --yarn
という風に --yarn
オプションを付ける。
$ adonis new sample --yarn _ _ _ _ / \ __| | ___ _ __ (_)___ | |___ / _ \ / _` |/ _ \| '_ \| / __|_ | / __| / ___ \ (_| | (_) | | | | \__ \ |_| \__ \ /_/ \_\__,_|\___/|_| |_|_|___/\___/|___/ [1/6] 🔬 Requirements matched [node & npm] [2/6] 🔦 Ensuring project directory is clean [sample] [3/6] 📥 Cloned [adonisjs/adonis-fullstack-app] [4/6] 📦 Dependencies installed [5/6] 📖 Environment variables copied [.env] [6/6] 🔑 Key generated [adonis key:generate] 🚀 Successfully created project 👉 Get started with the following commands $ cd sample $ adonis serve --dev
サーバ起動
adonis serve --dev
で Development モードでサーバを起動する。
xxx@xxxxxx /e/projects $ cd sample/ xxx@xxxxxx /e/projects/sample $ adonis serve --dev SERVER STARTED > Watching files for changes... info: serving app on http://127.0.0.1:3333
http://127.0.0.1:3333
(or http://localhost:3333
) にアクセスする。
図のようなページが表示されれば成功。
ディレクトリ構成
プロジェクトを作成すると、下図のようなディレクトリ構成となっている。
(私は JetBrains社のIntelliJ IDEA などを使用しているので .idea
というディレクトリが作成されているので、無視してほしい。)
app/
コントローラ、モデル、ミドルウェアといったロジックファイル用。config/
アプリや、AdonisJsのライブラリ用設定ファイル用。database/
データベースのマイグレーションファイルや、フェイクデータを作成格納するためのシードファイル用。public/
ブラウザから呼び出される静的ファイル用。(フレームワークによってはstatic
というディレクトリ名が一般的かも)resource/
Viewファイル(edge)を置いたり、SASSのようなAltCSS系、Webpackなどでトランスパイルする前のjavascriptなどのファイルはここに置く。start/
アプリケーションが起動するときに読み込まれるファイル用(3.2系と違って、この中にルーティングファイルがある)。.env
アプリの環境変数ファイル(dotenvが使われてる)ace
v3.2 だと、このファイルを実行してコマンドを使用していたが、>= 4.0
だとadonis
コマンドによって間接的に呼ばれるみたい。server.js
adonis serve
でサーバ起動するときに呼ばれる。単にnode server.js
でもサーバ起動はできる。
Javascript製Full stack Webフレームワーク「adonis」使ってみる (4.0 dev
この記事は古いので、4.1向けに書き直してます。
https://pekomiya.hatenablog.com/entry/2019/03/16/104341
最近、お酒を飲んでプログラミングをすることが多い。
普段は、Go + Revel や Echo など使って Webアプリなどを作っているぺこだけど、お酒を飲んで頭がもうろうとしているときには、動的言語で書かないとうまく動かないことがある。
たぶんそんな方々にお勧めなのが、Javascriptだ。
我々大酒飲みには、比較的使いやすい言語なので、うれしい。
(generatorとか、ES7のasync await 美味しいです)
それらの話はおいておいて、今回お勧めするのが(Youtuber感
↑↑っていうフレームワークだ。
PHPのWebFrameworkに明るい人ならだれでも知っている「Laravel」にインスパイアされた感じがまた使いやすい。Laravel自体が、「プログラマーだけじゃなく、デザイナーにも使いやすいでよ。」ってうたっているものなので、使いやすいのだ。
使いやすくて、短期間で成果を出すプロジェクトならば選択肢の一つとなるので、ぺこは、あるお仕事で使ってる。(ただ、日本語の文章がほとんどなくて悲しいのでこのブログで紹介することで、人口増えるといいなぁ)
※4.0はまだdevなので、仕事では3.2を使ってます。家では4.0devを使用しているので、4.0ベースで書いてます。
Adonis 概要
AdonisはMVCモデルを採用している。(MVCに関して書くのは、この記事ではしない)
フォルダ構成はLaravelを意識したものとなっており、Laravelを触ったことがあるならば、とっつきやすいものだろう。
また、ControllerやModelといったファイルも コマンドラインツールを用いて簡単に作ることができる。
Adonisのプロジェクトを作成するために、「adonis-cli」というコマンドラインツールが提供されており、npm i --global @adonisjs/cli
でインストールすることで、簡単にプロジェクトを作成できる。(とってもモダンだ)
必要環境
- Node.js 8.0 またはそれ以上
- npm 3.0 またはそれ以上
npm i --global @adonisjs/cli
globalにインストールすることで、コマンドラインから adonis
を実行するだけで使用できる。
Usage: command [arguments] [options] Global Options: --env Set NODE_ENV before running the commands --no-ansi Disable colored output Available Commands: install Install Adonisjs provider from npm/yarn and run post instal l instructions new Create a new AdonisJs application repl Start a new repl session serve Start Http server key key:generate Generate secret key for the app make make:command Make a new ace command make:controller Make a new HTTP or Websocket channel controller make:ehandler Make a new global exception handler make:exception Make a new exception make:hook Make a new lucid model hook make:listener Make a new event or redis listener make:middleware Make a new HTTP or Ws Middleware make:migration Create a new migration file make:model Make a new lucid model make:seed Create a database seeder make:view Make a view file route route:list List all registered routes run run:instructions Run instructions for a given module
インストールできたら、任意のディレクトリ上で、adonis new project-name
を実行しよう。実行すると下記のような表示が出て、インストールが始まる。
なお、--yarn
とつけると、Yarnで依存ライブラリのインストールが行われる模様。
_ _ _ _ / \ __| | ___ _ __ (_)___ | |___ / _ \ / _` |/ _ \| '_ \| / __|_ | / __| / ___ \ (_| | (_) | | | | \__ \ |_| \__ \ /_/ \_\__,_|\___/|_| |_|_|___/\___/|___/ √ Your current Node.js & npm version match the AdonisJs requirements! √ Cloned [adonisjs/adonis-fullstack-app] √ npm: Dependencies installed √ Default environment variables copied √ generated unique APP_KEY ┌─────────────────────────────────────┐ │ ✨ Application crafted │ │ │ │ cd project-name │ │ adonis serve --dev │ └─────────────────────────────────────┘
そして、「project-name」に移動して、 adonis serve --dev
を実行するだけで、開発モードでサーバーが立ち上がる。
$ adonis serve --dev ┌──────────────────────┐ │ │ │ Started server │ │ Watcher: On │ │ Debugger: Off │ │ │ └──────────────────────┘ 2017-10-22T14:59:55.649Z - info: serving app on http://127.0.0.1:3333
とても簡単。引き続き機能の説明をしていきたい。それはまた今度。
ではではノシ
10月22日
お酒を飲みました。
おいしかったです。