-ao- ramune blog

©2019 unio / GO2直営からふるラムネ

はじめてのSymfony4 + Vue.js

Symfonyのコントローラ作成

2018年07月05日
  • PHP
  • Symfony4
  • Vue
チュートリアル対象バージョン

コントローラの作成

Symfonyではコントローラを作ることで、「ブラウザでURLを叩くとページが開く」という基本的なWebサイトを構築できます。 まずは src/Controller/ 配下に TutorialController.php を作成して、コントローラを記述します。

Symfony4プロジェクトのディレクトリ構成
src/Controller/TutorialController.php
                
                    <?php
                    namespace App\Controller;

                    use Symfony\Bundle\FrameworkBundle\Controller\Controller;
                    use Symfony\Component\HttpFoundation\Response;
                    use Symfony\Component\Routing\Annotation\Route;

                    /**
                     * @Route("/tutorial")
                     */
                    class TutorialController extends Controller
                    {
                        /**
                         * @Route("/index", name="tutorial_index", methods="GET")
                         */
                        public function index(): Response
                        {
                            $html = <<<HTML
                    <!DOCTYPE html>
                    <html>
                    <head><title>チュートリアル</title></head>
                    <body>はじめてのSymfony4 + Vue.js</body>
                    </html>
                    HTML;

                            return new Response($html);
                        }
                    }
                
            

TutorialControllerを用意したら、ビルトインウェブサーバで実際にページを確認してみましょう。 ビルトインウェブサーバは bin/consoleserver:start で起動して、http://localhost:8000/tutorial/indexでアクセスできます。 停止する場合は server:stop を実行してください。

ビルトインウェブサーバとは

HTTPリクエストを受けつけてサイトを表示するためにはウェブサーバが必要です。 ApacheやNginxなど様々なウェブサーバがありますが、開発時にすべてを用意して構築するのは中々の手間です。 PHPには標準で、追加のインストールや複雑な設定なしで使えるシンプルなウェブサーバが実装されており、 ビルトインウェブサーバと呼ばれています。 ビルトインウェブサーバを使えばHTTP経由でPHPを実行することができます。 あくまでも必要最低限のサーバ機能なので、開発用として利用しましょう。

コンソールコマンド
                
                    bin/console server:start
                     [OK] Server listening on http://127.0.0.1:8000
                
            
http://localhost:8000/tutorial/indexのアクセス結果
ルート設定

Symfonyではルート設定を行うことでWebページに対応するURLが決まります。 ルート設定は @Route アノテーションを利用する方法と、 config/routes.yaml に記述する方法の2パターンがあります。

