お酒を飲みながら仕事をしたい

お酒の話とプログラミング関連の話。職業プログラマー。お仕事のさなかにお酒を飲んだことは数回しかないので、増やしたい。

AdonisJs というフレームワークを解説してみる（基本的な使い方編:1 インストール）v4.1

javascript プログラミング adonis

何年か前に記事書いたフレームワーク「AdonisJs」について、私が裁量のあるお仕事で採用してみて良かったので、今後の自分やその他技術者のために解説記事を書く。

3.2が stableだったころには、フレームワークにバグが目立ったり、細かい設定ができなかったりしたけど、4.1で結構よくなった。
（POSTしたデータを受け取る時に <input type="text" name="hoge[]"> みたいな記述で、大量のデータをPOSTするときに、コントローラ側で配列として取得できるが、その配列の数の制限をコンフィグで変更できなかったり...）

adonisjs.com

Adonisは、Nodejs上で動く LaravelインスパイアなフルスタックWebアプリケーションフレームワーク。
最近日本語の解説記事もぽつぽつ増えてる気がするけど、もうちょっと増えてユーザー増えてくれたらよいなあと思う。（Starも記事執筆時で5,898ついてる）

GitHub - adonisjs/adonis-framework: 🚀 The Node.js Framework highly focused on developer ergonomics, stability and confidence

インストール

必須環境

  • Nodejs >= 8.0.0
  • npm >= 3.0.0

今から Nodejsをインストールする人は、LTS版が10.15.x 系なのであまり気にしないでいいかもしれないが、2017年に環境構築をしてそのままの人は最新の LTS版をインストールする。

また、速度的な問題などで npm を使いたくない場合は yarn (https://yarnpkg.com/ja/docs/getting-started) もインストールしておく。

f:id:pekomiya:20190316102601p:plain
yarn の日本語版ページは悲しみに包まれるので、英語ページを表示すると楽しい。https://yarnpkg.com/en/docs/install

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) にアクセスする。

f:id:pekomiya:20190316104023p:plain

図のようなページが表示されれば成功。

ディレクトリ構成

プロジェクトを作成すると、下図のようなディレクトリ構成となっている。
（私は JetBrains社のIntelliJ IDEA などを使用しているので .idea というディレクトリが作成されているので、無視してほしい。）

f:id:pekomiya:20190316104905p:plain

  • 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 でもサーバ起動はできる。