Edited at
HALDay 1

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


はじめに

HALアドベントカレンダー1日目を担当する、HAL東京IT学部4年のおりばーです。

去年のHALアドベントカレンダーからもう1年が経ってしまい、懐かしく感じます。

HAL Advent Calendar 2017 - Qiita

去年まではIT学部とゲーム学部が主体となって記事を書いていたのですが、今年は映像学科なども参戦しています。

また、後輩も積極的に参加してくれているので、とても楽しみです。頑張っていきましょう!


この記事の目的

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

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

注意:開発環境はMac OSで行なっていきます。Dockerは使いません。DBはMySql5.7でやっていきます。

また、フレームワークを利用するために必要な言語の導入は省きます。


「Hello World」を定義する

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

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

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

Screen Shot 2018-12-01 at 19.27.37.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をインストール

$ gem install rails

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

$ rails new myapp --database=mysql

③ サーバを起動する

$ cd myapp

$ rails server
$ open http://localhost:3000


Hello Worldを実装

① MySqLを起動

$ 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
...

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

$ rails db:create

④ モデル作成

$ rails generate model HelloWorld text:string

$ rails db:migrate

⑤ データ挿入


db/seeds.rb

HelloWorld.create(text: 'Hello World!')


$ rails db:seed

⑥ コントローラを作成

$ 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のインストール

$ brew install composer

② Laravelのインストール

$ composer global require "laravel/installer"

③ 環境変数の設定


~/.bash_profile

...

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

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

$ laravel new myapp

⑤ サーバを起動する

$ cd myapp

$ php artisan serve
$ open http://localhost:8000


Hello Worldを実装

① .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`;

③ モデルの作成

$ 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();
});
}
...

$ php artisan migrate

④ データ挿入

$ php artisan make:seeder HelloWorldsTableSeeder


database/seeds/HelloWorldsTableSeeder.php

...

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

$ php artisan db:seed --class=HelloWorldsTableSeeder

⑤ コントローラの作成

$ 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のインストール

$ pip install django

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

$ django-admin startproject mysite

③ サーバを起動する

$ 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でインストール

$ 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',
]
...

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

$ python manage.py makemigrations myapp

$ python manage.py migrate

④ 初期データの挿入

$ mkdir myapp/fixtures


myapp/fixtures/fixture.json

[

{
"model": "myapp.HelloWorld",
"pk": 1,
"fields": {
"text": "Hello World!"
}
}
]

$ 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})


⑦ テンプレートの作成

$ 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 にアクセス


おわりに

次回は JavaScalaで実装できるPlayFrameworkGoのフレームワークであるechoJavascriptのフレームワークであるKoaなどを紹介していこうと思います。

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

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