[Laravel][Vue.js] Laravel + vue で郵便番号から住所を取得

バージョン

Laravel 5.8
Vue.js 2.6.10

概要

郵便番号-住所検索API (zipaddress.net)の外部APIを呼び出して郵便番号から住所を取得する。
※なぜこの方式を採用したのかは最後に記載します。

以下の流れになる。

1. vueから自サイトのAPIを呼び出してLaravel側のコントローラーを呼ぶ
2. サーバー側（Laravelのコントローラー）から外部API（zipaddress.net）を呼び出す（CORS対策）
3. 外部APIの結果をJSONデコードしてvueに返す

コード

◾️vue

<template>
  〜〜略〜〜
  <input v-model="zipcode" />
  <input v-model="state" />
  <input v-model="city" />
  <input v-model="address_1" />
  〜〜略〜〜
</template>
<script>
export default {
  data() {
    return {
      zipcode: "",
      state: "",
      city: "",
      address_1: ""
    };
  },
  watch: {
    zipcode: function(val) {
      if (7 != val.length) {
        return;
      }

      let self = this;
      // 自サイトのAPI
      let url = "/ajax/zipcode/" + val;
      axios.get(url).then(function(response) {
        if (response.data.success) {
          self.state = response.data.response.pref;
          self.city = response.data.response.city;
          self.address_1 = response.data.response.town;
        }
      });
    }
  }
</script>

◾️Laravel側のcontroller（GET:"/ajax/zipcode/" + val　呼び出し）

    /**
     * 郵便番号情報取得
     */
    public function getZipInfo(Request $request, $zipcode)
    {
        // 外部API呼び出し
        $handle = curl_init("https://api.zipaddress.net/?zipcode=" . $zipcode);
        curl_setopt($handle, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1);
        curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);

        $result = curl_exec($handle);
        curl_close($handle);

        $contents = (array)json_decode($result, false);
        if (!$contents) {
            return response()->error('取得失敗');
        } elseif ($contents['code'] != 200) {
            return response()->error($contents["message"]);
        }

        $res = [];
        $res = $contents['data'];
        
        return response()->success($res);
    }

なぜこの方式なのか？

• 自前DBに郵便番号と住所のデータを格納する方式 定期的に日本郵便のサイト（郵便番号データダウンロード - 日本郵便）から
  データを取得し、自前DBに格納するのがおそらくベストだが
  「定期的に集計する運用コスト」、「０からの構築スピード」を考えて今回は見送った。
  ただし、本方法であればサイトをスケールアップする際にLaravel側のコントローラを修正すれば対応できる。

• 他の外部APIについて YubinBango（YubinBango-core）が候補に挙がったがvueとの組み合わせでは使えないっぽい。
  以下のサイトに記載あり。
  郵便番号から住所を自動で入力する│hoge

基礎から学ぶ Vue.js

[C++][MFC] C++(VC++)でダイアログに枠無しの子ダイアログを埋め込み、フレーム管理や共通化を実現する

バージョン

C++：14

概要

例として複数のダイアログでトップエリアが同一の場合にそこを子ダイアログとして作成し、各ダイアログはそれを埋め込むだけで共通のデザインを実装できる。

要点

子ダイアログを親ダイアログで動的に生成する。
子ダイアログ自体を動的にコーディングしてもいいが、今回は予めDialogとして用意する。

コード

※記載を一部省略しています
■子ダイアログ
VSのリソースビューでDialogを新規で追加して、以下の属性を変更する。

• ID：好きなIDに。今回はIDD_CHILDにする。
• Border：なし（必要なら「細枠」にでも）
• Style：子

■親ダイアログCParent.h

    public:
        std::unique_ptr<CChild> m_child;

■親ダイアログCParent.cpp

    コンストラクタ(){
        // 子に自身のウインドウハンドラを渡せばクリック処理などで親のメソッドを呼べる
        m_child = std::unique_ptr<CChild>(new CChild(this));
    } 

    表示処理(){
        m_child->Create(IDD_CHILE, this);
        m_child->ShowWindow(WS_VISIBLE, WS_CHILD);

        // ここに子コントローラの初期処理などを記載
        m_child->ほげ();

        m_child->MoveWindow(100, 50);
        m_child->ShowWindow(SW_SHOW);
    }

子ダイアログ側の初期処理（コードのほけの部分）で子ダイアログ固有の設定をすればいい。
たとえば、動的にボタンなどを生成するなど。

Effective C++ 第3版 (ADDISON-WESLEY PROFESSIONAL COMPUTI)

[vue.js] routerでpropsに値を渡してURL遷移する

バージョン

Vue.js 2.6.10

