Angular入門その1

JavaScriptのフレームワークの1つ、Angular。今の所は勉強中といったところですが、これから自己学習を兼ねて何回かに分けてAngularについて投稿していこうと思います。
使い方的にはVue.jsと似ているところもあるようですが、AngularはTypeScript(JavaScriptをわかりやすく改良したもので、これをコンパイルするとJavaScriptになる)を使うことが推奨されているので、それについても別途記事を書こうかと。ちなみに、もともとAngularJSと呼ばれていたものが、JavaScriptでなくTypeScriptが推奨されるようになってからJSが外れてAngularと呼ばれるようになったようです(なので、上でJavaScriptのフレームワークと書いていますが、フロントエンドのフレームワークといった方が正確なのかもしれないです)。
なお、Vue.jsの入門記事は その1 その2 その3 (近いうちにこちらに移転します)

1. 環境構築
Angularは、一般的には「Angular CLI」というコマンドラインツールを使って環境構築することが多いようです。流れとしては、ざっとこんな感じです。
i) Node.jsをインストール
とりあえず、Macなら

でOK。Homebrewが入ってなければそれを入れるのが先だけど。
WindowsならNode.js公式ページからインストーラを落としてそれでインストールすればいいかと。

ii) TypeScriptをインストール

Node.jsインストールでnpmも使えるようになっているはずなので、npmを使ってインストールします。もしかしたらsudoでやる必要があるかも。

iii) Angular CLIをインストール

こちらも、同様にnpmを使ってインストールします。これで、ngコマンドでAngularのコマンドラインツールを使えるようになります。

iv) プロジェクトを作成
例えば、AngularTest1という名前のプロジェクトを作成するとします。

これで、こんな感じのソースコードができます。
ここからさらに

で、ローカルにサーバーが立ち上がり、こんな感じの画面が出てきます。

ただ、他のサイトとかだと
「Welcome to app!」
と出て、下に大きなAngularのアイコンが表示されてるのを見たけど、バージョンが違うのかな?もしくはどっかで操作を誤ったか(汗)

2.ソースの中身の簡単な解説

一番上のindex.htmlにapp-rootというものがありますが、これはコンポーネントといって、Vue.jsでもありましたが、1つの部品のようなものにするものです。
main.tsでapp/app.module.tsが呼ばれ、app/app.module.tsでapp/app.component.tsが呼ばれ、app/app.component.tsで実際のコンポーネントを定義するという流れになります。
なので、app/app.component.tsのtitleを変えれば、表示される文字列も変わってくることになります。

ここまでざっと書いて見たけど、次回はもう少し詳しく説明しようと思います。

LaravelとVue.jsで多言語対応を行う

今回は、LaravelとVue.jsを用いたプロジェクトで多言語対応を行うやり方を紹介します。
まず、resources/langに対応する言語のjsonファイルを置きます。とりあえず、日本語と英語を想定してja.json,en.jsonとします。

ja.json

en.json

次に、Laravelのbladeで表示する方法です。

index.blade.php

1つ目の方法は__ヘルパ関数を使用する方法です。翻訳文字列のキーを翻訳したものに変換するヘルパ関数です(Laravel標準のヘルパ関数なのでbladeだけでなく、モデルやコントローラでも使えます)。これで変換した文字列をMustache記法でechoします。
もう1つの方法はbladeの@langディレクティブを用いる方法です。このように2通りの書き方ができますが、どちらかに統一したほうがわかりやすいかもです。

次に、Vue.jsでの多言語対応の方法です。
vue-i18nというVue.jsのプラグインを使います。vue-i18nについての詳しい説明はこことかここを読んで下さい。
まず、

でvue-i18nをインストールします。
次に、こんな感じでvue-i18nをjs側で読み込みます。

main.js

MainComponent.vue

これで、Vue.jsで多言語表示ができるようになります。

ただ、1つ問題がありまして、vue-i18nでは第一階層のデータしか読み込めないので、

ja.json

en.json

のようなデータがこのままでは読み込むことが出来ないのです。
その場合は以下のように一旦blade側で加工してからコンポーネントに渡します。

index.blade.php

main.js

MainComponent.vue

自分はこんな感じのやり方でやりました(もしかしたらもっといいやり方もあるかもしれないので、他にいいやり方があれば教えていただければと思います)。

また、今回は言語切替機能については触れませんでしたが。そのあたりについてはこちらが参考になりました。

Axiosのファイル送信でハマった話

今月こそはVuexについてまとめようと思っていたのですが、Vuexについてはじっくり余裕を持って書けるときに書きたいということで、今回はAxios(Ajaxリクエストを送るためのpromiseベースのHTTPクライアント)でファイル送信を行うときにハマった話を書こうと思います。

今回やろうとしたのは、画像ファイルとかも含む編集画面で、例えばVue.jsでモーダルの編集フォームを作って、PATCHメソッドでAjaxで編集内容を送信するというケースでした。
まず、下記がうまくいかないケースです。

そしたらフォームが空になっていました(大汗)。
何故うまくいかないかわかりますか?
正解はaxiosのメソッドにはgetとかpostとかはあってもpatchというメソッドは用意されていないのです。
PHPがPOSTメソッド以外ではapplication/x-www-form-urlencodedやmultipart/form-dataで渡されたパラメタの処理をしてくれない仕様だから
です。(2018/9/9 一部修正、こちら参照)なので、どうしてもpatchで送りたいときは、下記のようにします。

axiosのメソッドとしてはpostだけど、送る時のデータにpatchメソッドであるという情報を含めるのです。
これで一安心です。

ちなみに、今回のはなかなか気が付かず、かなり悩んだのですが、色々ググってこちらのページに行き着いてようやくわかったというものです。
Laracasts様に本当に感謝。