ライブラリをインストール

1
2
3
4
5
6
7
8
9

# testライブラリ
npm install --save-dev jest
# for vue
npm install --save-dev babel-jest
npm install --save-dev babel-preset-env
npm install --save-dev babel-core@bridge
# for vue3
npm install --save-dev @vue/test-utils@next
npm install --save-dev vue-jest@next

test準備

プロジェクトルートディレクトリにjest.config.jsを作成する

※作成しない場合、以下のエラーになった。
Consider using the "jsdom" test environment.

1
2
3

module.exports = {
  testEnvironment: "jsdom"
};

package.jsonに以下を追加する
※npm testでテスト実行できるようにするため

1
2
3

"scripts": {
    "test": "jest",
  },

testコード作成

プロジェクトルートディレクトリに__tests__/unit/index.jsを作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { mount } from "@vue/test-utils";

// The component to test
const MessageComponent = {
  template: "<p>{{ msg }}</p>",
  props: ["msg"]
};

test("displays message", () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: "Hello world"
    }
  });

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain("Hello world");
});

ここまで完了すれば、npm testでテスト実行できる。

と、ここまでは良いのだが、Vue.jsのコードに接続するコードを書くと以下のエラーになった
解決できず、諦めた。。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>

はじめに

docker-composeにPostgreSQLを導入したので、コードをメモしておきます。

POSTGRES_USERにuserを指定すると権限エラーになるところで結構ハマりました。。

./docker/postgresql/initdbフォルダにsqlファイルを入れれば自動的に実行されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#docker-composeのバージョンを指定
version: '3.8'

services:
  db:
    image: postgres:13.3
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      TZ: Asia/Tokyo
    ports:
      - '5432:5432'
    volumes:
      - ./docker/postgresql/data:/var/lib/postgresql/data
      - ./docker/postgresql/initdb:/docker-entrypoint-initdb.d

はじめに

OAuth2のクライアントアプリを作成したので、手順をメモしておきます。

環境

フロント
　Vue.js：3.0.0
バックエンド
　Express：4.17.1

JavaScriptでjson内のデータの位置を並び替える方法です。

例えば

1
2
3
4
5

{
  "1":"test1",
  "2":"test2",
  "3":"test3",
}

これを

1
2
3
4
5

{
  "3":"test3",
  "1":"test1",
  "2":"test2",
}

にしたい時に使う方法です。

以下は”hoge”データを3番目に入れる例です。

1
2
3

let pairs = Object.entries(beforeJson);
pairs.splice(3, 0, ["hoge", beforeJson["hoge"]]);
afterJson = Object.fromEntries(pairs);

上にある通り、一度配列にしてから順番を入れ替え、その後にjsonに戻せばOKです。

以上です。

Bootstrap をカスタマイズする方法です。

npm インストール

scss を読み込むライブラリです。

npm install node-sass@5.0.0
npm install sass-loader@10.1.1

ここでバージョン指定しない場合、以下のエラーになるので注意。

• PostCSS received undefined instead of CSS string
• this.getOptions is not a function

エラーが出たら一度アンインストールすること
npm uninstall sass-loader node-sass

scss を作成

node_modules と同じフォルダに scss フォルダを作成し、そこに index.scss を作成する

1
2

@import './mixin';
@import '../node_modules/bootstrap/scss/bootstrap';

同じ場所に mixin.scss を作成する

1
2

$primary: #0275d8;
$accent: #ff8b32;

import

main.js などで先ほど作成した index.scss を import する

1
2
3
4
5
6
7
8
9
10

import { createApp } from 'vue'
import App from './App.vue'

// この行を削除
// import 'bootstrap/dist/css/bootstrap.css'

// この行を追加
import './../scss/index.scss'

createApp(App).mount('#app')

View

レイアウトとアクティビティ

画面はレイアウトと呼ぶ
web でいう html と css の部分
xml ファイル
配置してあるパスは以下（例）
/app/src/main/res/layout/activity_main.xml
レイアウトの中のテキストやボタンなどの要素を View（ビュー）と呼ぶ
ビューの高さや文字サイズなどは属性と呼ぶ
ロジック部分はアクティビティと呼ぶ
web でいう JavaScript の部分
Java や Kotlin
配置してあるパスは以下（例）
/app/src/main/java/com/example/diceroller/MainActivity.kt

レイアウトとアクティビティは一対一となっている

文字列は基本的にレイアウトにハードコーディングせず、values/res/string.xmlファイルに記載する

はじめに

エラー

Androidのビルドで以下のエラーが出ました

com.android.build.gradle.internal.crash.ExternalApiUsageException: org.gradle.internal.metaobject.AbstractDynamicObject$CustomMessageMissingMethodException: Could not find method setVariantDir() for arguments [debug] on task ‘:app:processDebugGoogleServices’ of type com.google.gms.googleservices.GoogleServicesTask.

解決策

google-servicesの4.3.6のバージョンが原因らしく、4.3.5に修正するとうまく行きました。

対象ファイル
build.gradle

1
2
3
4

// 前
classpath 'com.google.gms:google-services:4.3.6'
// 後
classpath 'com.google.gms:google-services:4.3.5'

参考

https://stackoverflow.com/questions/67496084/why-am-i-getting-abstractdynamicobjectcustommessagemissingmethodexception-error

はじめに

DialogFragmentのサンプルコードです。

最初はインターフェースを使わない方法を模索しましたが、親がアクティビティの時は無理っぽいので諦めました。
もし親がフラグメントのみと断定できるのなら参考リンクの通りに実装すればインターフェースが不要になっていい感じになります。

あと最初はBuilderなしでイケないかなあと模索しましたが、Builderを使わないと画面回転時に変数が初期化されちゃうので諦めました。

前提知識

Android のダイアログのクラスが色々あって混乱したので整理します。

まず、ダイアログ関連のクラスは以下の３種類あります。

1. Dialog
2. AlertDialog
3. DialogFragment

1 の Dialog は大元のクラスです。
これを直接扱うことはないです。

2 の AlertDialog は 1 の Dialog のサブクラスです。
一応これを使えばダイアログは表示できるのですが、これを直接使うのはメモリリークするので非推奨です。

参考
Android のダイアログ表示でメモリリーク？

じゃあどうするのということで、3 の DialogFragment を使うという訳ですね。
これを使えばライフサイクルを使えるのでメモリリークを防げます。

具体的なコードは以下の通りです。