概要

routerのpushでURL遷移する際にpropsにデータを渡す方法。

コード

◾️hoge.vue（遷移元）

<script>
export default {
    methods: {
      newPage() {
        this.$router.push({ name: "user_list" , params: {user_code : this.userid}}).catch(() => {});
      },
    }
};
</script>

◾️fuga.vue（遷移先）

<script>
export default {
  props: {
    user_code: String
  },
};
</script>

router.jsのpropsをtrueに設定する必要がある。
◾️router.js

        {
          path: "/dashboard/fuga",
          name: "dash-fuga",
          component: () => import("./views/dashbord/fuga.vue"),
          props: true
        },

Vue.js & Nuxt.js超入門

[PHP][Laravel] データベースクエリビルダ（Model）でleft joinの絞り込みon条件にパラメータを渡して複数指定する

バージョン

Laravel 5.8

概要

LEFT JOINのON条件を複数指定する。
条件にはパラメータを渡したい。

コード

◾️Model

$users = DB::table('users')
            ->leftJoin('posts as user_posts', function ($join) use ($type) {
                $join->on('users.id', '=', 'user_posts.user_id')
                ->where('user_posts.type', $type);
            })
            ->get();

パラメータはuse ($variable)で渡す。


下記のようなコードでも可能。

$users = DB::table('users')
            ->leftJoin('posts as user_posts', function ($join) use ($type) {
                $join->on('users.id', '=', 'user_posts.user_id');
                $join->on('user_posts.type', '=', $type);
            })
            ->get();

PHPフレームワークLaravel入門 第2版

[vue.js][Javascript] リアクティブに一覧表の一部の値を更新する

バージョン

Vue.js 2.6.10

概要

一例として一覧表示の該当項目行の一部の値を更新し、その内容をリアクティブに表示反映する。
指定行を削除するのはググるとヒットしやすいが行の値の一部だけを更新するのがなかったので記載する。

コード

◾️hoge.vue

<script>
export default {
    methods: {
        addGood : function (code) {
            // 該当行のデータを取得
            let data = this.data_list.find(p => p.users_code == code);
            // 変更したいプロパティ
            data.good += 1;
            // 該当行のインデックス取得
            const itemIndex = this.data_list.findIndex(p => p.users_code == code);
            // 指定インデックスを変更したデータに置き換える
            this.data_list.splice(itemIndex, 1, data);
        }
    }
};
</script>

指定行を削除する場合はfindindexで該当行のインデックスを取得してsplice(index,1)で該当行を１行削除すればいい。

Vue.js入門 基礎から実践アプリケーション開発まで

[vue.js] router.jsで登録したpathをnameから取得する（遷移させない）

バージョン

Vue.js 2.6.10

概要

pushを使えば遷移できるが、今回はパスだけ取得したいケース。
resolveを使えばパスを取得できる。URLパラメータのある場合もOK。

コード

◾️router.js

        {
          path: "/user/list",
          name: "userlist",
          component: () => import("./views/user/UserList.vue")
        },
        {
          path: "/user/new/:userid",
          name: "usernew",
          component: () => import("./views/user/new.vue")
        },

◾️hoge.vue

<script>
export default {
    methods: {
        getPath : function () {
            let path_a = this.$router.resolve({ name: "userlist" }).href;   // =>/user/list
            let path_b = this.$router.resolve({ name: "usernew", params: {userid: "abc"} }).href;   // =>/user/new/abc

            // フルパスを取得したい場合
            let mail_path = location.origin + path_b ;

        }
    }
};
</script>

注意事項：URLパラメータに空値を渡せない（空値を渡すと「/」が返ってくる）

Vue.js入門 基礎から実践アプリケーション開発まで

[PHP][Laravel][vue.js][Javascript] vueで空白項目を登録する際にバリデーションでnullableを設定しても動作しない対応

バージョン

Laravel 5.8
Vue.js 2.6.10

概要

たとえばURL登録フォームのバリデーション設定が以下の場合

    'url'   => 'max:100|nullable|active_url',

空白の場合はバリデーションで引っかからないはずだが
vueから登録しようとするとactive_url（urlバリデーションルールも同様）に引っかかってしまう。

原因はvue側で"null"という文字列がLaravelに送られるため。
そのためvue側で""（空白）に置き換える必要がある。

コード

◾️HogeComponent.vue

<script>
  〜〜略〜〜
  params.append("url", (typeof self.url === "undefined" || self.url === null) ? "" : self.url);
  // API通信
  self.$http.post("/api/ajax/hoge", params)
</script>

self.url === null だけでも良いが念の為undefinedもチェックしておく。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発