paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

トップ > paiza-PaizaCloud > Laravel入門 - はじめてのLaravelチュートリアル

Laravel入門 - はじめてのLaravelチュートリアル

paiza-PaizaCloud プログラミング Tech Tech-Webサービス紹介 paiza PaizaCloud-tutorial
f:id:paiza:20180216002650p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@yoshiokatsuneo)です。

LaravelはPHPのウェブアプリケーションフレームワークです。

PHPはWeb開発のために作られた言語で、HTMLファイルに埋め込むことでプログラムを動かしてくれます。小さなプログラムから作り始めて、すぐに動かすことができるので、初めてWeb開発をする人にも便利ですね。

ただ、より本格的なWebサービスを作ろうと思ったら、PHPのWebアプリケーションフレームワークを利用する必要が出てきます。

PHPのWebフレームワークには、Laravel、CakePHP、Symfony、Zend Framework、CodeIgniterなどがありますが、その中で、現在最も有名で人気のあるPHPフレームワークといえば、Laravelではないでしょうか。

以下のGoogleトレンドのデータでも、Laravelの人気が急激に伸びていることがわかりますね。

f:id:paiza:20180216013143p:plain (Google Trends より)

Laravelには、Web開発に便利なルーティング、MVC、ORマッパー、ジェネレータ等の機能が含まれており、Laravelの流儀にしたがって作れば、自然とわかりやすい構造のWebアプリケーションが作れるようになっています。

ただ、いざ開発で使おうとすると、PHP、Laravel、データベースを動かすための環境構築やデプロイなどが必要になってきます。これが意外と厄介で、手順通りにインストールしたつもりでも、OSやバージョン、他のソフトウェアなど、さまざまな原因でエラーが出たりして失敗することもあります。

そこで、今回はブラウザだけでLaravelを使ったWeb開発ができるPaizaCloud Cloud IDEを使ってみます。

PaizaCloudは自由度が高く、Laravelなどのさまざまなフレームワークや言語を使ったWeb開発が、初心者でも簡単にできます。PaizaCloudを使えば、最短でLaravelを使ったWeb開発が始められます。

開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったウェブサービスはその場で公開することもできます！

まずは簡単なプログラムからはじめて、タスクリストを編集するサービスを作ってみましょう。現時点で最新のLaravel5.7での手順を紹介します。手順に沿って進めれば、10分程度で作れるかと思いますのでぜひ挑戦してみてください。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

PHP, phpMyAdmin, MySQLをクリックして「新規サーバ作成」ボタンを押します。

f:id:paiza:20180216002923p:plain

3秒程度で、Laravelを使える開発環境がブラウザ上にできあがります。

f:id:paiza:20180216003434p:plain

サンプルのPHPファイルとブラウザが開いています。ここでは必要ないので、これらのウインドウは閉じておきましょう。

アプリケーション作成

それでは、Laravelを使ってWebアプリケーションを作成してみましょう。

Laravelを使ったWebアプリケーションの作成には、Composer、Laravel、データベース(MySQL)等の設定が必要ですが、PaizaCloudでは開発環境が既に用意されているので、すぐにサービスを作れます。

アプリケーション作成時には、"laravel new"というコマンドを使います。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"laravel new アプリケーション名"のようにコマンドを入れます。

"アプリケーション名"というのは作るアプリケーションの名前なので、"music-app"、"game-app"　みたいな感じで、好きな名前にするといいですね。

ここでは、アプリケーション名は"myapp"としておきます。"laravel new myapp"とコマンドを入れて、エンターキーを押します。

$ laravel new myapp

f:id:paiza:20180216003112p:plain

画面左側のファイルファインダを見ると、"myapp"というディレクトリが作られています。フォルダをクリックして、中を見てみましょう。

f:id:paiza:20180216005011p:plain

Laravelアプリケーションに必要なファイルが作られています。

なお、"laravel new"コマンドの代わりに、以下のようなcomposerコマンドでもプロジェクトが作成できます。 

$ composer create-project laravel/laravel myapp --prefer-dist

また"laravel new"コマンドの実行前に以下のような設定をしておけば、インストールが早くなります。 

$ composer config -g repositories.packagist composer 'https://packagist.jp'
$ composer global require hirak/prestissimo

アプリケーションサーバの起動

このアプリケーションは、もうこの時点で動かすことができます。実際に動かしてみましょう！

"cd myapp"コマンドでディレクトリを移動したあと、"php artisan serve"とコマンドを入れてみます。

$ cd myapp
$ php artisan serve

f:id:paiza:20180216005150p:plain

