hkのweblogスマートフォン用の表示で見るhkのweblogひよっこエンジニアがにわとりになるまでの軌跡この広告は、90日以上更新していないブログに表示しています。PHP月2回更新を目標としながら丸1ヶ月ブログの更新をサボってしまいました...気を取り直して更新を再開していきます...最近、個人的にLaravelとVue.jsを組み合わせてSPA的なサイトを作っています。LaravelもVue.jsも初めて扱うのでそこそこ苦労していますが、新しい技術を学ぶのはやっぱり楽しいものです。以前、「Vagrant上にLaravelの開発環境を作る」という記事を書きましたが、これからしばらくはLaravelとVue.jsでサイトを作りながら気付いたことや学んだことを書いていこうと思います(たぶん他のことも書くけど)。今日は手始めにLaravelのmodelのリレーションあたりについて書いてみようと思います。modelの生成まずはmodelを作るところからスタートです。DBにあらかじめ以下のような2つのtableが用意されているとします。銭湯の基本情報と銭湯の位置情報の2つのテーブルです。1件のレコードに対して1件のレコードが対応する最もシンプルなhasOneのパターンです。139.705160これもLaravelのmigrateで作ればOKですが、長くなるので今回は割愛します。モデルは職人さんが作ってくれます。SentoInfo同様にSentoMapも作ります。デフォルトではappのすぐ下にmodelが生成されるのですが、以下のようにパスを追加してやるとちゃんとフォルダの下に入れてくれます。次に生成したモデルをDBと紐付ける必要があります。'sento_code';}鍵となるのは最後の2行です。Laravelはデフォルトではテーブル名としてmodel名の複数形(この場合はsento_infos)、primaryKeyとしてidを指定してくれます。今回のように別名を付けている場合は必ずこのように明示してやる必要があります。SentoMap.phpの方も同じようにDBと紐付けておきます。}}リレーションを設定するようやく本題のリレーションの設定です。hasOneの第1引数に紐付けるモデルのパス、第2引数にforeignKeyを設定します。foreignKeyの方を忘れるとControllerから引っ張る時に正しいクエリを生成してくれなくてエラーになります。Controllerから呼び出してみるまずはapi.phpの方にルーティング情報を書いてみます。叩くとsento_code=2でAPIが返ってきます。このAPIをVue側で取得してテンプレートに埋め込んで表示するわけですが、そのあたりはまた次回にでも書こうと思います。次にSentoController.phpです。コントローラーも職人さんが生成してくれます。SentoControllerで、生成されたSentoController.phpにdetailメソッドを書き加えます。loadingと呼ばれるもので、SentoInfoをロードする段階でSentoMapも先に取得してしまう処理を指しています。このやり方をしないとsento_mapの列の数だけクエリが発行されることになるため無駄な負荷がかかってしまうようです。今回は1対1のhasOneなのでこだわる必要性は薄いかもしれませんが、スピード面やクエリの発行回数で課金されるような状況を考えると、このやり方をしておいた方が良さそうです。find(primaryKey)でそのprimaryKeyを持ったレコード1件を取得できます。}}こんな感じでjsonが返ってくれば成功です。今日はとりあえずこんなところで。次回は返ってきたjsonをVue.jsの方で扱う記事でも書きたいと思います。2.1でSPA的なものを作っている話のつづき少し間が空きましたが、前回の記事の続きです。»プロフィールid:h2r4t都内で働く新米webエンジニアです。このブログは月2更新が目標。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事Bingの検索結果をcsvで出力するPythonスクリプトを書いたcanvasで画像ファイルを読み込むVue.jsでsetTimeoutする時の注意点rsyncについてのメモスレッドが競合した時のこと月別アーカイブはてなブログをはじめよう!h2r4tさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。