Node.js VexFlowでGruntを使う - 版の履歴

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-26T02:56:12Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月26日 (火) 11:56時点における版
278行目:		278行目:


	という具合にif文を追加するといいみたいですが、TSC(~~TypScript~~ Compiler)のチェックが厳しすぎて、自分にはどうやって変更していいのかがわからず、(vexflow_Root_Path)/Package.jsonファイルの中身の		という具合にif文を追加するといいみたいですが、TSC(TypeScript Compiler)のチェックが厳しすぎて、自分にはどうやって変更していいのかがわからず、(vexflow_Root_Path)/Package.jsonファイルの中身の

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-26T02:53:31Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月26日 (火) 11:53時点における版
242行目:		242行目:

	=== '''VexFlow固有のGrunt動作について''' ===		=== '''VexFlow固有のGrunt動作について''' ===
	この記事を書いた理由の一つがVexFlowの各クラスがコンストラクターにオブジェクトを引数で受け取る動作を期待しているにもかかわらず、GruntでMinify(圧縮)処理することによって、オブジェクトによる引数受け取りはできず、キー値を定義した順で引数をうけとることしかできなくなるという現象を知って、なぜこうなるのかということを知るためでした。		この記事を書いた理由の一つがVexFlowの各クラスがコンストラクターにオブジェクトを引数で受け取る動作を期待しているにもかかわらず、GruntでMinify(圧縮)処理することによって、<s>オブジェクトによる引数受け取りはできず、キー値を定義した順で引数をうけとることしかできなくなるという現象</s>を知って、なぜこうなるのかということを知るためでした。