画面の左側に、"8000"と書かれたボタンが追加されました。

f:id:paiza:20180216005220p:plain

Laravelの開発環境では、8000番ポートでサーバが起動します。PaizaCloudでは、この8000番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、Laravelについてのページが表示されました!

f:id:paiza:20180216005704p:plain

[注記]
なお、LaravelのサーバはHTTPで動作していますが、PaizaCloudではこれをHTTPSに変換しています。またサーバはlocalhostで動作していますが、PaizaCloudでは"https://localhost-サーバ名.paiza-user.cloud:ポート番号"というURLでlocalhostに接続できるようになっています。


[注記]
サービスを公開して他のユーザやデバイスからもアクセスできるようにする場合、"php artisan serve --host=0.0.0.0"コマンドで 外部ネットワークから接続できるようにします。
さらにポート番号を指定せず、 https://ホスト名/ や http://ホスト名/ としてアクセスできるようにする場合、"sudo php artisan serve --host=0.0.0.0 --port=80"コマンドで、ポート番号に80を指定します。80番でウェブサーバ(Apache)が起動している場合は"sudo service apache2 stop; sudo systemctl disable apache2”コマンドでウェブサーバを停止します。

ファイルの編集

表示されているのは、プロジェクトディレクトリ("myapp")の下の"resources/view/welcome.blade.php"というファイルです。

試しにタイトルを変更するために、ファイルを編集してみましょう。

ファイルの編集は、画面左側のファイルファインダからファイルを選択してダブルクリックします。

"myapp/resources/view/welcome.blade.php"を開いて編集してみましょう。

f:id:paiza:20180216005750p:plain

＜div class="title m-b-md"＞に囲まれた、タイトル部分を変更してみましょう。

myapp/resources/view/welcome.blade.php:

                <div class="title m-b-md">
                    Hello Laravel on PaizaCloud!
                </div>

f:id:paiza:20180216005922p:plain

編集したら、「保存」ボタンを押すか、「Command-S」または「Ctrl-S」で保存します。

データベースを作成

今度はこのアプリケーションで、データベースを使ってみましょう。

データベースサーバ(MySQL)はサーバ作成時に設定したので起動していますが、設定していない場合は、以下のように起動しておきましょう。

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

まずはMySQL上に、このアプリケーションで使うデータベースを作成します。

ここでは、mysqlコマンドを使って、"mydb"というデータベースを作ります。

以下のようなコマンドを実行します。

$ mysql -u root
create database mydb;

f:id:paiza:20180216010049p:plain

データベースが作成できました。

次に、アプリケーションでこのデータベースを使うように設定します。

データベースの設定はプロジェクトファイルの下の".env"というファイルでおこないます。

この".env"のような、ドット(".")で始まるファイルは隠しファイルで、ファイル管理ビューでは表示されていません。表示するためには、ファイル管理ビューの右クリックメニューから"隠しファイルを表示"を選びます。

f:id:paiza:20180216010145p:plain

".env"ファイルが表示されたら、ファイルを開き、"DB_DATABASE"、"DB_USERNAME"、"DB_PASSWORD"の3行を設定します。

パスワードは設定していませんので、"DB_PASSWORD"はコメントアウトしておきます。

myapp/.env:

DB_DATABASE=mydb
DB_USERNAME=root
# DB_PASSWORD=secret

テーブル、モデル等の作成

アプリケーションでこのデータベースを使う準備をします。

Laravelでは、データベースのテーブルや、関連するモデル、コントローラなどを"php artisan make:model"コマンドで作成することができます。

以下のコマンドを実行してみましょう。"-m"でマイグレーションファイルを作成し、"-c"でコントローラを作成し、"-r"でリソース操作に関連したメソッドも作成します。

$ php artisan make:model Task -m -c -r

これで以下のようなファイルが作成されました。

ファイル名 役割
database/migrations/2018_xx_xx_xxxxxxxx_create_tasks_table マイグレーションファイル
app/Task.php モデル
app/Http/Controllers/TaskController.php コントローラ

マイグレーションファイルでは、テーブル情報を設定しています。タスク名を表す文字列型のnameというカラムを追加してみましょう。

以下のように、マイグレーションファイルのSchema::create()呼び出しの中に、"$table->string('name');"を追加します。

database/migrations/2018_xx_xx_xxxxxxxx_create_tasks_table:

    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

f:id:paiza:20180216010508p:plain

編集できたら、このマイグレーションファイルを実行して、テーブルを作成します。

$ php artisan migrate

テーブルが作成されました。なお、マイグレーションファイルを編集したあと、再度最初からテーブル作成を実行する場合は、"php artisan migrate:refresh"を実行します。

