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

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

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

何年か前に記事書いたフレームワーク「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 でもサーバ起動はできる。

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感

github.com

↑↑っていうフレームワークだ。
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

f:id:pekomiya:20171023000028p:plain

とても簡単。引き続き機能の説明をしていきたい。それはまた今度。

ではではノシ