JavaScript library - 版の履歴

Senooken: Pakage manager NPM Install idealTree:lib: sill idealTree buildDeps

2025-09-11T08:18:18Z

Pakage manager NPM Install idealTree:lib: sill idealTree buildDeps

← 古い版		2025年9月11日 (木) 17:18時点における版
45行目:		45行目:
	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm		[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
	[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion		[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

			=== Pakage manager ===

			==== NPM ====

			===== Install =====

			====== idealTree:lib: sill idealTree buildDeps ======
			npm installを実行すると上記のメッセージで固まる。

			いろんな原因が考えられる。
			npm config set proxy http://proxy.example.com
			プロキシーサーバーがある場合、上記で設定するとうまくいく。自分の場合はこれだった。

	== Framework ==		== Framework ==
400行目:		413行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
473行目:		486行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: Concept 静的サイト生成

2025-07-28T00:34:53Z

Concept 静的サイト生成

差分を表示

Senooken: /* Start the project */

2025-07-27T10:07:59Z

Start the project

← 古い版		2025年7月27日 (日) 19:07時点における版
400行目:		400行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
473行目:		473行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
589行目:		589行目:
	}		}
	上記のhostの設定でlocalhostから0.0.0.0にしたらアクセス可能になる。		上記のhostの設定でlocalhostから0.0.0.0にしたらアクセス可能になる。

			なお、npm run devのサーバーは開発用で、負荷には耐えられない。複数タブを開いたままにしたりすると、状態の監視などで負荷が高い。動作が遅いと思ったら、タブを閉じた方がいい。

	==== Directory Structure ====		==== Directory Structure ====

Senooken: Vue.js Essentials Template Syntax Template Syntax — Vue.js Attributes

2025-07-27T06:02:41Z

Vue.js Essentials Template Syntax Template Syntax — Vue.js Attributes

← 古い版		2025年7月27日 (日) 15:02時点における版
345行目:		345行目:

	==== Essentials ====		==== Essentials ====

			===== Template Syntax =====
			[https://v2.vuejs.org/v2/guide/syntax Template Syntax — Vue.js]

			====== Attributes ======
			Mustaches記法はHTMLの属性内では使用できない。代わりに、v-bind指令を使う。
			<nowiki><div v-bind:id="dynamicId"></div></nowiki>
			v-modelと似ている。v-modelはユーザーの入力 (value) を受けて連動するという違いがある。v-bindは一方向で基本的には静的。

	===== Conditional Rendering =====		===== Conditional Rendering =====
392行目:		400行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
465行目:		473行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: Directory Structure pages

2025-07-27T05:31:15Z

Directory Structure pages

差分を表示

Senooken: List Rendering

2025-07-27T05:27:15Z

List Rendering

← 古い版		2025年7月27日 (日) 14:27時点における版
463行目:		463行目:

	==== Essentials ====		==== Essentials ====

			===== Conditional Rendering =====
			[https://v2.vuejs.org/v2/guide/conditional Conditional Rendering — Vue.js]

			ifで条件に応じた描画ができる。両方とも重要。

			===== List Rendering =====
			[https://v2.vuejs.org/v2/guide/list List Rendering — Vue.js]

			v-forで反復可能。<syntaxhighlight lang="html">
			<ul id="example-1">
			<li v-for="item in items" :key="item.message">
			{{ item.message }}
			</li>
			</ul>
			</syntaxhighlight>:keyを指定すると、並べ替えなどでVueが識別可能になる。

	===== Form Input Bindings =====		===== Form Input Bindings =====
494行目:		510行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
567行目:		583行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: axios

2025-07-26T11:51:01Z

axios

← 古い版		2025年7月26日 (土) 20:51時点における版
396行目:		396行目:

	generate: HTMLファイル変換時のパラメーターを設定。dir=distの代わりの配置場所。		generate: HTMLファイル変換時のパラメーターを設定。dir=distの代わりの配置場所。

			==== axios ====
			[https://axios.nuxtjs.org/ Introduction - Axios Module]

			Frontendの有名HTTPクライアントライブラリー。

			===== Setup =====
			[https://axios.nuxtjs.org/setup Setup - Axios Module]

			@nuxtjs/axiosを依存関係に追加する。
			npm install @nuxtjs/axios
			nuxt.config.jsにmodulesで追加する。
			export default {
			modules: ['@nuxtjs/axios']
			}
			これを指定すると、$axiosでNuxt内で参照可能になる。

	==== Other ====		==== Other ====
478行目:		494行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
551行目:		567行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: API Options / Data

2025-07-26T10:54:42Z

API Options / Data

← 古い版		2025年7月26日 (土) 19:54時点における版
445行目:		445行目:

	=== Vue.js ===		=== Vue.js ===

			==== Essentials ====

			===== Form Input Bindings =====
			[https://v2.vuejs.org/v2/guide/forms Form Input Bindings — Vue.js]

			====== Basic Usage ======
			v-model指令を、formのinput/textarea/select要素の双方向のデータ束縛に使える。

			==== API ====

			===== Options / Data =====
			データ関係のプロパティーがある。

			[https://v2.vuejs.org/v2/api/ API — Vue.js]

			* data
			* methods
			* watch

	==== Naming ====		==== Naming ====
459行目:		478行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
532行目:		551行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: Start the project

2025-07-26T09:28:28Z

Start the project

← 古い版		2025年7月26日 (土) 18:28時点における版
370行目:		370行目:
	/backend/public/*/.css		/backend/public/*/.css
	上記のように、nuxtの生成物は除外する。		上記のように、nuxtの生成物は除外する。

			===== Start the project =====
			以下のコマンドでローカルにサーバーを設置できて、ファイルの変更を即座に反映してくれる。
			npm run dev
			<nowiki>http://localhost:3000</nowiki> がデフォルト。npm run generateすると、全ファイルを生成するので時間がかかる。開発中はローカルサーバーでやった方が早い。

			なお、デフォルトがlocalhostになっていて、Dockerのホストからアクセスできない。

			[https://k-markup.com/blog/cannot-access-nuxt-in-container/ DockerコンテナのNuxtにlocalhostでアクセスできないとき]
			export default {
			server: {
			// port: 8000, // デフォルト: 3000
			host: '0.0.0.0', // デフォルト: localhost,
			// timing: false
			}
			}
			上記のhostの設定でlocalhostから0.0.0.0にしたらアクセス可能になる。

	==== Directory Structure ====		==== Directory Structure ====
442行目:		459行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
515行目:		532行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },

Senooken: /* Commands */

2025-07-26T05:49:43Z

Commands

← 古い版		2025年7月26日 (土) 14:49時点における版
359行目:		359行目:
	npm run generate		npm run generate
	このコマンドを実行すると、Nuxtの全部の静的ファイルが格納されたdistディレクトリーが作られる。これをサーバーのpublicとかに配置すると良い。		このコマンドを実行すると、Nuxtの全部の静的ファイルが格納されたdistディレクトリーが作られる。これをサーバーのpublicとかに配置すると良い。

			generate.dirを直接publicにしてもいい。その場合、public以下のVCSでの管理対象の工夫が必要。

			https://chatgpt.com/share/68846c45-1d20-800b-9351-276c3a2be352
			# Nuxt generate output (Laravel public に出力)
			!/backend/public/.gitkeep
			/backend/public/_nuxt
			/backend/public/*/.html
			/backend/public/*/.js
			/backend/public/*/.css
			上記のように、nuxtの生成物は除外する。

	==== Directory Structure ====		==== Directory Structure ====
431行目:		442行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-text-' + _uid"		:id="'input-text-' + _uid"
	type="text"		type="text"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	@paste="$emit('input', paste($event))"		@paste="$emit('input', paste($event))"
	/>		/>
	<label :for="'input-text-' + _uid">{{		<label :for="'input-text-' + _uid">{{
	/[._]/.test(label) ? $t(label) : label		/[._]/.test(label) ? $t(label) : label
	}}</nowiki><nowiki></label></nowiki>		}}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: String, default: ''</nowiki>, required: true },		value: { type: String, default: ''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。		<nowiki> </nowiki> // ファームウェアとスケジュールにエラーのないフォームがある。
504行目:		515行目:
	<template>		<template>
	<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">		<nowiki> </nowiki> <nowiki><div role="group" class="bv-no-focus-ring mb-3">
	<div		<div
	class="form-group-text"		class="form-group-text"
	:class="{ active: '' + value, 'is-invalid': error }"		:class="{ active: '' + value, 'is-invalid': error }"
	>		>
	<b-form-input		<b-form-input
	:id="'input-number-' + _uid"		:id="'input-number-' + _uid"
	class="form-control"		class="form-control"
	type="tel"		type="tel"
	autocomplete="off"		autocomplete="off"
	maxlength="10"		maxlength="10"
	:formatter="formatter"		:formatter="formatter"
	:value="value"		:value="value"
	@input="$emit('input', $event)"		@input="$emit('input', $event)"
	@compositionend="$emit('input', normalize($event.target.value))"		@compositionend="$emit('input', normalize($event.target.value))"
	/>		/>
	<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>		<label :for="'input-number-' + _uid">{{ $t(label) }}</nowiki><nowiki></label></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">		<nowiki> </nowiki> <nowiki><div :id="'input-live-feedback-' + _uid" class="invalid-feedback">
	{{ $t(error) }}</nowiki>		{{ $t(error) }}</nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	<nowiki> </nowiki> <nowiki></div></nowiki>		<nowiki> </nowiki> <nowiki></div></nowiki>
	</template>		</template>
	<nowiki><script>		<nowiki><script>
	export default {		export default {
	props: {		props: {
	value: { type: [String, Number], default: ''</nowiki>, required: true },		value: { type: [String, Number], default: ''</nowiki>, required: true },
	<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> error: { type: String, default: <nowiki>''</nowiki>, required: true },
	<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },		<nowiki> </nowiki> label: { type: String, default: <nowiki>''</nowiki>, required: true },