作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。

PaizaCloudのブラウザ上で"http://localhost/phpmyadmin/"と入れてみましょう。

f:id:paiza:20180216010802p:plain

ルーティング設定

タスクリストでは、一覧表示、タスクの追加、タスクの削除の３つの操作を行います。

それぞれ、以下のようなルーティングを割り当てます。

メソッド パス名 操作
GET /tasks タスク一覧表示
POST /tasks タスク追加
DELETE /tasks/{id} タスク削除

ルーティング設定は"routes/web.php"で行います。トップページは"/tasks"にリダイレクトする設定にしておきます。また、すでに設定されているルーティングは削除しておきます。

以下のように、"routes/web.php"を設定します。

routes/web.php:

Route::get('/', function(){return redirect('/tasks');});
Route::get('/tasks', 'TaskController@index');
Route::post('/tasks', 'TaskController@store');
Route::delete('/tasks/{id}', 'TaskController@destroy');
\URL::forceScheme('https');

コードを見ていきましょう。Route::getはGETメソッドの設定で最初の引数はパスになります。

2番目の引数では、関数またはコントローラのアクションを設定します。

'GET /'に対しては、'/tasks'にリダイレクトします。

'GET /tasks'に対しては、TaskControllerコントローラのindexメソッドを呼び出す設定にします。

'POST /tasks'に対してはTaskControllerコントローラのstoreメソッドを、'DELETE /tasks/{id}'に対してはTaskControllerコントローラのstoreメソッドを呼び出す設定にします。

"{id}"のように記述することで、この部分の文字をプログラムから取得することができます。たとえば、"/task/1"の場合、"1"を$idとして取得できます。

また、PaizaCloudではHTTPSプロトコルを使いますので、"\URL::forceScheme('https')"で設定しておきます。この設定を行わないと、redirect()などが正しく行えません。

念のため、アプリケーション全体設定でも、HTTPSを使うように設定しておきます。アプリケーション全体の設定は、AppServiceProvider.phpのboot関数で設定できますので、以下のように記述しておきます。

app/Providers/AppServiceProvider.php;

class AppServiceProvider extends ServiceProvider
{
    ...
    public function boot()
    {
        \URL::forceScheme('https');
    }
    ...
}

コントローラ設定

ルーティングから呼び出されるコントローラのコードを記述しておきます。

一覧表示、追加、削除に対応する、index()、store()、destroy()関数を書いておきます。

app/Http/Controllers/TaskController.php:

<?php

namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks', ['tasks' => $tasks]);
    }

    public function store(Request $request)
    {
        $task = new Task;
        
        $task->name = request('name');
        $task->save();
        return redirect('/tasks');
    }

    public function destroy(Request $request, $id, Task $task)
    {
        $task = Task::find($id);
        $task->delete();
        return redirect('/tasks'); 
    }
}

コードを見ていきましょう。

Taskモデルのクラスを"Task"として扱えるように"use App\Task;"とuse文を追加されています。この記述がないと、以後"Task"の部分を"\App\Task"のような表記で記述する必要があります。

一覧表示を行うindex()メソッドでは、TaskモデルのTask::all()メソッドを呼び出して、全てのタスクをデータベースから取得します。

取得したデータは連想配列(ハッシュ)に、'tasks'という名前のキーで設定します。これにより、ビュー(HTMLテンプレート)から$tasksという変数でタスク一覧が参照できるようになります。

タスク追加を行うstore()メソッドでは、Taskのオブジェクトを作成してnameプロパティにフォームから送信されたnameパラメータを設定し、$task->save()メソッドでデータベースに保存します。そして'/tasks'にリダイレクトして一覧表示を行います。

タスク削除を行うdestroy()メソッドでは、タスクモデルのTask::find()メソッドを呼び出して、タスクID($id)に対応するオブジェクトを取得します。$task->delete()で削除し、'/tasks'にリダイレクトします。

ビュー(HTML)の作成

次に、ビューを作成しましょう。ビューはHTMLファイルにPHPのコードを埋め込んで記述します。

Laravelでは、Bladeというテンプレートを用いることで、PHPをより簡潔に記述することができます。

ビューは1ファイルに記述してもいいのですが、複数のページに共通の内容は共通のレイアウトファイルを用意すると便利ですので、レイアウトファイルを作成してみます。

レイアウトファイルは"resources/views/layout.blade.php"という名前で作成します。

"resources/views"フォルダを右クリックして「新規ファイル」を選び、"layout.blade.php"ファイルを作成します。

作成したファイルは以下のように記述します。

