その１　基本ログ：デバッグの最初の一歩

console.logは、変数や関数の結果を確認する基本的な方法です。コードがどのように動作しているかを追跡するのに便利です。

例:

const userName = "Alice";
console.log("User Name:", userName); // User Name: Alice

ポイント:

• 複数の値をカンマで区切ることで、コンパクトに情報を表示可能。
• エラーが発生している箇所を特定するための第一歩として役立つ。
• console.error()やconsole.warn()を使うと強調できたりする

その２　フォーマットログ：スタイリッシュな出力

文字列にスタイルを適用して、ログを視覚的に整理できます。%cを使ってカスタマイズするのがコツです。

例:

console.log("%cSuccess!", "color: green; font-size: 16px; font-weight: bold;");
console.log("%cWarning!", "color: orange; font-size: 16px; font-weight: bold;");
console.log("%cError!", "color: red; font-size: 16px; font-weight: bold;");

• テキストに色やフォントスタイルを加えることで、重要なメッセージを強調。
• 特に、成功・警告・エラーのログを視覚的に区別するのに便利。

その３　 オブジェクトログ：構造化データの確認

オブジェクトや配列を出力するときは、console.logで構造化されたビューを得られます。console.tableを使うとさらに見やすくなります。

例:

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];

console.log("User List:", users); // 標準的なオブジェクト表示
console.table(users); // テーブル形式で表示

以下、console.table実行結果です。

ポイント:

• console.tableはデータを表形式で表示するため、リストや配列の中身を確認するのに最適。
• APIレスポンスやデバッグで大活躍。

まずはDockerでお勉強環境（動作確認する環境）を作ります。

環境構築

必要なファイルの作成

Dockerfileを以下の内容で作ります。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
WORKDIR /app

次にdocker-compose.ymlを以下の内容で作ります。

services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

コンテナを立ち上げ、必要なもののインストール

コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

必要なものをインストールします。

npm install typescript ts-node ts-node-dev
# tsconfig.jsonファイルを作成
npx tsc --init

動作確認

test.tsファイルを作成し「console.log(‘test’)」と記載して、以下のコマンドで実行できます。

npx ts-node test.ts

Dockerファイルの修正

Dockerfileでpackage.jsonを参照して必要なもののインストールをするように修正します。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
COPY package*.json ./
RUN npm install
WORKDIR /app

再度、コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

動作確認

npx ts-node test.ts

これでお勉強の準備完了です。

型定義を試してみる

TypeScriptといえば、型定義ということで、型定義の勉強をしてみます。

基本の型定義

以下の基本となる型定義を試してみます。

const 変数名: 型 = 値;

文字列に文字列を入れてみる

const name1: string = "ABC";
console.log(name1);
→ABCが出力される

文字列に数値を入れてみるとエラーになります。

const name2: string = 1; 
console.log(name2);
→エラー

anyにすると何でも入れられちゃいます。

const name1: any = "ABC";
console.log(name1);
→ABCが出力される

const name2: any = 1;
console.log(name2);
→1が出力される

オブジェクト

オブジェクトの場合、以下のように定義します。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: "ABC"
}
console.log(item);
→{ id: 1, name: 'ABC' }が出力される

以下のように一部の定義を使用しないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1
}
console.log(item);

オプションパラメーターのハテナマークをつけておくと、定義しなくてもエラーになりません。

const item: {
    id: number,
    name?: string
} = {
    id: 1
}
console.log(item);
→{ id: 1 }が出力される

オプションパラメーターのハテナマークをつけておくと、undefinedを設定することも可能です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→{ id: 1, name: undefined }が出力される

ちなみに、オプションパラメーターをつけないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→エラーになる

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

Tips

以下、TypeScriptでもJavaScriptでも使えそうなTips

デバッグ

console.logで変数名を記載してあげると、ログ出力時にどの変数のログかが分かるので便利です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log("item", item);
→item { id: 1, name: undefined }と出力される

文字列操作

