Symfony Best Practice 訳してみた - Chapter10 - - ぜんまい(手巻き式)ブログ

Symfony Best Practiceの翻訳をしてます。９日目−２です。

前回の記事

hanahirodev.hatenablog.com

※多分に意訳が入っておりますので、誤訳がある場合はご指摘ください。

※読み進めていくSymfony Best Practiceは 2016/10/23時点の情報です。

※写経をする場合は、事前にPHPの実行ができる環境をご用意ください。

3行まとめ

Standard Edition ではSymfony2.8~ Asseticは標準搭載ではなくなった。
フロントエンドアプリケーションを作るのでなければ、Asseticを使う。
AsseticはTwigのタグで囲むだけで簡単に圧縮・最小化ができる。

第１０章 Webアセット

アセットとは、CSS、JavaScript、イメージファイルのように、フロントエンドの見た目と操作を構成するものです。これまでは、バンドルごとのResources/public/ディレクトリ配下に配置していました。

web/ディレクトリ配下にアセットを格納しましょう。

バンドルごとにアセットを格納して散らばった状態では、管理が難しくなります。デザイナーにとっては１カ所に配置されている方がずっと幸せです。リンクが簡潔になるので、テンプレートファイルもアセットと一緒にしておくのが良いでしょう。

<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />

{# ... #}

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>

web/は公開ディレクトリであることを忘れないでください。配下に格納されているファイルは変換前のファイルであってもアクセスできてしまいます。(例：Sass, LESS ,CoffeeScript)

アセティックを使う

Symfony2.8からアセティックはSymfonyスタンダードエディションでは標準搭載されていません。インストールと有効化の方法はドキュメント*1を確認してください。

最近では、静的なCSSやJavaScriptを作ってテンプレートに読み込むということはしないかもしれません。その代わりにクライアント側の性能を出すために、結合してミニファイした状態で使いたいかもしれません。あるいはLESSやSassを使いたいかもしれません。ということは、アセットをCSSに変換する方法が必要になるということです。実現するためのツール、例えばGruntJSのようにフロントエンド用(PHPではない)ツールは、たくさんあります。

Webアセットをコンパイルして、結合、最小化するのにGruntJSのようなフロントエンドツールに満足いかないのであれば、アセティックを使いましょう。

アセティックはLESS、Saas、CoffeeScriptといった様々な技術で開発されたアセットをコンパイルすることができるアセットマネージャーです。アセティックでアセットを統合するには、１つのTwigタグで全てのアセットを囲みます。

{% stylesheets
    'css/bootstrap.min.css'
    'css/main.css'
    filter='cssrewrite' output='css/compiled/app.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{# ... #}

{% javascripts
    'js/jquery.min.js'
    'js/bootstrap.min.js'
    output='js/compiled/app.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

フロントエンドベースのアプリケーション

近年、AngularJSのようなAPIと通信するフロントエンド技術が一般化してきています。そういったアプリケーションを作る場合は、BowerやGruntJSのような、それぞれの技術で推奨されているツールを使うようにしてください。フロントエンドアプリはSymfonyとは分けて(リポジトリすら分けて)開発するべきです。