Help us understand the problem. What is going on with this article?

RailsよりモダンなWeb開発が楽そう!CrystalのAmberでTodoアプリAPIを作り、React on Amberでフロントを書いてみる!!

More than 1 year has passed since last update.

Crystalという言語のフルタックスフレームワークAmberを使ってみようと思いました。
Railsより、モダンなWeb開発に向いてそう!!!

CrystalのAmberがRailsより、モダンなWeb開発に向いているかもしれない(かもしれない)

これは主にフロントのお話なのですが

  • Webpackがdefaultで入ってる(RailsのWebpackerのような悪者がいない)
  • Babelやcss-loader,file-loaderなどモダンなフロント開発では欠かせないものがdefaultで入ってる

Amberのインストール

macOS

Crystalも自動でインストールされます。
Homebrew

brew tap amberframework/amber
brew install amber

MacPorts

sudo port selfupdate
sudo port install amber

Ubuntu or Debian

まず、Crystalのインストール

curl https://dist.crystal-lang.org/apt/setup.sh | sudo bash
sudo apt-get install build-essential crystal

次にAmberのインストール

sudo apt-get install libreadline-dev libsqlite3-dev libpq-dev libmysqlclient-dev libssl-dev libyaml-dev
curl -L https://github.com/amberframework/amber/archive/stable.tar.gz | tar xz
cd amber-stable/
shards install
make install

Linuxbrew​でもインストールできる

brew tap amberframework/amber
brew install amber

Amberでプロジェクトを作る

amber new amber-todo
cd amber-todo
shards install

AmberでAPIを作る

amber g api Todo content:string completed:bool

amber g apiはドキュメントに載っていませんが、0.11.1では使用可能でした。しかしplug Amber::Pipe::CORS.newをコメントアウトする必要があります

config/routes.cr
  pipeline :api do
    plug Amber::Pipe::PoweredByAmber.new
    plug Amber::Pipe::Error.new
    plug Amber::Pipe::Logger.new
    plug Amber::Pipe::Session.new
    # plug Amber::Pipe::CORS.new
  end

あくまでもドキュメントに乗っていない方法なので使用する際は注意してください
postgresを起動しておく

postgres -D /usr/local/var/postgres

必要があれば、database urlを変更

config/environments/development.yml
database_url: postgres://postgres:@localhost:5432/amber_todo_development

DBを作りマイグレート

amber db create migrate

アクセスできる

curl http://localhost:3000/todos
[{"id":1,"content":"宿題","completed":false,"created_at":"2018-11-26T09:27:38Z","updated_at":"2018-11-26T09:27:49Z"}]

Reactでフロントをかくぞ!

node_modules,webpackが標準から導入されてて、おお!!!!すげーさすがやなって感じですww
Reactが慣れてるのでReactで書きます、別にフロントのフレームワークは何でもOKだと思います。

必要なパッケージをインストール、webpack,babelなどはもともと入ってる

yarn add react react-dom axios 
yarn add -D babel-preset-react

jsxでかけるように。

config/webpack/common.js
// 省略
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['env', 'react']
        }
      }
// 省略

Hello Reactを表示させてみましょう

これらを編集

src/assets/javascirpts/App.js
import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        Hello, React!!
      </div>
    )
  }
}

export default App

Appを#rootで表示。

src/assets/javascirpts/main.js
import Amber from 'amber'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

jQuery,Bootstrapはいらないですね

rootを入れましょう

src/views/layouts/application.slang
doctype html
html
  head
    title Amber Todo using Amber
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=edge"
    meta name="viewport" content="width=device-width, initial-scale=1"
    link rel="stylesheet" href="/dist/main.bundle.css"
    link rel="apple-touch-icon" href="/favicon.png"
    link rel="icon" href="/favicon.png"
    link rel="icon" type="image/x-icon" href="/favicon.ico"

  body
    #root

    script src="/dist/main.bundle.js"

    - if Amber.settings.auto_reload?
      script src="/js/client_reload.js"

AxiosでAPIにリクエストを送り、画面に表示しよう!

Todosコンポーネントを作りましょう

jsx
import React, { Component } from 'react'
import axios from 'axios'


export default class Todos extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: []   
        }
    }
  componentDidMount() {
        axios.get('/todos')
            .then(res => {
                const todos = res.data
                this.setState({ todos })
            })
    }
    render() {
        return (
            <div>
        <ul>
        {
          this.state.todos.map((todo) => (
            <li key={todo.id}>{todo.content}</li>
          ))
        }
        </ul>
      </div>
        )
    }
}

Appも変更

src/assets/javascirpts/App.js
import React, { Component } from 'react'
import Todos from './components/Todos'

class App extends Component {
  render() {
    return (
      <div>
        <Todos />
      </div>
    )
  }
}

export default App

これで一覧は表示できました!
スクリーンショット 2018-12-01 23.33.43.png

完了にしたり未完了にしてみる

あとで書く

まとめ

Crystalはまだリリースされてないものの、意外と使えました。
これからRailsの代わりになっていくかもしれない。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away