いろんなWebフレームワークの「Hello World」をやってみた その１

## はじめに
HALアドベントカレンダー1日目を担当する、HAL東京IT学部4年のおりばーです。
去年のHALアドベントカレンダーからもう1年が経ってしまい、懐かしく感じます。

[HAL Advent Calendar 2017 - Qiita](https://qiita.com/advent-calendar/2017/hal)

去年まではIT学部とゲーム学部が主体となって記事を書いていたのですが、今年は映像学科なども参戦しています。
また、後輩も積極的に参加してくれているので、とても楽しみです。頑張っていきましょう！

## この記事の目的
いろんな言語で実装されている様々なWebフレームワークを体験してみようと思い、記事にしました。

有名なWebフレームワークは **Ruby**の**Ruby on Rails**、**PHP**の**Laravel**、**Python**の**Django**などがありますが、まだフレームワークを使っとことがない人に向けた、「こんな言語のこんなフレームワークがあるよ〜」って意味を込めた記事になっています。

注意：開発環境はMac OSで行なっていきます。Dockerは使いません。DBはMySql5.7でやっていきます。
また、フレームワークを利用するために必要な言語の導入は省きます。

## 「Hello World」を定義する
今回、様々なWebフレームワークを試していくのですが、ゴール地点を定めたいと思います。

**`myapp_development`データベースの特定のテーブルに格納されている「Hello World!」という文字列をWebブラウザからアクセスしたら表示する**

をゴールにしたいと思います。

<img width="512" alt="Screen Shot 2018-12-01 at 19.27.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/213538/4fc0e048-032b-cd03-5a78-2e469df6c0b1.png">

## 各フレームワークで実装してみる

### Ruby on Rails

#### 概要
> Ruby on Rails（ルビーオンレイルズ）は、オープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller（MVC）アーキテクチャに基づいて構築されている。
>
> 実アプリケーションの開発を他のフレームワークより少ないコードで簡単に開発できるよう考慮し設計されている。Railsの公式なパッケージはRubyのライブラリやアプリケーションの流通ルートであるRubyGemsにより配布されている。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

HP: https://rubyonrails.org/
GitHub スター数: **41000** over

#### 準備
① Railsをインストール

```shell
$ gem install rails
```

② Railsアプリケーションを作成する

```shell
$ rails new myapp --database=mysql
```

③ サーバを起動する

```shell
$ cd myapp
$ rails server
$ open http://localhost:3000
```

#### Hello Worldを実装
① MySqLを起動

```shell
$ mysql.server start
```

② database.yml を編集

```config/database.yml
...
 default: &default
    adapter: mysql2
    encoding: utf8
    pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
    username: root
    password: <DBのrootパスワード>
    socket: /tmp/mysql.sock
...
```

③ データベースセットアップ

```shell
$ rails db:create
```

④ モデル作成

```shell
$ rails generate model HelloWorld text:string
$ rails db:migrate
```

⑤ データ挿入

```db/seeds.rb
HelloWorld.create(text: 'Hello World!')
```

```shell
$ rails db:seed
```

⑥ コントローラを作成

```shell
$ rails g controller hello index
```

```app/controllers/hello_controller.rb
class HelloController < ApplicationController
  def index
    @hello_world = HelloWorld.first
  end
end
```

⑦ routeを追加

```config/routes.rb
Rails.application.routes.draw do
   root 'hello#index'
end
```

⑧ ビューを編集

```app/views/hello/index.html.erb
<%=@hello_world.text %>
```

⑨ Webブラウザでアクセスする
http://localhost:3000 にアクセス

### Laravel
#### 概要
> Laravel は、MVCのWebアプリケーション開発用の無料・オープンソースのPHPで書かれたWebアプリケーションフレームワークである。LaravelはMITライセンスの下でリリースされており、そのソースコードはGitHubにホスティングされている。マイクロソフトの.NETの開発に関わっていたTaylor Otwell が開発した。
>
> GitHubでのスター獲得数がPHPフレームワークの中で最も多いなど、人気のフレームワークの1つとなっている。
>
> 2018年9月現在、最新の5.7系の対応PHPはバージョン 7.1.3以上となっている。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

HP: https://laravel.com/
GitHub スター数: **47000** over

#### 準備
① composerのインストール

```shell
$ brew install composer
```

② Laravelのインストール

```shell
$ composer global require "laravel/installer"
```

③ 環境変数の設定

```~/.bash_profile
...
export PATH="$PATH:$HOME/.config/composer/vendor/bin"
```

④ Laravelアプリケーションを作成する

```shell
$ laravel new myapp
```

⑤ サーバを起動する

```shell
$ cd myapp
$ php artisan serve
$ open http://localhost:8000
```

#### Hello Worldを実装
① .envの編集

```.env
...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myapp_development
DB_USERNAME=root
DB_PASSWORD=<DBのrootパスワード>
...
```

② データベースの作成

```
$ mysql -uroot -p
mysql> CREATE DATABASE `myapp_development` DEFAULT CHARACTER SET = `utf8mb4`;
```

③ モデルの作成

```shell
$ php artisan make:model HelloWorld --migration
```

```database/migrations/20xx_xx_xx_xxxxxx_create_hello_worlds_table.php
...
    public function up()
    {
        Schema::create('flights', function (Blueprint $table) {
            $table->increments('id');
            $table->string('text');
            $table->timestamps();
        });
    }
...
```

```shell
$ php artisan migrate
```

④ データ挿入

```shell
$ php artisan make:seeder HelloWorldsTableSeeder
```

```database/seeds/HelloWorldsTableSeeder.php
...
    public function run()
    {
        DB::table('hello_worlds')->insert([
            'text' => 'Hello World!'
        ]);
    }
...
```

```shell
$ php artisan db:seed --class=HelloWorldsTableSeeder
```

⑤ コントローラの作成

``` shell
$ php artisan make:controller HelloController
```

```app/Http/Controllers/HelloController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
  public function index()
  {
    $hello_world = \App\HelloWorld::first();
    return view('hello')->with('hello_world',$hello_world);
  }
}
```

⑥ routeの追加

```routes/web.php
Route::get('/', 'HelloController@index');
```

⑦ ビューの追加

```resources/views/hello.blade.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    {{$hello_world->text}}
  </body>
</html>
```

⑧ Webブラウザでアクセスする
サーバを再起動して、 http://localhost:8000 にアクセス


### Django
#### 概要
> Django（ジャンゴ）は、Pythonで実装されたWebアプリケーションフレームワーク。 model-view-controller デザインパターンに緩やかに従う。 もともとはローレンス (カンザス州)にある World Company のために、ニュース系のサイトを管理する目的で開発され、2005年7月に BSD License で公式にリリースされた。フレームワークはジプシー・スウィングのギタリストであるジャンゴ・ラインハルトにちなんで命名された。
>
> Django の第一の目的は、複雑なデータベース主体の Web サイトの構築を簡単にすることである。Django はコンポーネントの再利用性と'pluggability'、素早い開発、DRY (Don't Repeat Yourself)の原則に力点を置いている。ファイルやデータのモデルにいたるまで、Python が一貫して用いられている。
>
> Django はまた、動的に生成され、データモデルの定義を通じて完全に構成することができる、データベース管理 CRUD インターフェイスをオプションで提供する。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

HP: https://www.djangoproject.com/
GitHub スター数: **37000** over

#### 準備
① Djangoのインストール

```shell
$ pip install django
```

② Djangoプロジェクトを作成する

```shell
$ django-admin startproject mysite
```

③ サーバを起動する

```shell
$ cd mysite
$ python manage.py runserver
$ open http://localhost:8000
```

④ Fjangoアプリケーションを作成する

```
$ python manage.py startapp myapp
```

#### Hello Worldを実装
① データベースの作成

```
$ mysql -uroot -p
mysql> CREATE DATABASE `myapp_development` DEFAULT CHARACTER SET = `utf8mb4`;
```

② データベースの設定

PythonでMySQLを利用する為のモジュールをpipでインストール

```shell
$ pip install PyMySQL
```

`settings.py` を編集

```mysite/settings.py
...
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'myapp_development',
        'USER': 'root',
        'PASSWORD': '<DBのrootパスワード>',
        'HOST': '',
        'PORT': '',
    }
}
...
```

モジュールをインポートする

```manage.py
...
import pymysql
pymysql.install_as_MySQLdb()
...
```

③ モデルの作成

```myapp/models.py
...
class HelloWorld(models.Model):
   text = models.CharField(max_length=200)

```

```mysite/settings.py
...
INSTALLED_APPS = [
     'myapp.apps.MyappConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
]
...
```

マイグレーションを実行する

```shell
$ python manage.py makemigrations myapp
$ python manage.py migrate
```

④ 初期データの挿入

```shell
$ mkdir myapp/fixtures
```

```myapp/fixtures/fixture.json
[
  {
    "model": "myapp.HelloWorld",
    "pk": 1,
    "fields": {
      "text": "Hello World!"
    }
  }
]
```

```shell
$ python manage.py loaddata myapp/fixtures/fixture.json
```


⑤ ルーティングの設定

プロジェクトのルーティングに追加

```mysite/urls.py
from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
   url(r'^admin/', admin.site.urls),
   url(r'', include('myapp.urls')),
]
```

myappのルーティングに追加

```myapp/urls.py
from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index),
]
```

⑥ ビューの作成

```myapp/views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render
from myapp.models import HelloWorld

def index(request):
     hello_world = HelloWorld.objects.first()
     return render(request, 'index.html', {'hello_world':hello_world})
```

⑦ テンプレートの作成

```shell
$ mkdir myapp/templates
```

```myapp/templates/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    {{ hello_world.text }}
  </body>
</html>
```

⑧ Webブラウザでアクセスする
サーバを再起動して、 http://localhost:8000 にアクセス


## おわりに
次回は **Java**や**Scala**で実装できる**PlayFramework**や**Go**のフレームワークである**echo**、**Javascript**のフレームワークである**Koa**などを紹介していこうと思います。

また、今回の内容で、もっと簡単に Hello World できるよ！って教えてくれる方がいらっしゃいましたら、コメントか編集リクエストしていただけると幸いです。

ありがとうございました。