362行目:		362行目:


			accidental.ts
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	constructor(type: string \| { type: string }) {		constructor(type: string \| { type: string }) {

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T11:33:57Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 20:33時点における版
362行目:		362行目:


			<syntaxhighlight lang="javascript">
			constructor(type: string \| { type: string }) {
			super();

			L('New accidental: ', type);//日本語コメント

			if (typeof type === 'object' && type !== null && typeof type.type !== 'undefined') {
			this.type = type.type; // オブジェクトかつtypeキーがある場合
			}
			else {
			this.type = type.toString();//type; // オブジェクトでない場合、またはtypeキーがない場合
			}

			this.position = Modifier.Position.LEFT;

			this.render_options = {
			// Font size for glyphs
			font_scale: Tables.NOTATION_FONT_SCALE,

			// Padding between accidental and parentheses on each side
			parenLeftPadding: 2,
			parenRightPadding: 2,
			};

			this.accidental = Tables.accidentalCodes(this.type);
			defined(this.accidental, 'ArgumentError', `Unknown accidental type: ${type}`);

			// Cautionary accidentals have parentheses around them
			this.cautionary = false;

			this.reset();
			}
			</syntaxhighlight>


			gracenotegroup.ts
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	constructor(grace_notes: StemmableNote[] \| {notes: StemmableNote[], slur?: boolean}, show_slur?: boolean) {		constructor(grace_notes: StemmableNote[] \| {notes: StemmableNote[], slur?: boolean}, show_slur?: boolean) {

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T11:20:20Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 20:20時点における版
357行目:		357行目:

	ちなみにChatGPT、Gemini、Copilotですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。上記の生成AIが教えてくれた参考サイトでさえも解決法は示せていませんでした。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。NEVER型の可能性を排除してもエラーは消えませんでした。オプショナル演算子?をつけてもダメ、<string>type.typeをしてもダメだし、type.type:anyやtype.type as anyもだめだし、なかなか厳しい。引数が単純なstringか？objectか？の両方の場合があるというのがうまくjavascriptの厳しいチェックをしている場合にはできないのかもしれない。C++の場合は引数の型に合わせてコンストラクタが選択されるので、こんなことで悩まなくてもよかったけどな。javascript10級の管理人にはその答えが見いだせない。しょぼいのう。		ちなみにChatGPT、Gemini、Copilotですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。上記の生成AIが教えてくれた参考サイトでさえも解決法は示せていませんでした。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。NEVER型の可能性を排除してもエラーは消えませんでした。オプショナル演算子?をつけてもダメ、<string>type.typeをしてもダメだし、type.type:anyやtype.type as anyもだめだし、なかなか厳しい。引数が単純なstringか？objectか？の両方の場合があるというのがうまくjavascriptの厳しいチェックをしている場合にはできないのかもしれない。C++の場合は引数の型に合わせてコンストラクタが選択されるので、こんなことで悩まなくてもよかったけどな。javascript10級の管理人にはその答えが見いだせない。しょぼいのう。


			最終的にはこのように記述すると良さそうだということの結論にたどり着きました。コンストラクタの引数に型をきちんと指定するという方法です。第一引数は、このように受け取るかもしれないという感じですね。オブジェクト{xx:xxx, xxx:xxxx}形式か単なる配列か？って感じですね。error TS2339: Property 'xxxx' does not exist on type 'xxxx'エラーは克服できた。けど、TypeScriptCompilerの激しいチェックに恐れをなす管理人なのでした。怖い。こんなこと守り切れるエンジニアどれくらいいるんだろう。


			<syntaxhighlight lang="javascript">
			constructor(grace_notes: StemmableNote[] \| {notes: StemmableNote[], slur?: boolean}, show_slur?: boolean) {
			super();

			if (Array.isArray(grace_notes)) {
			this.grace_notes = grace_notes;
			this.show_slur = show_slur;
			}
			else{
			this.grace_notes = grace_notes.notes;
			this.show_slur = grace_notes.slur;
			}
			this.position = Modifier.Position.LEFT;
			this.width = 0;
			this.slur = undefined;

			this.voice = new Voice({
			num_beats: 4,
			beat_value: 4,
			resolution: Tables.RESOLUTION,
			}).setStrict(false);

			this.render_options = {
			slur_y_shift: 0,
			};

			this.beams = [];

			this.voice.addTickables(this.grace_notes);

			return this;
			}
			</syntaxhighlight>

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T09:51:53Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 18:51時点における版
356行目:		356行目:


	ちなみにChatGPT、Gemini、Copilotですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。上記の生成AIが教えてくれた参考サイトでさえも解決法は示せていませんでした。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。NEVER型の可能性を排除してもエラーは消えませんでした。オプショナル演算子?をつけてもダメ、<string>type.typeをしてもダメだし、type.type:anyやtype.type as ~~anyもだめだし、なかなか厳しい。~~		ちなみにChatGPT、Gemini、Copilotですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。上記の生成AIが教えてくれた参考サイトでさえも解決法は示せていませんでした。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。NEVER型の可能性を排除してもエラーは消えませんでした。オプショナル演算子?をつけてもダメ、<string>type.typeをしてもダメだし、type.type:anyやtype.type as anyもだめだし、なかなか厳しい。引数が単純なstringか？objectか？の両方の場合があるというのがうまくjavascriptの厳しいチェックをしている場合にはできないのかもしれない。C++の場合は引数の型に合わせてコンストラクタが選択されるので、こんなことで悩まなくてもよかったけどな。javascript10級の管理人にはその答えが見いだせない。しょぼいのう。

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T09:44:23Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 18:44時点における版
371行目:		371行目:


	<syntaxhighlight lang="javascript" line start="341" highlight="~~343~~">		<syntaxhighlight lang="javascript" line start="341" highlight="3">
	function fontConfigs(watch = false) {		function fontConfigs(watch = false) {
	return [		return [

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T09:43:18Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 18:43時点における版
368行目:		368行目:


	その変わりデバッグ版とデバッグテストが出力されませんので、一度は元の状態で出力したものをとっておいてマージしないとだめですね。たまにマージしたほうがいいです。両方出力するようにしたいな。		その変わりデバッグ版とデバッグテストが出力されませんので、一度は元の状態で出力したものをとっておいてマージしないとだめですね。たまにマージしたほうがいいです。両方出力するようにしたいな。あ、上記を元に戻して343行目を追加したらうまくいきましたね。


			<syntaxhighlight lang="javascript" line start="341" highlight="343">
			function fontConfigs(watch = false) {
			return [
			getConfig('vexflow', PRODUCTION_MODE, !BANNER, 'Vex', watch),
			getConfig('vexflow-font-bravura', PRODUCTION_MODE, !BANNER, ['VexFlowFont', 'Bravura'], watch),
			</syntaxhighlight>



	[[Node.js]]に戻る		[[Node.js]]に戻る

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T09:39:08Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 18:39時点における版
356行目:		356行目:


	ちなみにチャットGPTですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。厳しい。		ちなみにChatGPT、Gemini、Copilotですら上記エラーは修正できませんでした。わかる人は存在してるんだろうけど、ごく少数の優秀な人たちだけにわかるerrorだと思います。上記の生成AIが教えてくれた参考サイトでさえも解決法は示せていませんでした。動作自体にはなんら問題はありませんけどね。やっちゃいけないことをやってはいるらしい。NEVER型の可能性を排除してもエラーは消えませんでした。オプショナル演算子?をつけてもダメ、<string>type.typeをしてもダメだし、type.type:anyやtype.type as anyもだめだし、なかなか厳しい。

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T03:45:54Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 12:45時点における版
251行目:		251行目:


	VexFlowの公式のコンテンツ配信ネットワークはフォルダ名にバージョン番号をつけて公開していますから、変更する都度、あたらしいvexflow.jsを閲覧者がダウンロードすることになります。自分の場合は、ちょこっと修正しては、公開みたいに大きな変更もしないのですが、vexflow.jsのパス名を更新しないとだめなのです。そうするとバージョンアップするごとにディレクトリを変更していてはビルドファイルだらけになるので、変更して利用するファイルだけにvexflow@4.2.2.04~~<span>~~.~~js</span>のように管理すればよいのだという結論にいたりました。マップファイルは~~<nowiki>vexflow~~<span>~~@~~</span>~~4.2.2.04.js.map</nowiki>のように差し替えて、<nowiki>vexflow~~<span>~~@~~</span>~~4.2.2.04.js</nowiki>の2行目を//# sourceMappingURL=<nowiki>vexflow~~<span>~~@~~</span>~~4.2.2.04.js</nowiki>.mapにするというメンドクササはありますが、これくらいの作業をして差し替えた方がいいということです。4.2.2を使っていると自分が自覚していればいいので、自分なりに変更して提供しているvexflowという意味でvexflow<span>@</span>1.0.04とかでも問題ないのでしょうけれど、このサイトのバージョンはいくつのモノを使っているのか知りたいという人向けにも4.2.2とかを差し込んだ方が親切なのかもしれません。そんな人いるとは思えませんけど。		VexFlowの公式のコンテンツ配信ネットワークはフォルダ名にバージョン番号をつけて公開していますから、変更する都度、あたらしいvexflow.jsを閲覧者がダウンロードすることになります。自分の場合は、ちょこっと修正しては、公開みたいに大きな変更もしないのですが、vexflow.jsのパス名を更新しないとだめなのです。そうするとバージョンアップするごとにディレクトリを変更していてはビルドファイルだらけになるので、変更して利用するファイルだけにvexflow@4.2.2.04.jsのように管理すればよいのだという結論にいたりました。マップファイルは<nowiki>vexflow@4.2.2.04.js.map</nowiki>のように差し替えて、<nowiki>vexflow@4.2.2.04.js</nowiki>の2行目を//# sourceMappingURL=<nowiki>vexflow@4.2.2.04.js</nowiki>.mapにするというメンドクササはありますが、これくらいの作業をして差し替えた方がいいということです。4.2.2を使っていると自分が自覚していればいいので、自分なりに変更して提供しているvexflowという意味でvexflow<span>@</span>1.0.04とかでも問題ないのでしょうけれど、このサイトのバージョンはいくつのモノを使っているのか知りたいという人向けにも4.2.2とかを差し込んだ方が親切なのかもしれません。そんな人いるとは思えませんけど。

Yo-net: /* VexFlow固有のGrunt動作について */

2024-03-25T03:39:15Z

VexFlow固有のGrunt動作について

← 古い版		2024年3月25日 (月) 12:39時点における版
251行目:		251行目:


	VexFlowの公式のコンテンツ配信ネットワークはフォルダ名にバージョン番号をつけて公開していますから、変更する都度、あたらしいvexflow.jsを閲覧者がダウンロードすることになります。自分の場合は、ちょこっと修正しては、公開みたいに大きな変更もしないのですが、vexflow.jsのパス名を更新しないとだめなのです。そうするとバージョンアップするごとにディレクトリを変更していてはビルドファイルだらけになるので、変更して利用するファイルだけにvexflow@4.2.2.04<span>.js</span>のように管理すればよいのだという結論にいたりました。マップファイルは<nowiki>vexflow<span>@</span>4.2.2.04.js.map</nowiki>のように差し替えて、<nowiki>vexflow<span>@</span>4.2.2.04.js</nowiki>の2行目を//# sourceMappingURL=<nowiki>vexflow<span>@</span>4.2.2.04.js</nowiki>.mapにするというメンドクササはありますが、これくらいの作業をして差し替えた方がいいということです。4.2.2を使っていると自分が自覚していればいいので、自分なりに変更して提供しているvexflowという意味でvexflow<span>@</span>1.0.04とかでも問題ないのでしょうけれど、このサイトのバージョンはいくつのモノを使っているのか知りたいという人向けにも4.2.2とかを差し込んだ方が親切なのかもしれません。そんな人いるとは思えませんけど。		VexFlowの公式のコンテンツ配信ネットワークはフォルダ名にバージョン番号をつけて公開していますから、変更する都度、あたらしいvexflow.jsを閲覧者がダウンロードすることになります。自分の場合は、ちょこっと修正しては、公開みたいに大きな変更もしないのですが、vexflow.jsのパス名を更新しないとだめなのです。そうするとバージョンアップするごとにディレクトリを変更していてはビルドファイルだらけになるので、変更して利用するファイルだけにvexflow@4.2.2.04<span>.js</span>のように管理すればよいのだという結論にいたりました。マップファイルは<nowiki>vexflow<span>@</span>4.2.2.04.js.map</nowiki>のように差し替えて、<nowiki>vexflow<span>@</span>4.2.2.04.js</nowiki>の2行目を//# sourceMappingURL=<nowiki>vexflow<span>@</span>4.2.2.04.js</nowiki>.mapにするというメンドクササはありますが、これくらいの作業をして差し替えた方がいいということです。4.2.2を使っていると自分が自覚していればいいので、自分なりに変更して提供しているvexflowという意味でvexflow<span>@</span>1.0.04とかでも問題ないのでしょうけれど、このサイトのバージョンはいくつのモノを使っているのか知りたいという人向けにも4.2.2とかを差し込んだ方が親切なのかもしれません。そんな人いるとは思えませんけど。