Vue.jsをはじめよう・その2

遅くなりましたが、前回の続きです。
前回はブラウザ上でVue.jsを実行しましたので、今回はもう少し踏み込んだやり方を紹介します。

大きな流れとしては以下の通りです。

  1. プロジェクトの準備
  2. 必要なパッケージのインストール
  3. JSのビルド準備
  4. コンポーネントの定義
  5. Vue.jsファイル作成
  6. ビルド実行
  7. HTMLを作成して確認

ちなみに、Go to Everyone!のメンテナンスツールでも似たようなことをやっています。

1. プロジェクトの準備

今回は簡単なサンプルとして、「ご注文はうさぎですか?」のメインキャラ5人のプロフィールを表示します。
テーマに深い意味はありません。個人的な趣味です(笑)。

もろもろ準備するために、Node.js(とnpm)をインストールします。
Node.js

インストール後、パスが通っていれば以下コマンドでバージョンが確認できます。

適当なフォルダを作成し、以下コマンドでプロジェクトの初期化をします。

色々聞かれますが基本的にEnter連打で問題ありません。
()内はデフォルト値です。

「package.json」が生成されればOKです。

2. 必要なパッケージのインストール

以下コマンドでパッケージをインストールします。
最近はこういう依存管理ツールが多くてとても助かりますね。

パッケージを色々指定していますが、これについてはあまり触れません。
簡単に説明すると以下の通りです。
webpack…ビルドツール
vue-loader、css-loader、vue-template-compiler…vueファイルをwebpackで扱うために必要
buble…ブラウザが認識できるJSに変換

–save-devはpackage.json内の開発用依存パッケージ:devDependenciesに追加してねという指定です(指定が無いと本番用の依存パッケージ:dependenciesに追加されます)。

3. JSのビルド準備

webpackでJSをビルドする設定を記載します。
プロジェクトのルートディレクトリに「webpack.config.js」を作成し、以下を記載してください。

「package.json」には簡単なスクリプトを記載することができます。
ここに、ビルド用のスクリプトを記載しておきます。

4. コンポーネントの定義

キャラクターの情報を表示する箇所は再利用可能なので、コンポーネントに分割することで冗長さを無くします。
assets/jsapp.vueを作成します。
今回は血液型に応じて背景色をつけるようにしてみます。

v-forはループ処理です。
.vueファイルではtemplateに利用するHTML、scriptにJS、styleにCSSを書き、このファイル内の閉じたスコープで状態を管理できます(厳密にはJSやCSSプリプロセッサでも記載可)。
propsは親から受け継ぐプロパティです。

5. Vue.jsファイル作成

assets/jsapp.jsを作成します。

一番上のimport文はES2015で利用できる他モジュールの指定方法です。
前回は<script>タグで呼び出していたVue.jsのコアライブラリをここで呼び出します。

また、componentsで先ほど作成した.vueファイルを読み込みます。
HTMLのタグにこの値を使ってデータをバインドしますが、JS上はキャメルケース(girlData)、HTML上はケバブケース(girl-data)になることが注意点です。

6. ビルド実行

先ほどpackage.jsonで定義したファイルをここで実行します。

public/jsapp.jsが生成されればOKです。

7. HTMLを作成して確認

プロジェクトルートにindex.htmlを作成します。

ここで先ほど生成したjsファイルを読み込んでいます。
:girlsはコンポーネントに対して渡す値です(app.vue側propsで受け取っていた値です)。


index.htmlを開き、上記のように表示されればOKです。

かなりざっくり見てきましたが、いかがでしょうか。
webpackで変更を監視するとか、コンポーネント間でデータをやりとりするとか、本格的にやるならもっとたくさんのことができます。
今後も気になったことは随時ここで展開していこうと思います。

なお、今回のサンプルソースは以下にあります。
Github

↓当サイトのドメインは以下で取得しました。

Vue.jsをはじめよう・その1

今回から何回かに分けて、「Vue.js」を取り上げます。

Vue.js

昨今、群雄割拠で情報が溢れかえっているJavaScriptフレームワークのひとつです。
JavaScript界隈だと他にAngular (from Google)とかReact (Facebook)などが有名ですが、Vue.jsも最近一気に注目されるようになりました。

「結局何が違うんよ?」というせっかちな方のために結論から言います。
とにかく既存のアプリに組み込み易いんです。

私が2003年から運用しているGo to Everyone!についても、今年に入って徐々に適用しています。
HTML・CSS→jQuery(Ajax)導入→PHPに移行→Sass・Vue.js導入といった流れで今に至ります。
で、この際jQueryからの移行がかなりスムーズに進められました。

