よしたろうブログ

設計・人文知・歴史・哲学・漫画とかの話が好きです。

Java と JavaScript の覚書

JavaScript Java基礎

1. メソッドのシグネチャの引数は、final にする（Java）

注意点は参照型の場合はポインタが final になるだけ。インスタンスの中のデータは変更可能である。変更不可能にしたいなら、プリミティブ型を渡す様にしよう。

2. 排他エラーチェック方法例（Java）

対象画面の登録処理を行うなどがあった場合

  1. レコードに更新カウンタを保存するカラムを用意
    1. 更新回数を記録する。デフォルトを'0'とし、NOT NULL制約
    2. null で比較した場合でも排他エラーを起こす
  2. 画面表示時に表示項目を取得し表示させる際に、更新カウンタを隠し項目として画面遷移時や登録処理時に引き渡していく
  3. 登録処理前に主キーと隠し項目で保持している更新カウンタを WHERE で指定してレコードを取得
  4. できる場合は、他画面での更新がない。レコードが取得できない場合は他画面で更新されているため、排他エラーとして例外を throws する。

3. DOMの要素にイベントを付与する （JavaScript）

// html
<div id = "example">

</div>

// JavaScript
const element = document.getElementById('example');


// 画面呼び出し時処理
function handleLoad() {
    const element = document.getElementById('example');
    element.addEventListener('click', () => {
        console.log('clicked!');
    });
    element.addEventListener('click', regByClick);

}

function regByClick(e) {
    console.log('clicked!');
}

// jQuery
$(function () {
    $('#example').on('click', function() {
        console.log('clicked!');
        console.log(e.value);
    }); 

$('#example').on('click', regByClick)

function regByClick(e) {
    console.log('clicked!');
    console.log(e.value);
}

4. 特定のイベント発生後に、さらにイベントを発生させる （JavaScript）

addEventPasteAndChange(document.getElementById('example'));

/**
 * 特定の要素に paste イベントを付与し 次にchange イベントを呼出す
 */
function addEventPasteAndChange(element) {

    element.addEventListener('paste', (event) => {
        event.preventDefault();
        // DOMの要素の maxlength 属性の値を取得
        const textMaxLength = element.getAttribute('maxlength')

        // クリップボードのテキストを貼り付ける前に取得、置換処理してから貼り付ける
        let paste = "";
        if (event.clipboardData) {
            paste = event.clipboardData.getData('text');
            // 第一引数：置き換えたい文字 第二引数：置き換える文字
            paste = paste.replaceAll('.', '');
        }

        // textMaxLength桁以降の値は除去
        if (paste.length > textMaxLength) { 
            paste = paste.substring(0, fixedLength);
        }

        element.value = paste;
        // paste イベント終了後に change イベントを発火させる
        element.trigger("change");
    });

    // paste イベント後に change イベントが発火できない
    // イベントを初期化し、引数で渡されたイベントを発火させる
    element.trigger function(eStr) {
        let e = document.createEvent("HTML Events");
        e.initEvent(eStr, false, false);
        this.dispatchEvent(e);
    }
}

5. 入力欄に最大文字数を入力後に次の項目にフォーカスが自動で移動する （JavaScript）

/**
 * 入力イベント:入力値が最大桁数の場合、次項目にフォーカス自動移動
 * 現在選択中の input 項目が最後以外の場合、 次の input 項目を選択
 * 現在選択中の input 項目が最後の場合、 選択解除
 */
function nextFeildAutoMove_MaxInput() {
    const inputFiled = this;
    const inputValueLngth = inputFiled.value.length;
    const maxlength = inputFiled.maxlength;

    if (inputValueLngth >= maxlength) {
        // 画面の全てのインプットのタグの数
        let inputElementsNum = document.getElementsByTagName('input').length;
        // 現在のインプットタグのインデックス
        let currentIndex = Array.prototype.indexOf.call(document.getElementsByTagName('input'), this);
        let nextIndex = currentIndex + 1;

        if (nextIndex < inputElementsNum) {
            document.getElementsByTagName('input')[nextIndex].focus();
        } else {
            document.getElementsByTagName('input')[currentIndex].blur();
        }
    }
}

// JQuery
function next FeildAutoMove_MaxInput() {
    const inputFiled  = $(this)[0];
    const inputValueLngth = inputFiled.value.length;
    const maxlength = inputFiled.maxlength;

    if(inputValueLngth >= maxLength) {
        // 画面の全てのインプットのタグの数
        let inputElementsNum $('input').length;
        // 現在のインプットタグのインデックス
        let current Index $('input').index(this);
        let nextIndex = current Index + 1;

        if (nextIndex < inputElementsNum) {
            $('input')[next Index].focus();
        } else {
            $('input')[current Index].blur();
        }
    }
}

6. List で受け取った 集合オブジェクトを stream API を使用してフィルタリングを行い、最初の要素を取得（Java）

private static final String BUYABLE_USER = "OK";
private static final String BUY_DISABLED_USER = "NG";

SelectUserDao dao = new SelectDao();
// 検索条件に一致するユーザを取得
List<searchResultEntity> entityList = dao.selectByAll(userId);

// 購入可能ユーザと購入不可能ユーザを判別して抽出
// レコードがない場合は null かもしれないので Optional で受け取る
Optional<searchResultEntity> buyableUserEntity = dtoList.stream().filter(e -> BUYABLE_USER.equals(e.getUserStatus())).findFirst();
Optional<searchResultEntity> buyDisabledUserEntity = dtoList.stream().filter(e -> BUY_DISABLED_USER.equals(e.getUserStatus())).findFirst();

7. equals() の注意点（Java）

equals を使うときは左辺を固定文字にすること｡

左辺が null だと NullPointerException になり得るけど、 右辺が null でも NullPointerException にはならない。

8. Fromタグでマルチなコンテンツ（画像・動画・リクエストパラメータ）をリクエストする時の注意点（HTML）

enctype="multipart/form-data" これつけないと送れない。

9. ホイスティング（JavaScript）

  • コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリーに配置すること

変数と関数の初期値設定

var で変数を宣言した場合、宣言した時点でのホスティングで undefined で初期化が ジャバスクリプトエンジンで設定される

let const では変数のメモリ生成自体はしているが undefined の初期化がジャバスクリプトエンジンで行われないのでUncaught初期化されてへんみたいなエラーが出る。

関数では宣言した時点でホイスティングでメモリに定義されるので、関数の上で呼び出してもエラーにならず関数の戻り値が出力される.。ただし、変数に関数を代入するような「関数式」ではホスティングの挙動が変数と同じになるため、関数式の前に関数の呼び出しを行ってもUncaughtが発生する。

10. undefined と nullの違い（JavaScript）

undefinedは、「未だ定義されていない」という意味を持つ英単語。
JavaScriptにおいては、変数を宣言した後に値を設定されていない場合にundefinedが返される。
大きな違いは、何もない状態であることが意図的であるかどうか。