` を使って文字列を囲むことで、${} を使えます。${} の中には、変数や式などを埋め込めます。

const name1: String = 'taro'
const test: String = `I am ${name1}.`
console.log(test)
→I am taro.と出力される

数値も入れられちゃいます

const name1: Number = 1 
const test: String = `I am ${name1}.`
console.log(test)
→I am 1.と出力されます

まとめ

TypeScriptの勉強をDocker環境でやってみました！！

↓Value-Authとは↓

本人認証とは、ログイン時にSMS・メールで認証番号を送信し、 その番号によって本人であることを確認するサービスです。
この本人認証が、Value-Authでは0円で簡単に始められます。

Value-Authで本人認証を始めるまでの流れ

1. 申込会員登録
2. Value-Authのアカウント作成
3. Value-Authにログイン
4. APIキー発行
   1. APIキーはどこかにメモしておく
5. サイト登録
6. 以下のWordPressプラグインをインストール
   1. https://www.value-domain.com/security/value-auth/flow/#cms
7. WordPress プラグインの設定
   1. APIキー、認証コードを設定
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

Value-Authでの本人認証をWordPresに設定してみる

Step1　申込会員登録

以下のリンクから会員登録します。

Step2　Value-Authのアカウント作成

以下のメニューからアカウントを作成します。

Step3　Value-Authにログイン

アカウントを作成するとログインボタンが表示されますので、クリックしてログインします。

Step4　APIキー発行

Value-Authのログイン後の画面でAPIキーを発行し、発行されたAPIキーをメモしておきます。

APIキーはWordPress設定時に使用します。

Step5　サイト登録

Value-Authのログイン後の画面で、サイト名とホスト名を指定してサイト登録します。

これで、Value-Auth側の設定は完了です。残りはWordPressの設定です。

Step6　WordPressプラグインをインストール

以下のURLからWordPressプラグインをダウンロードします。

ご利用の流れ | Value-Auth（バリューオース）

Value-Authのご利用の流れページです。Value-Authは、SMSなど複数の本人認証を無料で導入でき、お客様のサービスやアプリへの設置も簡単なサービスです。

www.value-domain.com

ダウンロードしたプラグインをアップロードします。

↓プラグイン画面の新規プラグインを追加を押下↓

プラグインのアップロードボタンを押下すると↓アップロード画面↓が表示されます。

Step7　プラグインの設定

追加したプラグインの設定画面を開き以下を設定します。

1. 1. APIキー、認証コードを設定（Value-Authから発行される値）
   2. 2段階認証をONにする
   3. 電話番号かメールアドレスを設定する

動作確認

ログインすると、以下の画面が表示されます！

メールアドレスまたはSMSで通知された認証コードを入力すると、ログイン成功します！

まとめ

WordPressセキュリティ対策として、Value-Authを使用して、WordPress管理画面にログイン際に本人認証を追加してみました！

↓Value-Authはこちらから始められます！↓

無料でWordPressを使えるということです！

↓スターレンタルサーバーの申し込みはこちらから↓

スターレンタルサーバー(Star Server)のフリープランの特徴

スターレンタルサーバーはこんなサーバーだよというのを記載していきます。

• 容量
  • ３GB
• 初期費用
  • 0円
• 月額費用
  • 0円
• WordPressが使える
  • しかも複数のWordPressをインストールできる（複数のサイト構築ができる）
• 無料独自SSLも使える

要するに、0円でWordPressが使えてSSL（httpsでのアクセス）に対応しています。

しかも複数サイトの構築ができます！！

スターレンタルサーバー(Star Server)のフリープランの注意点

スターレンタルサーバーの注意点を記載していきます。

• 容量が3GBと少し少なめ
• 3ヶ月ごとに契約更新の手続きが必要となる

容量は少し少なめなものの、試しに初めてみるという方には十分かと思います。

また、3ヶ月ごとに更新が必要となるので、忘れずに更新しましょ！

実際にスターレンタルサーバーを使ってみる

まずは契約からです。

スターレンタルサーバーのフリープラン契約

以下からフリープランの契約が可能です。

WordPressのインストール

スターレンタルサーバーのサーバーパネルからWordPressをインストールできます。

以下の画面の赤線の上をクリックすればインストール画面に進めます。

次にWordPressを追加ボタンを押下します。

WordPress簡単インストール画面が出てくるので、ブログ名/ユーザ名/パスワード/メールアドレスは必須なので入力します。それ以外の項目は、お好みの設定をして「インストールする」ボタンを押下します。(ブログ名/ユーザ名/パスワード/メールアドレス以外は特に変更なしでもOKです。)

「インストールする」ボタンを押下後、しばらくすると出来上がったWordPress画面にアクセスできます。

サイトアクセスして以下の表示がされた場合には、しばらく待ってから再度アクセスするとWordPress画面にアクセスできます。

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

作成したサイトにアクセスしてみる

作成したサイトにアクセスして、以下のようにWordPressの画面が表示されれば成功です。

SSL化してみる

サーバーパネルからSSL設定を押下して、SSL設定状況をONにするとSSL化完了です！

これでhttpsで作成したサイトにアクセスできます。

使ってみてよかったこと

簡単な画面操作のみで、複数サイト作成できて、SSL化できるというのがかなり便利かと思いました！！初心者でも簡単にサイト作成が可能で、しかも無料です。

また、WordPressで有名な（よく使われている）テーマのCocoonをスターレンタルサーバー管理画面から簡単にインストールできます。

まとめ

スターレンタルサーバー(Star Server)のフリープランを試してみました。

無料で複数サイト作成できて（複数WordPressをインストールできて）、SSL化まで無料でできました！！

素晴らしいスターレンタルサーバー！！

↓申し込みはこちらから↓

ネットオウル Q&A掲示板

secure.netowl.jp

入力できませんでしたが、現在は入力できるようになったようです！

塗り潰しだらけでわかりづらいと思いますが、「_」アンダーバー入力できています！！

↓申し込みはこちらから↓

ライトではWordPressを簡単にインストールできるのですが、エコノミープランではWordPressをインストールできないため、ひと手間かけて配信することになります。

できるだけ安くということで、エコノミープランを使いたい方向けの記事です。

実現方法ですが、以下の流れで「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

1. 自分のPCでWordPressのコンテンツを作成
2. 作成したコンテンツをHTML形式でエクスポート
3. エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

では早速WordPressコンテンツを「ロリポップ！」レンタルサーバーのエコノミープランで配信していきます。

自分のPCでWordPressのコンテンツを作成

自分のPCにWordPressをインストールする

「Local」を使用するとこで簡単に自分のPCにWordPressをインストールできます。

WindowsでもmacOSでも使えます。

以下のURLから「Local」をダウンロードしてインストールします。

Local

localwp.com

次はWordPress管理画面にアクセスして、WordPressの設定をします。

WordPressの設定

まずは、パーマリンク設定から行います。

Word Pressのパーマリンク設定の変更

WordPress管理画面の設定->パーマリンク画面を開き、カスタム構造を選択し、「/%postname%.html」を入力します。

次は、staticpress2019プラグインの設定をします。

WordPressのstaticpress2019プラグインを設定

WordPress の管理画面［プラグイン］-［新規追加］から「staticpress2019」をインストールして有効化します。

「staticpress2019」設定画面を開き、以下の2点設定します。

• Static URLに「ロリポップ！」から払い出されたドメインを入力
• Save DIRに作成したコンテンツをエクスポートするディレクトリを指定

次はHTML形式でエクスポートします！

作成したコンテンツをHTML形式でエクスポート

StaticPress2019を使ってエクスポートします。

staticpress2019でWordPressのコンテンツをHTMLファイルとして出力

インストールした「staticpress2019」の画面で「再構築」ボタンを押下します。これだけです。

では、ロリポップサーバーで配信してみます！

エクスポートしたHTMLを「ロリポップ！」レンタルサーバーのエコノミープランで配信

まずFTPでロリポップサーバにHTMLをアップロードします。

ロリポップサーバーにHTMLをアップロード

以下のロリポップメニューからFTPを起動します。

エクスポートされたファイルを全てアップロードします。

結構ファイル数多いと思うので、以下を参考にFTPソフトを使う方がいいかもです！

各種FTPソフトの設定方法 - ロリポップ！レンタルサーバー

ロリポップ！レンタルサーバーのご利用マニュアル FTPソフトの設定を説明したマニュアルページです。

lolipop.jp

動作確認

「ロリポップ！」から払い出されたドメインにアクセスして以下のように画面表示できれば成功です。

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

まとめ

「ロリポップ！」レンタルサーバーのエコノミープランでWordPressのコンテンツを配信してみました。

少しでも安くwordpressコンテンツを配信したい方のお役に立てば….!

↓「ロリポップ！」レンタルサーバーの申し込みはこちらから↓

ちなみに私は割とPHP初心者です。

初心者ですが、これからAPI作成するならPHPが良いと思っています。

PHPが良い理由は、実装できる人が多いと思っていて、いざとなれば他の人（他の会社）に協力を仰ぎやすそうだからです。インターネット上に情報もいっぱいあるというアドバンテージもあると思います。

フレームワークは、PHPの中で一番ポピュラーという理由からLaravel！と考えています。

まずは、作成する環境について記載していきます。

作成する環境の構成

以下の構成で動かしてみます。

• プログラム
  • Laravel
• AWSリソース
  • API Gateway
  • Lambda

実際に、Laravel 11をAWS Lambdaで動かしてみます！！

Laravel 11をAWS Lambdaで動かしてみる

まずはLaravelプロジェクトを作成します。

Laravelプロジェクトの作成

以下のコマンドでLaravelプロジェクトを作成します。

composer create-project laravel/laravel lambda_test

プロジェクト作成ができたら、Laravelバージョンを確認します

cd lambda_test/
php artisan -V
Laravel Framework 11.36.1

上記のようにLaravelバージョンが確認できればOKです。

AWSにデプロイする準備

以下のコマンドでAWSのアクセスキーとシークレットキーを設定します

aws configure

アクセスキーとシークレットキーを設定後は、以下のような簡単なコマンドを使用して（以下はバケットの一覧を表示する例）、設定に成功しているか確認できます。

aws s3 ls

次にserverless frameworkをインストールします。

npm install -g serverless

次にbrefをインストールします。

composer require bref/bref bref/laravel-bridge --update-with-dependencies

次に serverless.yamlを生成します。

php artisan vendor:publish --tag=serverless-config

serverless.yamlのregionを以下の通り変更しておきます。（これで、デプロイ先を東京リージョンに変更しています。）

region: ap-northeast-1

serverless.yamlのruntimeも以下の通り変更しておきます。

    web:
        runtime: php-84-fpm
    artisan:
        runtime: php-84-console

修正後のserverless.yamlの全体は以下です。

service: laravel

provider:
    name: aws
    # The AWS region in which to deploy (us-east-1 is the default)
    region: ap-northeast-1
    # Environment variables
    environment:
        APP_ENV: production # Or use ${sls:stage} if you want the environment to match the stage
        SESSION_DRIVER: cookie # Change to database if you have set up a database

package:
    # Files and directories to exclude from deployment
    patterns:
        - '!node_modules/**'
        - '!public/storage'
        - '!resources/assets/**'
        - '!storage/**'
        - '!tests/**'
        - '!database/*.sqlite'

functions:

    # This function runs the Laravel website/API
    web:
        handler: public/index.php
        runtime: php-84-fpm
        timeout: 28 # in seconds (API Gateway has a timeout of 29 seconds)
        events:
            - httpApi: '*'

    # This function lets us run artisan commands in Lambda
    artisan:
        handler: artisan
        runtime: php-84-console
        timeout: 720 # in seconds
        # Uncomment to also run the scheduler every minute
        #events:
        #    - schedule:
        #          rate: rate(1 minute)
        #          input: '"schedule:run"'

plugins:
    # We need to include the Bref plugin
    - ./vendor/bref/bref

デプロイしてみる

以下のコマンドでデプロイできます

serverless deploy

以下が出てきた場合はLogin/Registerを選択するとWEBブラウザが開くと思うので、ログイン（アカウントを持っていない場合作成）します。

Please login/register or enter your license key: … 
❯ Login/Register
  Get A License
  Enter A License Key
  Explain Licensing Basics

デプロイができると以下のようにエンドポイントが表示されます。

endpoint: ANY - ****************

動作確認

エンドポイントにアクセスし、以下のように画面表示されればOKです。

簡単なAPIを作ってみる

以下のコマンドでコントローラを作成

php artisan make:controller ApiProductController

コントローラを以下のとおり実装

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ApiProductController extends Controller
{
    public function index()
    {
        $products = [];
        $products['id'] = 1;
        $products['name'] = '商品名';
        return response()->json($products, 200);
    }
}

ルーティング（routes/web.php）ファイルに以下を追加

Route::get('/api', 'App\Http\Controllers\ApiProductController@index');

以下のコマンドでデプロイできます

serverless deploy

「エンドポイント/api」にアクセスして、以下のレスポンスが返って来れば成功です。

{
  "id": 1,
  "name": "商品名"
}

Laravelで作ったAPIをLambdaで動かす際に使うと良さそうAWSサービスは何か

API Gatewayは不要？

まず、Lambda関数URLがあるので、API GatewayはなくてもAPIの公開は可能で、この方がAPI Gateway分のコスト削減が可能とは思います。

しかし、API Gatewayを使用した方が、リクエストの認証（IAM、Cognito、APIキーなど）などが使える点で有利かと思います。

DBは？

RDSなら、RDS Proxy × Aurora Serverless v2という選択肢があると思います。

RDS Proxyを使うことで、データベースへの接続をプロキシすることで、データベースへの負荷を軽減できますが、8ACU分の料金がかかります。

費用を抑えたい場合、かつ同時接続数が少ない場合は、RDS ProxyなしでもOKかな。Aurora Serverless v2はゼロキャパシティのスケーリングをサポートしています。

Amazon Aurora Serverless v2 がゼロキャパシティへのスケーリングをサポート - AWS

AWS の新機能についてさらに詳しく知るには、 Amazon Aurora Serverless v2 がゼロキャパシティへのスケーリングをサポート

aws.amazon.com

ユースケースによっては、Aurora Serverless v2とElastiCacheという組み合わせで、ElastiCacheでRDSの情報をキャッシュしてRDSの負荷を抑えるというのもありかと。

もしくは、DynamoDBという選択肢もあると思いますが、設計の難易度が高い…ですね。

まとめ

DBの選択肢など迷うことも多くありますが、プログラムとしてはLaravel（PHP）がいいと思っています！！

• クラス操作（row-class-name）
  • 特定の行にクラスをつけたい場合に使用
• クリックイベント（row-click）について
  • 行クリックした場合に特定の関数を呼び出す
• 列固定表示
  • 横スクロール時に一番左の列を固定表示にしてみる

Element Plusについて

まずは、Element Plusについて簡単に記載します。

Element Plusは、Vue3対応のUIライブラリです。

A Vue 3 UI Framework | Element Plus

A Vue 3 based component library for designers and developers

element-plus.org

Element Plusのtableのクラス操作について

row-class-nameを使用して、特定の行にクラスをつけてみます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
:row-class-name="addClass"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
addClass({ row }) {
// 条件に応じてクラスを追加
if (row.Id === "1") {
return 'add-class';
}
return ''; // デフォルトでクラスを付けない
},
},
}
</script>

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
/>
<el-table-column
prop="Name"
label="名前"
/>
<el-table-column
prop="bikou"
label="備考"
/>
</el-table>
</template>


<script>
import axios from "axios";
export default {
data() {
return {
users: []
}
},
mounted: function() {
axios.get('/list.json')
.then(response => (this.users = response.data))
.catch(error => console.log(error))
},
methods: {
clickRow( row ) {
alert(row.Id);
},
},
}
</script>

Element Plusのtableの列固定表示について

カラムの設定で「fixed=“left”」を指定すると列固定表示できます。

以下サンプルコードです。

<template>
<el-table
ref="tableRef"
:data="users"
style="width: 100%"
border
@row-click="clickRow"
>
<el-table-column
prop="Id"
label="ID"
fixed="left"
width="300"
/>
<el-table-column
prop="Name"
label="名前"
width="300"
/>
<el-table-column
prop="bikou"
label="備考"
width="300"
/>
</el-table>
</template>

本記事でのselect2とは、selectのプルダウンを色々便利にしてくれるJavaScriptのライブラリの「Select2」を指しています。

↓本家↓

Getting Started | Select2 - The jQuery replacement for select boxes

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

select2.org

Select2を操作中に表示される以下のような英文を日本語化していきます。

• No results found
  • Select2の選択候補がない時に表示されるメッセージ
• Please enter 1 or more characters
  • 1文字以上入力してから選択候補を表示する設定で、入力されていない場合に表示されるメッセージ

簡単な英文なので、そのままでも良いという考えもあると思いますが、いろんな人が使うサービスの場合、日本語は必須かなと思います！

Select2を日本語化する方法

以下のようなコードで日本語化できます。
language オプションを使う感じです！

          $('select2セレクタ').select2({
            language: {
              inputTooShort: function () {
                return "1文字以上入力してください";
              },
              errorLoading: function () {
                return "結果を読み込めません";
              },
              loadingMore: function () {
                return "さらに結果を読み込んでいます";
              },
              noResults: function () {
                return "結果が見つかりません";
              },
              searching: function () {
                return "検索しています";
              }
            },
            placeholder: '選択してください',
            minimumInputLength: 1, // 最低入力文字数
            allowClear: true,
          });
        }

Select2の日本語化が簡単にできましたー

プロジェクト作成後に途中からテスト(unit test)を追加する方法について書いていきます。

vue.jsのバージョン3にテスト(unit test)を追加する

以下のコマンドで追加できます！これでvue3でテスト実行できるようになります。

vue add unit-jest

テストコードを書いてテスト実行してみる

テストコード

tests/unitフォルダ配下に「HelloWorld.spec.js」というファイル名でファイルを作成し、ファイルの中身は以下のコードにします

import { shallowMount } from '@vue/test-utils'


// テスト対象コード
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}


// テストコード
test('displays message', () => {
const wrapper = shallowMount(MessageComponent, {
props: {
msg: 'Hello world'
}
})


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

npm run test:unit

vue add unit-jest