先に挙げたようなJavaScriptフレームワークだと、基本的に「フロントの描画は俺らに任せろ!」というスタンスです。
新規開発だと「フロントはJavaScriptフレームワーク」「サーバサイドはAPI」という分業で開発しやすいとは思います。
ただ、既存のサーバサイドでビューを処理するようなシステムだと、フロントはjQueryのようにちょっとイベントを付与したいだけの場合が多いので、かえってコストが高いです。

…そこでVue.jsの出番ですよ!!!

既存のDOMの中で、特定のイベントを発生させたい・状態を管理したい・いくつかのイベントを紐づけたいケースは多いですが、jQueryだとちょっと入り組んでくると途端に影響が読めなくなります。
昨今のJavaScriptフレームワークは、「コンポーネント」という小さな塊に分割することで、閉じたスコープで状態を管理することができます。
もちろん、親(または子)へのイベントの伝播も可能ですので、コンポーネント間の連携も問題ありません。
細かいコードは次回以降にするとして、今回は簡単に「Hello world!」しましょう。

以上です。
説明するほどコードが無いのですが(笑)、簡単に触れます。

  1. scriptタグでVue.jsのライブラリを読み込む
  2. new Vue()でインスタンス生成
  3. dataの内部で変数を宣言
  4. $mountでマウント対象要素をセレクタで定義
  5. v-textで指定した変数を出力

ちなみに、変数の内容を出力するのは{{message}}でも可能ですが(他フレームワークにも同等の機能がありますね)、これだとページ表示時に一瞬{{message}}という文字が見えてしまうので、v-textで指定しています。
他フレームワークだとマウントした要素の下はすべて書き換えてしまうケースが多く、これが既存DOMと共存しにくいと感じていたので、Vueのこの仕組みはありがたいです。

次回はトランスパイル(webpack、babel)とvueファイルを利用したコンポーネントについて触れます。

↓当サイトのドメインは以下で取得しました。

フロントエンド開発は混乱する

今回はフロント寄りのお話です。

昨今、フロントエンド界隈ではいろんなライブラリやツールが出てきており、新しく学ぼうという人は何からやればいいか見当もつかないということが多いように思います。
「そもそもjQueryがあればええやん」とか「ツールの使い方覚えるの面倒やな」といった方も一定数いると思います。
私が本格的にフロントエンドで開発するようになったのは今年に入ってからですが、この数ヶ月で数えきれないほどのライブラリやツールの名前を聞きました。
ですが今、個人開発で使っているのは片手で済む程度なので、結局は環境や技術レベルなどの制約で随時必要なものを覚えていけばいいんじゃないかなと思っています。

ということで本題です。
今回はあくまでも概要の説明なので、気になった方は私のGithub・Bitbucketを参照いただくか、直接ご質問いただければよいかと思います。

