kz’s blog

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

プログラミング

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…

Python 初心者が mac にインストールしてから Hollow World するまで

OS バージョン確認 macOS High Sierra 10.13.6 ターミナル起動 本手順では、ターミナルを使用して作業を進めますので、あらかじめターミナルを起動しておきます。 Homebrew インストール 下記サイトのコマンドを実行してインストールします。 The missing pa…

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 で作成した静的ファイルを GitHub Pages に公開する

簡単にできると思ったけど意外と手こずったのでやったことをまとめておきます。 前準備 GitHub Pages で公開できるように GitHub 側の設定を済ませておいて下さい。 公開するページの情報 Git リポジトリプッシュ先 リポジトリルート/sample/user-manager/ U…

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

www.kz62.net 前回の記事ではユーザ編集機能の一部を作成しました。今回はその続きをやっていきます。 ユーザ追加機能の作成 新規登録ボタン追加 追加機能の確認 ユーザ削除機能の作成 削除ボタン追加 削除機能の確認 終わりに 今回作成したソースコード Git…

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 を使ってユーザ管理機能を作る②

www.kz62.net 前回の記事ではユーザ管理機能の一覧表示まで作成しました。今回はその続きをやっていきます。 ユーザ編集の作成 パスの追加 ユーザ編集の vue を作成する 入り口を作る ID で指定したユーザを表示する 完了ボタンの設置 編集機能の確認 ユーザ…

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

バージョン確認 プロジェクト作成 ユーザ管理機能の構成 ユーザ管理の作成 ファイル名変更 パスの変更 ユーザデータの作成 ユーザを一覧で表示 確認 バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 $ vue --version 3.0.0-rc.7 vue のバージョンは 3.0 以…

Vue CLI 3 の Vue UI を使って画面を表示させる

バージョン確認 $ node -v v10.6.0 $ npm -v 6.1.0 インストール $ npm install -g @vue/cli npm install -g @vue/cli にすることで Vue CLI のバージョン3 以降がインストールされるっぽいですね。 npm install -g vue-cli にするとバージョン2 になるみた…

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.3 Gradle …

忘れがちな Java 構文メモ

よく使用するものを自分用にメモ。 繰り返し系 for 文 拡張 for 文 while 文 分岐系 if 文 switch 文 繰り返し系 for 文 // 構文 for (初期化式; 条件式; 変化式) { } // 例 String[] values = {"value1", "value2"}; for (int i = 0; i < values.length; i+…

Spring Boot の REST で Hello World を作る

環境 Eclipse にプラグインをインストールする Spring ツール(STS) 見つからないときは Gradle プロジェクト作成 コントローラー作成 確認 Spring Boot を起動する アクセス 環境 macOS High Sierra 10.13.5 Eclipse Oxygen.3a Release (4.7.3a) Eclipse …