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

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レスポンスやデバッグで大活躍。

• クラス操作（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

本記事での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をモーダル内で使う場合にdropdownParentを指定すると良いのか

指定しないとselect2の入力ボックスにフォーカスが当たらず、入力して選択肢を絞るということができないケースが発生するためです。

どのようにdropdownParentを指定するか

以下のように指定します！

$('select2セレクタ').select2({ 
placeholder: '選択してください', 
allowClear: true, 
dropdownParent: $('モーダルセレクタ') 
});

これで、select2の入力ボックスにフォーカスが当たり、入力して選択肢を絞るということができるようになります。

エラーの現象

以下のようにクリアを可能とする設定で、select2を表示させます。

$('#select').select2({
allowClear: true,
});

Cannot read properties of undefined (reading 'id')

TypeError: Cannot read properties of undefined (reading 'id')

$('#select').select2({
placeholder: '選択してください',
allowClear: true,
});

まず、TypeScriptとは？についてです。

TypeScriptとは、JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語です。

TypeScriptをコンバートすると、JavaScriptのコードに変換されるため、JavaScriptが動く環境であればすぐに使うことができます。

JavaScriptのライブラリなども使用でき、互換性は抜群！！

では、TypeScriptとJavaScriptの違いについて、書いていきます！

JavaScriptとの違い

大きな違いは以下の3点かと思います！

静的型付け

以下のように型を宣言できる

let flag: boolean = false; // boolean型
let decimal: number = 256; // 数値型
let word: string = 'hello'; // 文字列型

クラスが使える

以下のようにクラスが使える。interfaceやextendも使える

class User {
  name: string
  age: number
  constructor {name: string) {
    this.name = name;
  }
}
const user= new User('test user')

ジェネリクスが使える

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

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

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

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

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

try-catch-finallyのcatchの中でreturnや例外発生をさせた場合の挙動を調べてみます。

対象言語はJavaScript、PHPです。

結論としては、JavaScriptとPHPで挙動は同じです。

上記の動作となりました。

JavaScript

JavaScriptでcatchの中でreturnした場合

↓調査した際のプログラム↓

function test() {
  try {
    throw 'error'
  }catch(e){
    console.log('catch');
    return 'catch return';
  }finally{
    console.log('finally');
    return 'finally return';
  }
}
console.log(test());

↓出力結果↓

catch
finally
finally return

catchのあとにfinallyが実行されていることが分かる

→catch内のreturn文は動作していない。

JavaScriptでcatchの中で例外発生した場合

↓調査した際のプログラム↓

unction test() {
  try {
    try {
      throw 'error'
    }catch(e){
      console.log('catch');
      throw 'catch error'
    }finally{
      console.log('finally');
    }
  }catch(e){
    return 'catch error2'
  }
}
console.log(test());

↓出力結果↓

catch
finally
catch error2

catchのあとにfinallyが実行されていることが分かる。同時にcatchに投げ、例外も発生している。

PHP

PHPでcatchの中でreturnした場合

↓調査した際のプログラム↓

<?php
try {
    throw new Exception('error');
} catch(Exception $error) {
    print "catch\n";
    return;
} finally {
    print "finally\n";
    return;
}

↓出力結果↓

catch
finally

catchのあとにfinallyが実行されていることが分かる

→JavaScript同様、catch内のreturn文は動作していない。

PHPでcatchの中で例外発生した場合

↓調査した際のプログラム↓

<?php
try {
    try {
        throw new Exception('error');
    } catch(Exception $error) {
        print "catch\n";
        throw $error;
    } finally {
        print "finally\n";
    }
} catch(Exception $error) {
    print "catch2\n";
}

↓出力結果↓

catch
finally
catch2

JavaScriptと同様にcatchのあとにfinallyが実行されていることが分かる。同時にcatchに投げ、例外も発生している。

具体的にはJavaScriptの以下の構文をブラウザで呼び出した時に、ブラウザ上にダイヤログが表示されない事象について記載していきます。

alertの構文

alert("ブラウザ上で表示するメッセージ");

confirmの構文

confirm("確認ダイヤログ");

では、「alert」や「confirm」が表示されない原因を記載していきます。

原因

同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示すると、ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れます。

このチェックボックスにチェックを入れると以降、ダイヤログが表示されなくなります。

「IE」「Edge」「Chrome」など主要なブラウザで発生します。「Chrome」はバージョンによってチェックボックスが表示されず、ダイヤログが表示されなくなる事象が発生しないケースもあるようです。

上記に当てはまらない場合、構文の書き間違い(スペルミス)という凡ミスもありますので、注意しましょ！

原因がわかったので、次に対処方法について記載していきます。

対処方法

すぐにできる対処方法としてはブラウザの再起動。これだけでダイヤログが表示されるようになります。取り急ぎのその場をしのぐ対応としては有効。

根本対策としては「alert」や「confirm」を使用しないサイト構成とするのが有効です。

代わりにモーダル表示を使うと良いです。

モーダル表示は、JavaScriptライブラリを使うと簡単にできます。

有名なJavaScriptライブラリを2つあげておきますー

①JavaScriptライブラリ：jquery

jQuery

jQuery: The Write Less, Do More, JavaScript Library

jquery.com

②JavaScriptライブラリ：Micromodal.js

Micromodal - Tiny javascript library for creating accessible modal dialogs

Micromodal enables you to create accessible modal dialogs with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

micromodal.now.sh

alertやconfirmは画面操作を奪ってしまう（アラート、コンファームを操作しないと別ページにうつれない）ので、同一ドメイン内で複数回使うと攻撃とみなされるのでしょうね。

対処方法

すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能

「alert」や「confirm」が表示されない現象が発生するブラウザ

Windows ブラウザ（IEやEdge）やChromeなど主要なブラウザで発生するようです。

バージョンによっては発生しないケースもあるようです。

また、他のブラウザは未確認ですが、発生する可能性はありそう！

Chromeについては最新バージョンの場合は発生しないようですので、Chromeのバージョンアップをするという応急処置もあります。

まとめ

原因と対処方法をまとめると以下のようになります！

まとめ

<原因>
①同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示
②ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れる
③チェックボックスにチェックを入れると、以降、ダイヤログが表示されなくなる
※「IE」「Edge」「Chrome」など主要なブラウザで発生
<対処方法>
すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能