npm (https://www.npmjs.com/)

Ruby→「gem」、PHP→「composer」、Python→「pip」、Java→「Maven」、C#→「NuGet」のようなイメージです。
必要なパッケージのインストールと、依存関係を解決するためのツールですね。
こいつが無いと開発が始まらないと言っても良いぐらい、よく使われています。
基本的にnode.jsで開発する際のパッケージを管理するためのものですが、フロントエンド開発にもそのまま使えます。
似たようなものにbower(https://bower.io/)というツールもあります。

Sass (http://sass-lang.com/)

CSSメタ言語と言われるものです(lessやstylusも同様)。
通常のCSSではできないクラスのネストや変数定義・条件分岐などを含めて記載することができ、作成したファイルをCSSファイルに変換するというものです。
先のnpmパッケージに「node-sass」というパッケージがあり、以下のようなコマンドを実行すればsassファイル保存時にCSSファイルを自動生成してくれます。

「-w」がwatchするためのオプションなので、これをつけなければコマンド実行時点の対象ファイル変換のみ行います。
「-o」はファイルの出力先を指定しています(他にもオプションがあります)。

webpack (https://webpack.github.io/)

一言で言うと、「いろんな生成物を指定に乗っ取ってまとめてくれるすごいヤツ」といった感じでしょうか。
例えば開発時に機能単位で分けたファイルを、実運用時のために「難読化」して「1つのファイルにまとめる」といった作業でもコマンド一発でやってくれます。

これも「node-sass」同様、ファイルの変更を監視するオプションがあります(-w)。
他にも「–colors」で出力に色を付ける、「–progress」で処理経過を出力するなどオプションが豊富です。
細かい設定は「–config」で指定したJSファイルに記載します。

gulp (http://gulpjs.com/)

開発時のルーチンワークやファイル監視などのタスクを実行するためのツールです。
webpackは複数ファイルを適切な単位でまとめる(変換する)といった作業が中心になりますが、こちらはタスクランナーに特化したツールです。
jsファイルにタスク単位で細かい作業を書いておけば、コマンド一発ですべてやってくれます。
gulpfile.jsにタスク「watch」を定義しておけば、以下で実行できます。

先のnode-sassでは入力ファイルが1つなので、複数のscssファイルを1つのファイルとして出力する場合や複数ツールを関連付けて1つのタスクとする場合に便利です(連携パッケージも多いです)。

babel (https://babeljs.io/)

モダンなフレームワークやライブラリだとes2015というJavascript仕様に則って開発することが多いですが、これは現状のブラウザでサポートされていない機能も多くあります。
これを解決するのがbabelです。
設定ファイル(.babelrc)を書いておいて、webpackやgulpとセットで使うことが多いです。

色々書きましたが、正直「こんなにツール使わなあかんならjQueryでええやん」と思いませんか。
半年近くフロントエンドに関わっていた私もほぼ同感です。
少人数での開発やクラス・モジュール設計が適切にできるようなケースではせいぜいnpmとsassだけあれば良いと思っています。
ただ、jQueryは簡単に機能が実装できる反面、テストや保守フェーズで影響が読みにくい部分が多いです。
es2015やタスクランナーを使うとブラウザで動作確認するまでにいくらか手間がかかりますが、そのあたりは開発・保守のしやすさとトレードオフかなと思っています。

結局のところ、プロジェクトに合わせて必要なものを取捨選択すればいいということに尽きますが、開発時の検討材料にしていただければ幸いです。
次回はvue.jsについて書きます。

↓当サイトのドメインは以下で取得しました。

CakePHP3で「.env」を使う

世間一般に言われる「ゴールデンウィーク」も今日が最終日ですが、皆様いかがお過ごしでしょうか。
ちなみに、私はずっと開発に集中していました。

さて、今回はCakePHP3で.envファイルを利用する方法についてここに記載しておきます。
Laravelではプロジェクトルートに「.env」ファイルを配置し、その中に設定した値を利用して環境菅野差異を吸収するという手法が取られています(このファイルはバージョン管理外とします)。

Javaを長くやってきた私は、アプリケーションサーバに設定する手法を主に使ってきたので、PHPのWebアプリで使う環境変数はすべてApacheに指定していました。
ただ、最近Webサーバをnginxに変えた際、環境変数の設定に手こずり、あげく「ほんとにこれで良いのか?」となっていました。
アプリ単位で管理するのならそれが良いのかなと今では思っていますので、同様のことをCakePHP3でも実施したというのが今回の対応です。
※ソースはこちらにもあります。

ファイルの配置

まずはプロジェクトルートに「.env」を配置します。
今回はini形式にします。

設定読み込み処理追加

リクエスト時に読み込まれるファイルに以下を記載します。
※今回私は「paths.php」に記載しましたが、「bootstrap.php」のほうが良いと思います。

これで、コード上で「.env」に定義したファイルを読み込むことができます。

ちなみに、より柔軟に対応できる「PHP dotenv」というライブラリもありますが、今回はファイル名固定かつ最低限値が読み込めればよかったので、上記対応としました。

↓当サイトのドメインは以下で取得しました。

mixにしてみる

お久しぶりです。
今回は以前苦戦したlaravel-elixir → laravel-mixにした際の手順を記載します。
同じように苦戦する方が出ないことを願って、かつ自分が忘れないためのメモです。

なお、laravel5.3以前 → 5.4以降へのアップグレードを検討している人向けです。
laravel自体のアップグレードはこちら

最近、フロントエンドはタスクランナー中心の開発が増えてきました。
laravelでは、これまでlaravel-elixirというパッケージを利用してscssやes2015・JSフレームワークの監視・公開ファイルへの変換を行っていました。
laravel5.4にて、上記に代わってlaravel-mixというパッケージが利用されるようになりました。
これまで内部的に利用していたgulpを利用せず、webpackの機能で変換処理を行っています。

手順

1. laravel-mixをインストールします。

※注意点
laravel-mixは以下を参照し、できるだけ最新のバージョンを利用してください。
古いバージョンだとsassの変換や圧縮が動作しないことがありました。
https://github.com/JeffreyWay/laravel-mix/releases

2. larave-elixir(とあれば関連パッケージ)をアンインストールします。

3. package.jsonにnpm scriptを定義します(既存のdev、prodは削除してください)。

4. package.jsonと同じディレクトリにwebpack.mix.jsを生成し、gulpfile.jsを削除します。

基本的にはこれで動作します。
個人的には、デフォルトでvuejsやreactを利用できるのはとても良いなと感じています(そのぶん依存ライブラリがとても多いですが)。

↓当サイトのドメインは以下で取得しました。