kz’s blog

興味のあることについて書いていきます。

プログラミング

Nuxt.js でログイン機能を実装する

Nuxt をインストールする ja.nuxtjs.org $ npx create-nuxt-app <project-name> いくつかの質問に対する設定値 状況に応じて選択してください。 以下、筆者が普段選択するものを記載します。 サーバーサイドのフレームワーク None UI フレームワーク Vuetfy ※このページで</project-name>…

Nuxt.js × VeeValidate でカスタムルールを作成する

少々はまったので書いておきます。 前提として、プラグインとして VeeValidate を読み込む場合です。 カスタムルール作成 plugins/vee-validate.js 引数なしの場合 import Vue from 'vue' import VeeValidate, { Validator } from 'vee-validate' import ja …

Firebase の匿名アカウントを認証済みアカウントにリンクさせる

はじめに Firebase で匿名認証を使用すると、ユーザは何の情報も入力せずに Firebase のセキュリティルールに制御されているデータにアクセスできるようになるので、導入することでサービスの利用者が増えるのではないかと思いました。 firebase.google.com …

Nuxt.js と Firebase で SNS チックな個人開発サービスを公開した

はじめに 使用した技術 Nuxt.js SPA PWA vuetify Firebase Authentication Firestore Storage Hosting Functions ソース管理の話 サービスのコンセプト 検索 登録 繋がる やらないこと ユーザー同士のメッセージ等のやりとり 複数項目での検索 今後の課題 デ…

Vue.js で Firebase を利用するときに警告が出た場合の対処法

警告が出る場合 import firebase from "firebase"; このようにimportすると下記のような警告が出力されます。 It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to …

Heroku の Spring Boot アプリでテーブル接続を行う

環境 macOS Mojave 10.14.1 Eclipse (Pleiades) Oxygen.3a Release (4.7.3a) 使用するもの Heroku Spring Boot PostgreSQL Gradle Lombok 事前準備 あらかじめ Java 8 をインストールしておいてください。 Heroku 登録および設定 登録 下記サイトから登録を…

Vue.js でログイン機能を実装する

前提 この記事は@vue/cliを使用した内容となっております。 バージョン "vue": "^2.5.17", "vue-router": "^3.0.1", "vuex": "^3.0.1" ページ構成 ホーム プロフィール ログイン このうち、プロフィールはログイン認証が必要なページとします。 ソースファイ…

Github Pages に Vue.js の SPA サイトを公開して運営するまで

はじめに 基本的に以前の記事に書いてある通りに実行すれば Github Pages で SPA サイトを公開することができると思います。 今回は特にハマった点や、サイトを運営するために必要なことを記述していきます。 Github リポジトリ作成 通常通りに作成します。…

Vue.js で Buefy のラジオボタンの @change が拾えなくてハマった

はじめに 通常の Vue.js で作成したラジオボタンを Buefy で実装したら@changeが動作しなくなってしまいました。 調べても解決までに時間がかかったので、解決方法を書いておきます。 ちなみに、@changeはv-on:changeの省略記法になります。詳細はこちらを参…

Vue.js の methods と computed の違いを検証して理解する

はじめに jp.vuejs.org 公式の算出プロパティ(computed)を参照したところ、あまりピンと来なかったので、検証をして理解を深めました。 methods と computed の違い キャッシュされるかされないか キャッシュされる =computed キャッシュされない =methods …

Vue.js でラジオボタンのコンポーネントを作成する

ラジオボタンのコンポーネント テンプレート <template> <label> <input type="radio" :value="value" :checked="value === checkedValue" @change="$emit('change', $event.target.value)" /> <span v-if="label">{{ label }}</span> <span v-else>{{ value }}</span> </label> </template> スクリプト <script> export default { name: 'RadioButto…

Windows で Vue.js を開発する環境を整える

環境 Windows10 Enterprise nodist インストール github.com ダウンロードしたインストーラーを実行してインストールします。 コマンドプロンプト起動 以下作業はコマンドプロンプトで行うので起動しておいて下さい。 nodist バージョン確認 $ nodist -v 0.8…

MapUtils の使い方 (Apache Commons Collections)

Java の Map 操作を Null セーフで行いたい場合、Apache Commons Collections の MapUtils を使うと良いです。 Map インスタンス isEmpty isNotEmpty getString getString(デフォルト有り) getInteger getInteger(デフォルト有り) getBoolean getBoolean…

Java で Json のシリアライズ・デシリアライズを柔軟に行う

前提 Json パーサライブラリは Jackson を使用しております。 Bean 定義 public class Bean { private int id; private String name; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return nam…

Vue Router のルーティングをネストする

前提 画面構成 Route 設定 ページの作成 ユーザ ユーザホーム ユーザ詳細 ユーザ編集 App.vue 修正 終わりに 関連書籍 前提 Vue Router をインストールしていない場合はしておいて下さい。 画面構成 下記のような画面構成を目指します。 ホーム ユーザ ユー…

Java で文字列を指定の桁数で分割し配列にする方法

はじめに Java の文字列操作と言えば Apache Commons LangのStringUtilsをよく使いますが、文字列を指定の桁数で分割するメソッドは実装されていないようなので、やり方を書いておきます。 やりたいこと 分割対象文字列 あいうえおかきくけこを指定した桁数…

Vue UI で axios を導入し ajax 通信をできるようにする

Vue.js から API を介してデータの取得等を行う際に axios (Vue で ajax を利用できるようになる) を使用します。 バージョン確認 プロジェクトの作成 axios インストール ソースコード修正 axios を使用する準備 axios を使用して API にアクセスし、データ…

Vue UI で Bootstrap を導入しデザインを変更する

バージョン確認 プロジェクトの作成 Bootstrap インストール ソースコード修正 Bootstrap を使用する準備 Bootstrap を使用するコンテンツを配置する。 確認 関連書籍 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.10 プロジ…

Vue Router で動的ルートマッチングをする

前提 Vue Router をインストールしていない場合はしておいて下さい。 Route 設定 src/router.js export default new Router({ routes: [ { path: '/user/:id', name: 'user-edit', component: () => import('./views/UserEdit.vue') } ] }) path プロパティ…

Vue UI を使ってユーザ管理機能を作る

バージョン確認 Vue UI の使用方法 プロジェクト作成 ユーザ管理機能の構成 ユーザ管理の作成 ファイル名変更 パスの変更 ユーザデータの作成 ユーザを一覧で表示 確認 ユーザ編集の作成 パスの追加 ユーザ編集の vue を作成する 入り口を作る ID で指定した…

Vue.js の v-for でエラーが出た時の対処

ループ時のキー未設定によるエラーの対処 修正前コード <div v-for="data in datas"> エラー内容 Elements in iteration expect to have 'v-bind:key' directives. どうやらループ時の一意になるキーを設定しなければならないようなので以下のように修正する。 修正後コード datas が配</div>…

Eclipse で Gradle プロジェクトを Git からクローンして起動までさせる

環境 Git から Gradle プロジェクトをクローン 事前準備 Git リポジトリーのクローン プロジェクトのインポート Gradle プロジェクトへ変換 Spring Boot 起動 関連書籍 環境 macOS High Sierra 10.13.5 Eclipse Oxygen.3a Release (4.7.3a) Spring Boot 2.0.…