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

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

※これはアプリ内に設置するアイコン画像の話です！
アプリ自体のアイコンの話ではないので注意！

画像を追加する

Android Studio > リソース・マネージャー（左のタブにあります）＞「＋」アイコン＞ベクターアセット＞クリップアート
から追加したいアイコン画像を選ぶ

自分の環境だと
色：FFFFF
透明度：100%
にするといい感じになった

例えばnotifications アイコンを選択した場合、
res/drawable/ic_baseline_notifications_24.xmlファイルが作成される

画像を利用する

1
2
3
4

<hoge.view.AppCompatImageView
    android:id="@+id/hoge"
    android:layout_marginTop="2dp"
    android:src="@drawable/ic_baseline_notifications_24" />

公式のアイコン、結構数が多くてありがたいですね。