@Routeアノテーションを使う方法
                    
                        /**
                         * @Route("/tutorial")
                         */
                        class TutorialController extends Controller
                        {
                            /**
                             * @Route("/index", name="tutorial_index", methods="GET")
                             */
                            public function index(): Response
                    
                

クラスとメソッドの両方にアノテーションを設定するとURLが階層構造になります。 クラスは"/tutorial"でコントローラは"/index"なので、 /turorial/index でアクセスするとindexメソッドが発火します。 またname="tutorial_index"methods="GET"のように、URLパス以外のプロパティも設定できます。

プロパティ 説明
name ルート名。twigやRouterURLを生成するときの参照名として使える。
methods 受け付けることのできるHTTPメソッドの種類。
プロファイラツールバー

ページの下部にあるツールバーは、Symfonyのプロファイラ機能です。 Symfonyプロファイラは非常に強力で、パフォーマンスからDoctrineのSQL実行ログなど、デバッグに必要な情報を確認できます。 非常に多くの情報を確認することができるので、本番環境での利用は避けましょう。

ツールバーを表示させたくない場合は、 config/packages/dev/web_profiler.yaml のtoolbar設定をfalseにします。

config/packages/dev/web_profiler.yaml
                    
                        web_profiler:
                            toolbar: false
                            intercept_redirects: false
                        framework:
                            profiler: { only_exceptions: false }
                    
                
実行環境設定について

Symfony4はデフォルトでDotenvがバンドルされており、 実行環境に応じてDBの接続設定やプロファイラ設定を切り替えることができます。 実行環境の設定は.envファイルのAPP_ENVで行います。

.env
                    
                        # This file is a "template" of which env vars need to be defined for your application
                        # Copy this file to .env file for development, create environment variables when deploying to production
                        # https://symfony.com/doc/current/best_practices/configuration.html#infrastructure-related-configuration

                        ###> symfony/framework-bundle ###
                        APP_ENV=dev
                        ...
                    
                

.envファイルは環境依存かつ機微情報(DBのパスワードなど)が含まれるため、デフォルトでgitignoreされています。 代わりにテンプレートとなる.env.distが用意されており、 composer install時にテンプレートを元にした.envファイルが作成されます。

twigテンプレートの利用

Controllerに直接HTMLを書いても間違いではありませんが、PHPコードの見通しも悪く運用も大変になるので、大抵はテンプレートを導入して開発を行います。 Symfony4ではtwigと呼ばれるテンプレートエンジンが推奨されているので、さっそく利用してみましょう。 templates/tutorial/ 配下に index.html.twig ファイルを作成します。

templates/tutorial/index.html.twig
                
                    <!DOCTYPE html>
                    <html>
                    <head><title>チュートリアル</title></head>
                    <body>はじめてのSymfony4 + Vue.js</body>
                    </html>
                
            

次はTutorialControllerを少し修正します。 @Template アノテーションの追加と、returnを Response から array に変更します。

src/Controller/TutorialController.php
                
                    <?php
                    namespace App\Controller;

                    use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
                    use Symfony\Bundle\FrameworkBundle\Controller\Controller;
                    use Symfony\Component\Routing\Annotation\Route;

                    /**
                     * @Route("/tutorial")
                     */
                    class TutorialController extends Controller
                    {
                        /**
                         * @Route("/index", name="tutorial_index", methods="GET")
                         * @Template
                         */
                        public function index(): array
                        {
                            return [];
                        }
                    }
                
            

このようにテンプレートを利用すると、コントローラとHTMLを分離して開発できるのでコードの見通しがよくなります。 http://localhost:8000/tutorial/index にアクセスすると、先程と同じページが表示されます。

テンプレート設定

@Template を引数無しで利用すると、クラスの名前空間と関数名に対応するtwigファイルを利用します。 今回は App\Controller\TutorialControllerindex()関数 なので、 templates/tutorial/index.html.twig が自動で適用されます。 また、下記コードのようにtwigファイルを指定することもできます。

                    
                        @Template("tutorial/index.html.twig")
                    
                

@Template は非常に便利ですが、各関数で1つのテンプレートしか設定できません。 テンプレートを複数出し分けたい場合や、そもそもアノテーションを利用しない場合は、下記のようにしてtwigテンプレートを呼び出すことができます。

                    
                        <?php
                        namespace App\Controller;

                        use Symfony\Bundle\FrameworkBundle\Controller\Controller;
                        use Symfony\Component\HttpFoundation\Response;
                        use Symfony\Component\Routing\Annotation\Route;

                        /**
                         * @Route("/tutorial")
                         */
                        class TutorialController extends Controller
                        {
                            /**
                             * @Route("/index", name="tutorial_index", methods="GET")
                             */
                            public function index(): Response
                            {
                                return $this->render('tutorial/index.html.twig');
                            }
                        }
                    
                

次のチュートリアルでは、Vue.jsを使った簡単なページを作成します。

プロフィール画像
なかのひと:unio

数十年前の牧歌的なインターネッツが好きだった、永遠のモラトリアム人。 ただ、モラトリアムしててもお金は増えないので、しゃかいの厳しさを斜め後ろから眺めつつほそぼそと生活しています。

Twitter GitHub
[広告]