入力欄がブランク時に全件表示

0.入力欄と検索機能は実装しておく

1.JavaScriptで以下を書く

setInterval({
    let 変数① = document.getElementById('(入力欄のID)');

    if(!変数①.value.trim()){
        const form = document.getElementById('(検索機能のformのID)');
        form.submit();
    }
},3000);

setIntervalの第2引数はミリ秒であり、3000は3秒ごとに処理を実行するという意味

(Thymleaf)htmlでのif文

<td th:if="(条件式)" (処理　例：th:text="error")></td>

ボタンを押してControllerに移動

html側で以下実装

1.formタグで囲む
id="(任意)"
th:action="@{/①/②}"
method="(getまたはpost)"

2.ボタンをinputタグで用意
type="submit"
value="(任意)"

Controller側で以下実装
1.クラス名の上に@RequestMapping("/①")

2.メソッド名の上に@GetMapping("/②")
※htmlのメソッドがgetの場合は@GetMapping,postの場合は@PostMapping

3.メソッドに処理を書く

GitとSVN

・SVNは「中央サーバ頼み」
・Gitは「全員がサーバを持っている」
・SVNのブランチは重いが、Gitのブランチは軽量
・Gitはオフライン作業や高速な開発スタイルに強い

JavaScript

JavaScript
＝スクリプト言語：コンパイルなしで、書いたらすぐに実行できる

変数の宣言

・var：古い書き方、非推奨
・let：再代入できる変数
・const：後から変更できない定数
※基本はconstを使い、必要なときだけletを使う

関数

関数式
関数を変数に代入する方法。関数が定義された後でしか呼び出せない

無名関数
function()のように関数名を省略する
一時的な処理を実行するのに適している
再利用できないしデバックしにくい

getElementById

document.getElementById()でHTMLドキュメント内の特定のid属性を持つ要素を取得できる

イベントとイベントリスナー

イベント
ウェブページ上でなにかが起こったときに発生する特定のアクション（ボタンのクリック、フォームの送信）

イベントリスナー
特定のイベントに対して実行される処理を定義するための仕組み

addEventListenerの第1引数にトリガーとなるイベント、第2引数に関数を渡す

チェック処理（validation）

test()メソッドは、正規表現を使って文字列が特定のパターンに一致するかどうかチェックするためのメソッド

const pattern = /^[0~9]+$/;
const tel = document.getElementById().value;

if(!pattern.test(tel)){
    alert("error");
    event.preventDefault(); //フォームの送信を中止
    return;
}

ファイルの外部化

jsファイルに記述して相対パスで呼び出すこともできる
HTMLは上から下に読み込まれるため、スクリプトを読み込む個所によって動作するタイミングが変わる

jQuery

HTMLの操作、イベントの処理、アニメーションなどを簡単に扱うためのツール（JavaScriptライブラリ）
できるだけ不要なコードを記述しないことが求められるため、
最近ではjQueryは古い技術として利用を控えるのが一般的

Bootstrap

Webサイトやアプリケーションのデザインを迅速に構築するためのフロントエンドフレームワーク