resources/views/layout.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Task List</title>
        <!-- CSS And JavaScript -->
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
        <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
        <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

見栄えがよくなるように、シンプルなMilligramという簡単なCSSフレームワークを設定しておきました。

Milligramでは、クラス名を書かなくてもある程度HTMLをきれいに表示できます。

bodyタグの中では@yield('content')と書いてあります。この部分が、個別のページのHTMLファイルで置き換える部分です。

それでは、タスク一覧表示と、タスク追加のためのHTMLファイルを"resources/views/tasks.blade.php"という名前で作成します。

"resources/views"フォルダを右クリックして「新規ファイル」を選び、"tasks.blade.php"ファイルを作成します。

resources/views/tasks.blade.php:

@extends('layout')

@section('content')
    <h1>Task List</h1>
    <form action="/tasks" method="POST" class="form-horizontal">
        {{ csrf_field() }}
        <!-- Task Name -->
        <div class="form-group">
            <label for="task" class="col-sm-3 control-label">Task</label>
            <div class="col-sm-6">
                <input type="text" name="name" id="task-name" class="form-control">
            </div>
        </div>

        <!-- Add Task Button -->
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-6">
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-plus"></i> Add Task
                </button>
            </div>
        </div>
    </form>

    <!-- Current Tasks -->
    <h2>Current Tasks</h2>
    <table class="table table-striped task-table">
        <thead>
            <th>Task</th><th>&nbsp;</th>
        </thead>

        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <!-- Task Name -->
                    <td>
                        <div>{{ $task->name }}</div>
                    </td>
                    <td>
                        <form action="/tasks/{{ $task->id }}" method="POST">
                            {{ csrf_field() }}
                            {{ method_field('DELETE') }}                    
                            <button>Delete Task</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

編集できたら保存ボタンを押してファイルを保存します。

ファイルを見ていきましょう。@content('layout')は、レイアウトファイル('layout.blade.php')を利用することを指定しています。

@section('content')から@endsectionの部分では、このページ独自の内容を記述します。この中身がレイアウトファイルの@yield('content')部分を置き換えます。

最初のフォームはタスク追加のためのフォームです。LaravelではCSRF対策のためフォームには"{{ csrf_field() }}"と記述する必要があります。

inputタグでは、nameという名前でタスクの名前を入力できるようにします。フォームの送信先は"POST /tasks"に設定します。

タスク一覧では、$tasks配列でタスク一覧オブジェクトにアクセスできます。「@foreach ($tasks as $task)」はBladeの記法で、PHPでの「<?php foreach($tasks as $task){ ?>」にあたり、$tasks配列からタスクオブジェクトを１つずつ取得して$task変数に設定します。

「{{ $task->name }}」もBladeの記法で「{{}}」の中身を表示します。PHPの「<?= $task->name ?>」にあたります。ここでは、タスクのnameプロパティを取得することで、データベースのnameカラムの値を表示します。

"Delete Task"ボタンでは、"DELETE /tasks/{id}"を呼び出すことで、タスクを削除します。HTMLでは直接DELETEメソッドは扱えないので、"method_field('DELETE')"で擬似的にDELETEメソッドとして呼び出します。

モデルファイル

モデルファイルの中身も見てみましょう。以下のようにクラスの中身は空っぽです。

実は、特に設定する必要はありません。LaravelのモデルはEloquentと呼ばれるORMが利用でき、テーブルのカラム名から自動的にプロパティ名を設定しています。便利ですね。

app/Task.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

動作確認

プログラムは以上です。実際に動かしてみましょう。

ブラウザアイコン(8000)をクリックして、PaizaCloud内のブラウザを起動します。

最初はタスクはないのですが、"Task List"ページが表示されています。

タスクの追加や削除もやってみましょう。

f:id:paiza:20180216011331p:plain

動きましたね！Laravelで作ったタスクリストの完成です!

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的に動かしたい場合は、ベーシックプランへアップデートしてください。

詳しくはこちら https://paiza.cloud

まとめ

というわけで、PaizaCloudを使って、開発環境を構築することなく、ブラウザだけでLaravelのウェブアプリケーションを作ってみました。

すぐに作れるので、みなさんもぜひ試してみてください！

(何かサービスができたらpaiza(@paiza_official)まで教えてくれるとうれしいです！)

「PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

paizaのおすすめコンテンツ

CGC codemonster プログラミングゲーム「初恋プログラミング研究会 ～海に行こうよ～」 CGC codemonster プログラミングゲーム「コードモンスター大図鑑 プログラミングでゲットだぜ！」 paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.