Expressの入門

フレームワーク：Express【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムNode.js；v20.18.0【Expressとは】Node.jsで利用できるWebアプリケーションフレームワークです。Webアプリケーションとは、インターネット上で利用するサービスを動かすシステムです。フレームワークとは、システム開発時によく使う機能や設計などを予め用意してあるアプリケーションです。つまり、Webアプリケーションを開発する上では、より短いプログラムで効率よく開発することができます。【Express.jsの使い方】1.プロジェクトの作成新しいディレクトリ「myapp」を作成し、そのディレクトリでnpmプロジェクトを初期化します。C:\Users\Owner>d:D:\>mkdirmya...Expressの入門

Node.js--インストール編

Node.js【Node.jsとは】Node.jsは、一般的なJavaScriptでサーバーサイドの処理を制御できるように作られたもので大量のアクセスを高速に捌くことができる特徴があります。以前、JavaScriptはユーザーのブラウザ上で動作し、動的なWebページを構築するために使われていました。そして、サーバーサイドではPHPやRubyを使って開発するのが一般的でした。しかし、Node.jsの登場により、サーバー上でもJavaScriptを実行できるようになり、開発者はフロントエンドとバックエンドの両方をJavaScriptで書けるようになり、またモジュール機能によりさまざまな機能を簡単に組み込めるパッケージが公表される様になった。【Node.js＝ランタイム環境】ランタイム環境は、プログラムが動作す...Node.js--インストール編

JS--resizeイベント

resizeイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【resizeイベント】resizeイベントはブラウザのウィンドウサイズが変更されたときに発生するイベントです。onresizeプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてresizeを指定してイベントリスナーを登録できます。【resizeイベントの使い方】resizeイベントはページを表示しているブラウザのウィンドウサイズが変更されたときに発生するイベントです。【onresizeプロパティ】windowオブジェクトのプロパティにイベントハンドラを登録する場合イベントハンドラには、無名関数、アロー関数、コールバック関数は使える。【イベントリスナーを登録する場...JS--resizeイベント

beforeunloadイベント

beforeunloadイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【beforeunloadイベントとは】→HTMLページが現在のページから他のページへ遷移する直前に発生するイベントです。遷移前のため、確認ダイアログを表示してページの遷移をキャンセルすることができます。onbeforeunloadプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてbeforeunloadを指定してイベントリスナーを登録できます。【beforeunloadイベントの使い方】beforeunloadイベントはHTMLページが現在のページから他のページへ遷移する直前に発生するイベントです。【window.onbeforeunloadプロパテ...beforeunloadイベント

DOMContentLoadedイベント

DOMContentLoadedイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DOMContentLoadedイベントとは】DOMContentLoadedイベントはHTMLページの読み込みが完了しHTMLのパース(解析)が完了してDOMツリーの構築が完了した時点で発生するイベントです。このイベントはaddEventListenerメソッドの引数としてDOMContentLoadedを指定してイベントリスナーを登録してのみ利用できます。【DOMContentLoadedイベントの使い方】DOMContentLoadedイベントはHTMLページの読み込みが完了しHTMLのパース(解析)が完了してDOMツリーの構築が完了した時点で発生するイベントです。【イベントリスナーを...DOMContentLoadedイベント

loadイベント

loadイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【loadイベント】loadイベントはHTMLページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。【loadイベントの使い方】loadイベントはHTMLページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。【onloadプロパティに、イベントハンドラを登録した場合】windowオブジェクトのプロパティにイベントハンドラを登録する場合はonloadプロパティを使用します。【イベントリスナーを登録する場合】addEventListenerメソッドの一番目の引数には、'load'を指定し、2番目にはイベントハンドラを指定す...loadイベント

copyイベント,cutイベント,pasteイベント

copyイベント,cutイベント,pasteイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントの意味】・copyイベント→ブラウザ上でコピー操作を行ったときに発生するイベント・cutイベント→ブラウザ上でカット操作を行ったときに発生するイベント・pasteイベント→ブラウザ上でペースト操作を行ったときに発生するイベント【イベントの使い方】copyイベント、cutイベント、pasteイベントとも、下図の通りで、Elementオブジェクトで発生する。【要素属性値に、イベントハンドラーを登録した場合】※赤字は、属性名＜textareaoncopy="copy()"oncut="cut()"onpaste="paste()"＞＜/textarea＞＜script＞func...copyイベント,cutイベント,pasteイベント

JS--inputイベント

inputイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【inputイベントの使い方】inputイベントはフォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。HTMLElementオブジェクトで発生します。【要素属性：oninputにイベントハンドラーを登録した場合】＜label＞名前：＜inputtype="text"oninput="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【oninputプロパティにイベントハンドラーを登録...JS--inputイベント

JS--changeイベント

changeイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【changeイベントとは】フォーム(input要素)や選択メニュー(select要素)、テキストエリア(textarea要素)にてユーザーの操作によって値が変更されたときに発生するイベント。【onchange属性を使用する場合】＜label＞名前：＜inputtype="text"onchange="inputChange()"＞＜/label＞＜script＞functioninputChange(){console.log('Change');}＜/script＞【onchangeプロパティ】【イベントリスナーを登録した場合】【関数の引数にEventオブジェクトが渡された場合】イベントハンドラやイベントリス...JS--changeイベント

KeyboardEventで取得できるキー情報

KeyboardEventに含まれるキー情報【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キーに関するプロパティ】KeyboardEventオブジェクトではイベントが発生したときのキーの情報を参照するためのプロパティが用意されています。・プロパティKeyboardEvent.code押されたキーKeyboardEvent.key押されたキーが表す文字KeyboardEvent.codeはキーボードのどのキーが押されたのかを文字列で返します。それに対してKeyboardEvent.keyは押されたキーが表す文字を文字列で返します。aというキーを単に押したときと、Shift+aを押した場合で結果をみてください。code:KeyA,key:acode:KeyA,key:AKeybo...KeyboardEventで取得できるキー情報

JS---MouseEvent オブジェクト

MouseEventオブジェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【座標に関するプロパティ】MouseEvnetオブジェクトではイベントが発生したときのマウスの座標を表すプロパティが用意されています。座標はどこを原点とするかによっていくつかのプロパティが用意されています。MouseEvent.offsetXイベントが発生した要素の左上を原点とする座標MouseEvent.offsetY同上MouseEvent.clientXブラウザの表示エリア左上を原点とする座標MouseEvent.clientY同上MouseEvent.screenXディスプレイの左上を原点とする座標MouseEvent.screenY同上またブラウザで表示しているWebページが縦または横に長く...JS---MouseEventオブジェクト

JS--mouseenterイベント,mouseleaveイベント

マウスイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mouseenterイベントとは】mouseenterイベントはマウスのカーソルが要素の上に乗った時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【mouseleaveイベント】mouseleaveイベントはマウスのカーソルが要素のから離れた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:不可キャンセルの可否:不可【属性値にイベントハンドラを登録する場合】【要素のプロパティにイベントハンドラを登録する場合】【イベントリスナーの場合】【Eventオブジェクトが渡された場合】サンプルコード「マウスイベント.css」#mybox{wi...JS--mouseenterイベント,mouseleaveイベント

js--mousemove イベント

mousemoveイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousemoveイベントの使い方】mousemoveイベントはマウスのカーソルが要素の上にある状態で、マウスが動いた時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【要素の属性値にイベントハンドラを登録する場合】＜canvasid="mycanvas"onmousemove="mouseMove()"＞＜script＞functionmouseMove(){console.log('MouseMove');}＜/script＞【ノードの要素.プロパティにイベントハンドラを入れる場合】DOMを使って取得した要素のプロパティにイベントハンドラを登録す...js--mousemoveイベント

JS--マウスに関するイベント

マウスに関するイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【mousedownイベントとmouseupイベントの使い方】・mousedownイベントはマウスのカーソルが要素の上にある状態で、マウスが押された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能・mouseupイベントはマウスのカーソルが要素の上にある状態で、マウスが押された状態から離された時に発生するイベントです。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【属性値にイベントハンドラを登録した場合】・例文【DOMで得られた要素のプロパティにイベントハンドラを登録する場合】letbutton=document.get...JS--マウスに関するイベント

JS--dblclickイベント

dblclickイベント：マウスがダブルクリックされたとき【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【dblclickイベントについて】dblclickイベントはマウスのカーソルが要素の上にある状態で、マウスが極めて短い間隔で二回クリックされた時に発生するイベントです。ondblclick属性またはondblclickプロパティに対してイベントハンドラを設定したり、addEventListenerメソッドの引数としてdblclickを指定してイベントリスナーを登録できます。【dblclickイベントの使い方】Elementオブジェクトで発生します。イベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能1.要素の属性値にイベントハンドラを登録する場合...JS--dblclickイベント

JS--clickイベント

clickイベント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【clickイベントの使い方】clickイベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントイベントの種類:MouseEventバブリングの可否:可能キャンセルの可否:可能【onclick属性】要素の属性値にイベントハンドラを登録する場合はonclick属性を使う//属性＝イベントハンドラ＜inputtype="button"value="button"onclick="buttonClick()"＞＜script＞functionbuttonClick(){alert('Click');}＜/script＞【onclickプロパティの場合】DOMを使って取得した要素...JS--clickイベント

JS--イベントをコードから発生させる

イベントをコードから発生させる【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コードからのイベント発生】イベントはHTTPページをブラウザで見ているユーザーの操作によって発生しますが、プログラムの中で新しいイベントを作成し指定した対象でイベントを発生させることができます。【新しいイベントを作成する】最初に新しいイベントを作成します。作成するにはEventオブジェクトをのコンストラクタを使用します。書式：newEvent(eventtype[,option])1番目の引数にイベントの種類を表す文字列を指定します。既存のイベントを作成する場合は'click'や'mousedown'などを指定します。カスタムイベントを作成する場合は任意の名前を指定してください。省略可能な2番目の引数...JS--イベントをコードから発生させる

JS--デフォルトのキャンセルする

デフォルトのキャンセルする【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントに対するデフォルト】HTMLページをブラウザで開いている場合、例えばリンクをクリックすればリンク先のページへ移動したり、チェックボックスをクリックすればチェックされ、マウスホイールを回転すると画面がスクロールするといったデフォルトの動作がいくつか設定されています。EventオブジェクトのpreventDefaultメソッドを使用することで、イベントが発生したときにイベントに対してブラウザで設定されているデフォルトの動作をキャンセルさせることができます。【デフォルトの動作をキャンセルする】EventオブジェクトのpreventDefaultメソッドを使用すると、イベントに対するデフォルトの動作を止め...JS--デフォルトのキャンセルする

JS--イベントの伝搬を中断するには

イベントの伝搬を中断するには【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【キャンセルしたい場合】HTMLページ内でイベントが発生した場合、親要素へとイベントが伝搬していきますが、途中でこれ以上の伝搬を行わないようにイベントの伝搬を停止することができます。また、同じターゲットの同じイベントに対して複数のイベントリスナーを登録できますが、途中で他のまだ呼び出されていないイベントリスナーを呼び出さないように停止することもできます。【イベントの伝搬を止める】EventオブジェクトのstopPropagationメソッドを使用すると、イベントの伝搬を止めることができます。書式：event.stopPropagation()例えばイベントが発生し呼び出されたイベントリスナーの中でこのメソ...JS--イベントの伝搬を中断するには

JS--イベントの伝播の流れ：イベントフェーズ

イベントの伝搬【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントフェーズ】このHTMLページの中の'start'ボタンがクリックされたときに、クリックイベントがどのように発生し、どのように伝搬していくのかを理解する。【フェーズの種類】1、キャプチャリングフェーズ(Capturingphase)2、ターゲットフェーズ(TargetPhase)3，バブリングフェーズ(BubblingPhase)【キャプチャリングフェーズ】HTMLページの中の'start'ボタンがクリックされると、一番最上位のオブジェクトであるWindowオブジェクトでまずclickイベントを発生させ、その後DOMツリーの構造に沿って伝播する。Documentオブジェクト→html要素→、body要素→div...JS--イベントの伝播の流れ：イベントフェーズ

currentTargetプロパティとtargetプロパティの違い

currentTargetプロパティとtargetプロパティの違い【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Event.currentTargetプロパティとEvent.targetプロパティの違い】Event.currentTargetプロパティ→現在イベントリスナーが実行されている要素を指します。イベントが伝播している際に、イベントリスナーを設定した要素を指します。イベントハンドラの場合は＜inputtype="button"value="button"id="xxx"＞＜script＞functionbutotnClick(event){console.log('Hello');}letbutton=document.getElementById('xxx');//...currentTargetプロパティとtargetプロパティの違い

JS--発生したイベント情報の取得

発生したイベント情報の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Eventオブジェクトを受け取る】ターゲットとなる要素（＜input＞など）のプロパティに対してイベントハンドラを登録する場合と、addEventListenerメソッドを使ってイベントリスナーを登録した場合、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納されたEventオブジェクトが渡されてきます。例文＜inputtype="button"value="button"id="xxx"＞＜script＞//コールバック関数functionbutotnClick(event){console.log('Hello');}letbutton=d...JS--発生したイベント情報の取得

イベントハンドラの記述位置

イベントハンドラを登録するコードの記述位置に関する注意と対処方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コード順序に依るエラー】例文＜script＞要素と＜input＞要素の順序を逆さにすると、エラー>>TypeError:Cannotreadproperty'addEventListener'ofnull理由は、HTMLページはファイルのダウンロードが終わったあと、HTMLページに記述されている内容をページの先頭から順にパース(解析)してDOMツリーを構築し始め、＜script＞タグを見つける度、パースを中断してjavascriptのコードを実行し始める。最初にgetElementByIdメソッドを使ってid属性が'xxx'の要素ノードを取得しようとしますが、この要素...イベントハンドラの記述位置

JS--イベントリスナーの登録

イベントリスナーの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントリスナー】イベントリスナー（EventListener）は、プログラミングにおいて特定のイベントが発生したときに、そのイベントに応じて何らかの処理を行うための仕組みです。簡単に言えば、イベントリスナーは「何かが起きたら教えてね」というプログラムの部品です。【イベントハンドラと、イベントリスナーの関係】イベントリスナー:「ボタンがクリックされたら何かをする」と設定しておく。target.addEventListener(type（イベントの種類）,callback（イベントハンドラにコールバックを選択）[])イベントハンドラ:ボタンがクリックされたときに、実際に「何かをする」ためのコード。＜inputt...JS--イベントリスナーの登録

JS--要素のプロパティにイベントハンドラを登録する

要素のプロパティにイベントハンドラを登録する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム■DOMを使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。基本的な使い方はHTML要素の属性に対していイベントハンドラを登録する方法と似ていますが、JavaScriptのコードのみで実現することが出来る。【要素オブジェクトのプロパティにイベントハンドラを登録す】HTML要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。＜inputtype="button"value="button"onclick="イベントハンドラ"＞DOMを使用するとHTMLページの中の任意の要素を要素オブジェクトとして取得で...JS--要素のプロパティにイベントハンドラを登録する

JS--イベントハンドラの登録

イベントハンドラの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML要素の属性としてイベントハンドラを登録する】HTML要素の属性を使ってイベントハンドラを登録する方法です。例えばinput要素でマウスでクリックしたときに実行するイベントハンドラを登録するには次のように記述します。・方法＜nputtype="button"value="button"onclick="イベントハンドラ"＞onclick属性に対する値としてイベントハンドラを記述します。イベントハンドラの個所には実行するJavaScriptのコードや関数を記述します。イベントハンドラとしてJavaScriptのコードを直接記述するには次のように記述します。実行する文が一つの場合は末尾のセミコロンは省略でき...JS--イベントハンドラの登録

JS--クラスの継承

クラスの継承【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【class構文とは】class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。【class構文の書き方】1.クラス宣言する書式classクラス名{//コンストラクタや、メソッドを定義する}2、class式を用いる方法→class式での特徴としてクラスを再宣言（再定義）することができる。varmyClass=class{//コンストラクタやメソッドを定義する}【コンストラクタを作る】コンストラクタ、つまりクラスの初期化をconstructorメソッドで行うclassUser{//インスタンスのプロパティ設定と初期化construct...JS--クラスの継承

JS--オブジェクト指向のclassを理解する

オブジェクト指向のclassを理解する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【classとは】JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。基本構造classMyClass{constructor(){//コンストラクタ:インスタンスを作成する際に実行されるメソッド//インスタンス固有の初期化処理を行う}method1(){//メソッ...JS--オブジェクト指向のclassを理解する

JS--ドキュメントに文字を書く

ドキュメントに文字を書く【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ドキュメントに文字列を書き込む】Documentオブジェクトのwriteメソッドは、ドキュメントに対して文字列を書き込みます。書式：document.write(string)引数に指定した文字列をドキュメントに対して書き込みます。書き込まれた文字列はHTMLコードとして扱われます。サンプルブラウザを立ち上げる<script>要素の下にHelloが書き込まれていることが確認できます。このように簡単にドキュメントに対して文字列の形式でHTMLコードを書き込むことができますが、現在HTMLに関する仕様を定めているHTMLLivingstandardではこのメソッドの使用について推奨はしていません。Documen...JS--ドキュメントに文字を書く

JS--複数のノードをまとめて追加

複数のノードをまとめて追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DocumentFragmentオブジェクトとは】DocumentFragmentオブジェクトは、JavaScriptで使われる特別なオブジェクトで、親ノードを持たない軽量なドキュメントの一部を表します。これを使うと、複数のノードを一時的にまとめて操作し、最終的に一度にDOMツリーに追加することができます。【DocumentFragmentオブジェクトを作成する】最初に空のDocumentFragmentオブジェクトを作成します。DocumentオブジェクトのcreateDocumentFragmentメソッドを使います。書式:document.createDocumentFragment()実際に作成す...JS--複数のノードをまとめて追加

JS--現在処理を実行しているscript要素を取得

現在処理を実行しているscript要素を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【currentScriptプロパティの使い方】DocumentオブジェクトのcurrentScriptプロパティを参照すると現在実行している<script>要素を取得します。書式；document.currentScriptサンプルこのHTMLページをブラウザで表示するとコンソールには次のように出力されます＜script＞letelement=document.currentScript;console.log(element);＜/script＞ブラウザを立ち上げるJS--現在処理を実行しているscript要素を取得

HTMLを表す文字列からノードを作成し指定の位置に追加

HTMLを表す文字列からノードを作成し指定の位置に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを指定の位置に追加する】ElementオブジェクトのinsertAdjacentHTMLメソッドを使うと指定した文字列からノードを作成し追加することができます。書式：element.insertAdjacentHTML(position,text)2番目の引数に指定した文字列をHTML文として解析し、HTML文からノードを作成します。作成したノードを1番目の引数で指定した位置に追加します。1番目の引数で指定する位置2番目の引数にはHTMLとして解析可能な文字列を指定例文：'＜pclass="msg"＞Hello＜/p＞'サンプル・ブラウザを立ち上げる「前のノードを追加」ボ...HTMLを表す文字列からノードを作成し指定の位置に追加

JS--ノードの削除

ノードの削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノード削除方法】削除方法には、ChildNodeオブジェクトのremoveメソッドを使うか、NodeオブジェクトのremoveChildメソッドを使うかです。【removeメソッド】removeメソッドは指定のノードを削除します。書式：childnode.remove()例文id属性がxxxのノードを削除する場合letchildnode=document.getElementById('xxx');childnode.remove();【removeChildメソッド】NodeオブジェクトのremoveChildメソッドはノードを削除します。書式：parentnode.removeChild(childnode)1番目...JS--ノードの削除

JS--ノードの置換

ノードの置換【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを別のノードに置き換える方法】1.ChildNodeオブジェクトのreplaceWithメソッドを使ってノードを別のノードに置き換える方法書式；childnode.replaceWith(node[,node,...])引数には置き換えるNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、対象のノードを複数のノードと置き換えます。2.NodeオブジェクトのreplaceChildメソッドを使ってノードを別のノードに置き換える方法書式：parentnode.replaceCh...JS--ノードの置換

ノードを子ノードの中の指定ノードの前または後ろに追加

ノードを子ノードの中の指定ノードの前または後ろに追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの中の指定ノードの前に追加する(before)】ChildNodeオブジェクトのbeforeメソッドはノードを子ノードの中の指定ノードの前に追加します。書式：childnode.before(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。サンプルブラウザを立ち上げる表示されたボタンをクリックすると、まずliタグの新しい要素ノードとテキストノードを作成...ノードを子ノードの中の指定ノードの前または後ろに追加

JS--子ノードの追加

ノードを子ノードの中の先頭または最後に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの先頭に追加する】ParentNodeオブジェクトのprependメソッドはノードを子ノードの先頭に追加します。書式：parentnode.prepend(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。例えば追加するノードとしてdivタグの要素ノードを新しく作成し、追加先としてid属性がxxxのノードの子ノードの先頭に追加するには次のように記述します。letp...JS--子ノードの追加

JS--ノードの作成

ノードの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【要素ノードを作成する】DocumentオブジェクトのcreateElementメソッドは新しい要素ノードを作成します。書式；document.createElement(localname)1番目の引数に作成する要素ノードのタグ名をDOMStringオブジェクトで指定してください。戻り値はElementオブジェクトが返ります。例えばdivタグをの要素のノードを新しく作成するletelement=document.createElement('div');console.log(element.nodeName);>>DIVconsole.log(element.nodeType);>>1console.log(elem...JS--ノードの作成

JS--スタイルの取得と設定

スタイルの取得と設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【スタイルの基本】HTMLでは要素に対するスタイルの設定をstyleタグや個々の要素に対するstyle属性で設定できます。(外部のスタイルシートに記述しておき読み込むこともできます)。styleタグのサンプルこのページにはpタグが2つ含まれまれています。styleタグの中でpタグに対して文字色とフォントサイズに関するスタイルを設定しており、どちらのpタグにも同じようにスタイルが適用されていますブラウザを立ち上げる次に個々のpタグに対してstyle属性を使ってスタイルを設定するリロードする1つ目のpタグにはsytleタグでは設定していない種類のスタイルを設定している。（フォントの太さ）2つ目のpタグでは、style...JS--スタイルの取得と設定

JS--要素に設定された属性を削除

要素に設定された属性を削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性を削除する】ElementオブジェクトのremoveAttributeメソッドは、対象の要素に設定されている属性を削除します。書式：element.removeAttribute(qualifiedName)引数には削除する属性の属性名をDOMStringオブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。サンプルブライザを立ち上げる表示されたボタンをクリックすると、id属性の値が'shopinfo'の要素ノードを取得し、最初の子要素に設定されている属性の中でclass属性とtarget属性を削除します。そのあとで残っている属性を取得し名前と値をコンソールに出力します。JS--要素に設定された属性を削除

JS--要素に設定された属性の一覧を取得

要素に設定された属性の一覧を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性の一覧を取得する(attributesプロパティ)】Elementオブジェクトのattributesプロパティを参照すると、要素に設定されている属性の一覧を参照することができます。書式：element.attributes参照できる値は、属性名と属性値の情報が格納されたAttrオブジェクトの集合であるNamedNodeMapオブジェクトです。NamedNodeMapオブジェクトではlengthプロパティで格納されているAttrオブジェクトの数を参照できます。またitemメソッドで引数に指定したインデックスのAttrオブジェクトを取得できます。そしてAtrrオブジェクトではnameプロパティで属性...JS--要素に設定された属性の一覧を取得

JS--id属性やclass 属性の取得及び設定

id・classなどの属性の取得及び設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性とは】属性とは、HTMLのタグに補足情報を与える役割を持つもので、一般的には、id属性・class属性のようにタグに名前を付けたり、飾りをつけたり、働きを調整したりすることができます。【属性の指定方法】＜要素名属性名="属性値"＞〇〇の〇〇は〇〇です属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。【属性値を取得する(プロパティ)】JavaScriptからはプロパティや、メソッドを使って属性値を参照したり新しい値を設定することができます。要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。書式：...JS--id属性やclass属性の取得及び設定

要素内のHTMLを取得・設定

要素内のHTMLを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML文を参照する】innerHTMLプロパティは、HTMLElementオブジェクトのinnerTextプロパティと違って、HTML要素を含んで参照される。書式；element.innerHTML戻り値は要素に含まれるHTML文が文字列で戻されます。HTML文はHTMLファイルに記述されている内容をそのまま取得します。例えば次のdiv要素ノードのinnerHTMLプロパティの値を参照した場合、どのような値を返すのか確認します。＜div＞＜p＞Apple＜br＞Lemon＜/p＞＜p＞Orange＜/p＞＜/div＞div要素ノードにはの2つのp要素ノードが含まれています。要素内のHTML文をそのまま...要素内のHTMLを取得・設定

要素内のレンダリングされたテキストを取得・設定

要素内のレンダリングされたテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】HTMLElementオブジェクトのinnerTextプロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。書式；htmlElement.innerText戻り値は、すべてのテキストが連結されたDOMStringオブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。＜style＞タグのように元々ブラウザに表示されない要素のテキ...要素内のレンダリングされたテキストを取得・設定

JS--ノード内のテキストを取得・設定

ノード内のテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】NodeオブジェクトのtextContentプロパティを参照するとノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができます。書式；node.textContent戻り値はすべてのテキストが連結されたDOMStringオブジェクトが戻されます。実際にどのようなデータがテキストとして返されるのかは、ノードの種類によって異なります。*1と記述したノードについては、コメントと処理命令ノード以外のすべての子ノードのtextContentの値を連結した文字列を返します。それぞれのノードでNode.nodeValueがどのような値を返すのかは「ノードの値を取得・設定(n...JS--ノード内のテキストを取得・設定

JS--ノードの値を取得・設定

ノードの値を取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードの値を参照する】NodeオブジェクトのnodeValueプロパティを参照するとノードの値を取得することができます。書式；node.nodeValue戻り値はノードの値がDOMStringオブジェクトで戻されます。どのような値が返されるのかはノードの種類によって異なっています。例えばノードの種類がTEXT_NODE(テキストノード)の場合、テキストノードに含まれるテキストが返されます。サンプルブラウザを立ち上げるボタンを押すと、pタグのノードをすべて取得します。そのあとで、pタグの子ノードであるテキストノードを取得するためにそれぞれの最初の子ノードを取得します。最後にテキストノードのノードの値を取得し、コ...JS--ノードの値を取得・設定

JS--ノード名の取得

ノード名の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの名前を取得する】NodeオブジェクトのnodeNameプロパティを参照するとノードの名前を取得することができます。書式；node.nodeName戻り値はノードの名前を表すDOMStringオブジェクトが戻されます。名前はノードの種類によって異なっています例えばノードの種類がELEMENT_NODE(要素ノード)の場合は、要素のタグ名がノードの名前として返されます。ノードの種類がTEXT_NODE(テキストノード)の場合、常に"#text"という値がノードの名前として返されます。サンプルブラウザを立ち上げるボタンを押すと、id属性の値が'blog'のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで...JS--ノード名の取得

JS--ノードの種類を取得

ノードの種類を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの種類を確認する】NodeオブジェクトのnodeTypeプロパティを参照するとノードの種類を確認することができます。書式；node.nodeType戻り値はノードの種類を表すunsignedshort型の値が戻されます。どの値がどのノードの種類になるのかは次の一覧を見てください。ノードを取得したあと、ノードのnodeTypeプロパティを参照することで取得したノードの種類を確認することができます。サンプル＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞nodeType＜/title＞＜/head＞＜body＞＜p＞今日は外でランチを食べま...JS--ノードの種類を取得

ノードの子・親・兄弟ノードを取得--2

最初の子ノードと最後の子ノードを取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、【最初の子ノードと最後の子ノードを取得する】1，firstChildプロパティこのノードの1つ下の階層にある子ノードの中の最初のノードを取得することが出来る。書式；node.firstChild2，lastChildプロパティ】このノードの1つ下の階層にある子ノードの中の最後のノードを取得することが出来る。書式；node.lastChildこれらの戻り値としてNodeオブジェクトを返します。子ノードがなかった場合はnullが返ります。例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。letelement=document.getElementById('mai...ノードの子・親・兄弟ノードを取得--2

ノードの子・親・兄弟ノードを取得--1

ノードの子・親・兄弟ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【すべての子ノードを取得する】DocumentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使って要素ノードを取得したあと、NodeオブジェクトのchildNodesプロパティを参照することで、このノードの1つ下の階層にある子ノードをすべて取得することができます。・書式node.childNodesこのプロパティは参照専用です。戻り値としてNodeListオブジェクトを返します。NodeListオブジェクトは複数のノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得したノードの数を取得したり、...ノードの子・親・兄弟ノードを取得--1

querySelectorのサンプル

querySelectorのサンプル【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorのサンプル】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得する。ブラウザを立ち上げるボタンを押すとコンソールに表示されたら、OK【querySelectorAllのサンプル】querySelectorAllメソッドを使ったサンプルを試してみます。querySelectorAllメソッドは条件に一致するすべての要素ノードを取得します。ブラウザを立ち上げるボタンを押すquerySelectorのサンプル

CSSセレクタ形式の条件に一致する要素ノードを取得

CSSセレクタ形式の条件に一致する要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorメソッドおよびquerySelectorAllメソッド】querySelectorメソッドおよびquerySelectorAllメソッドは、CSSのセレクタ形式で条件を指定して一致する要素ノードを取得します。id要素の指定といった簡単なものから条件を組み合わせた複雑なものまで指定することができます。【querySelectorメソッド】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得します。・書式document.querySelector(selectors)引数にはCSSセレクタ形式の値をDOMStringオブジェクトで...CSSセレクタ形式の条件に一致する要素ノードを取得

name属性の値を指定して要素ノードを取得

name属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByNameメソッド】DocumentオブジェクトのgetElementsByNameメソッドはname属性の値を指定して要素ノードを取得します。・書式document.getElementsByName(name)引数にはname属性の値をDOMStringオブジェクトで指定します(例えば'hobby'など)。戻り値はNodeListオブジェクトです。NodeListオブジェクト→複数の要素ノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得した要素ノードの数を取得したり、指定の要素ノードを取り出すこと...name属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByClassNameメソッド】DocumentオブジェクトのgetElementsByClassNameメソッドは、要素のclass属性の値を指定して一致する要素ノードをすべて取得します。【書式と使い方】・書式document.getElementsByClassName(classnames)引数にはclass属性の値をDOMStringオブジェクトで指定します(例えば'box'など)。複数のclass属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば'boxmenu'など)。戻り値...class属性の値を指定して要素ノードを取得

タグ名を指定して要素ノードを取得

タグ名を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementsByTagNameメソッドとは】getElementsByTagNameメソッドは、要素のタグ名を指定して一致する要素ノードをすべて取得します。【getElementsByTagNameの書式と使い方】DocumentオブジェクトのgetElementsByTagNameメソッドはタグ名(要素名)を指定して要素ノードを取得します。・書式はdocument.getElementsByTagName(tagname)引数にはタグ名をDOMStringオブジェクト(文字列と考えて頂いて構いません)で指定します(例えば'div'や'p'など)。タグ名に'*'を指定した場合はすべての要素...タグ名を指定して要素ノードを取得

id属性の値を指定して要素ノードを取得法

id属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementByIdの書式と使い方】DocumentオブジェクトのgetElementByIdメソッドはid属性の値を指定して要素ノードを取得します。・書式document.getElementById(id)引数にはid属性の値をDOMStringオブジェクトで指定します(例えば'example'など)。戻り値はElementオブジェクトです。見つからなかった場合はnullが返されます。例えばid属性の値として'example'が設定された要素ノードを取得するには次のように記述します。letelement=document.getElementById('example');id属性...id属性の値を指定して要素ノードを取得法

JS--DOM

DOMとは【DOMとは】DOMとはDocumentObjectModelの略でHTMLやXMLのドキュメントに含まれる要素や要素に含まれるテキストのデータをオブジェクトとして扱い、ドキュメントをオブジェクトが階層的に組み合わされたものとして識別し、JavaScriptなど色々なプログラミング言語などから、オブジェクトを扱うためのAPIを提供している。DOMは標準化団体であるW3Cで以前は標準化が行われていましたが、現在ではWHATWGによって標準化が行われています。【ノードとは】DOMではドキュメントを構成するオブジェクトのことを「ノード」と呼びます。ノードはさらに種類に応じて「要素ノード」「テキストノード」「属性ノード」などに分類されます。【DOMの階層構造】DOMでは対象となるドキュメントをノートの階...JS--DOM

Ajaxを使った非同期通信の実践編2

Ajaxを使った非同期通信の実践編2【開発環境】OS：Win11（64ビット）クロムBrackets【Bracketsを使用する】1，Bracketsを起動する2，作業用フォルダを作る---「work」3，新規ファイルを作る--getText1.html4,コードを書く＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞Ajaxサンプル＜/title＞＜/head＞＜body＞＜p＞ボタンをクリックするとデータを取得します。＜/p＞＜form＞＜inputtype="button"value="ロード"onClick="getData()"＞＜/form＞テキストデータが入る部分を下記のように書く＜divid="result"＞＜/...Ajaxを使った非同期通信の実践編2

Ajaxを使った非同期通信の実践編

非同期通信の実践編【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムここでは、VisualStudioCodeの拡張機能であるLiveServerをインストールした状態で説明をする。出来ない人はBracketsを使ってください！【フォルダの作成】VScoodを開き、フォルダを開く【ファイルを2つ作る】1.Webページを表示する「sample1.html」ファイル作る2,データ用のファイル「data.txt」を作る【Webベージを立ち上げる】【サーバを立ち上げる】「データの取得」ボタンを立ち上げると、下図のようになったら成功Ajaxを使った非同期通信の実践編

Ajax を使った非同期通信方法

Ajaxを使った非同期通信方法【開発環境】OS：Win11（64ビット）Brackets-2.2.1クロム【非同期通信手段の概要】ここではAjaxによる非同期通信を行うためにXMLHttpRequestオブジェクトの作成し、サーバへリクエストを送信したあと、サーバからレスポンスを受信するまでの方法について解説する。【XMLHttpRequestオブジェクトを作成する】最初にXMLHttpRequestオブジェクトを使って、XMLHttpRequestオブジェクトのインスタンスを作成する。コンストラクタはnewXMLHttpRequest(値1，値2)のように引数がある。・書式letrequest=newXMLHttpRequest();//変数をインスタンス化する（オブジェクトを作成する）【HTTPリクエ...Ajaxを使った非同期通信方法

Ajaxを使った非同期通信

非同期通信を行う方法【開発環境】OS：Win11（64ビット）Brackets-2.2.1クロム【Ajaxとは】Ajax（エイジャックス）とは、Asynchronous+JavaScript+XMLの略称で、JavaScriptの組み込みオブジェクト「XMLHttpRequest」を用いた非同期処理のことです。【非同期通信と同期通信の違いは】同期通信→ブラウザ側からサーバにリクエストを投げてからレスポンス（応答）があるまで、ほかの処理が出来ない。非同期通信→同時に複数の処理をしたり、前の処理が終わる前に、順番を待たずに次の処理を始める通信を指します。サーバからのレスポンスを待っている間に、ほかの処理をすることが出来る。【XMLHttpRequestオブジェクトのコンストラクタ】Ajaxを使った通信を行う最...Ajaxを使った非同期通信

Windows用 Brackets

Windows用BracketsについてBracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタです。標準で基本機能が備わっていて、使いやすいので、初心者には最適なテキストです。昔はライブプレビューをすると、Chromから拒否されたが、V2.0.1からは改善された。これによって、同期通信が使える様になった。【ダウンロード】Bracketsの公式ホームページ<の下記のところをからダンロードを行ってください成功すると、PCのダンロードにが表示される【インストール】「Brackets-2.2.1.exe」をクリックすると、インストールが開始される。設定任意のフォルダを選択し、同意にチェックすると「次へ」をクリックする標準を選択すると、インストールが開始される。完了すると...Windows用Brackets

テキストエディタ：Phoenix Codeについて

テキストエディタPhoenixCodeに付いて【Brackets→PhoenixCode】Bracketsは、Webサイトの設計が簡単にできる、軽量で強力なオープンソースのテキストエディタでが、現在では、ライブプレビューが出来ないので、phoenixCoderエディターに移行標準で基本機能が備わっていて、使いやすいので、初心者には最適です。また、AjaxによるWebサーバが簡単に出来る。【ダウンロード】公式サイトから、ダウンロードする下記のファイルがダンロードされる（Win1164bit）【インストール】「Phoenix.Code_3.7.3_x64-setup.exe」をクロックすると、1、表示される「次へ」をクリック2.「同意する」をクリック3任意のフォルダにインストールしたい場合は「参照」クリックす...テキストエディタ：PhoenixCodeについて

コンソールをクリアする

コンソールをクリアする【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コンソールをクリアする】console.traceメソッドは、メソッドが呼び出された経路をコンソールに出力します。・書式はconsole.clear()console.clearメソッドを呼び出すとコンソールがクリアされます。ただし完全にクリアされるわけではなく'Consolewascleared'というメッセージと、console.clearメソッドを呼び出した戻り値としてのundefinedが表示されますサンプルコンソールをクリアする

メソッドが呼び出された経路を出力する

メソッドが呼び出された経路を出力する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【呼び出された経路を出力する】console.traceメソッドは、メソッドが呼び出された経路をコンソールに出力します。・書式console.trace([オブジェクト,...])console.traceメソッドが呼び出された経路についてコンソールに出力します。引数にオブジェクトを指定すると、経路といっしょにコンソールに出力することができます。デバッグを行う場合などに、どの関数を経由してこのメソッドが呼び出された場所に辿り着いたのかを確認したい場合に利用します。サンプル関数funcAの中にconsole.traceメソッドが記述されています。関数funcAを直接呼び出した場合は、console....メソッドが呼び出された経路を出力する

JS--呼び出された回数をカウント

呼び出された回数をカウント【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【呼び出された回数をカウントする】console.countメソッドは、呼び出されるたびに回数をカウントしていきコンソールに出力します。・書式はconsole.count([ラベル])console.countが呼び出された回数をカウントして出力します。プログラムの中の複数の個所でconsole.countメソッドが記述されている場合、引数として同じラベルが指定されたメソッドは同じカウンターとしてカウントされます。逆に同じ場所に記述されたconsole.countメソッドであっても、引数に文字列で指定したラベルの値が異なる場合は、ラベルの値毎に別のカウンターとして独立してカウントします。サンプルこのサンプル...JS--呼び出された回数をカウント

js-- console.time メソッド

console.timeメソッド【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【タイマーを使って処理時間を計測】Consoleオブジェクトで用意されているconsole.timeメソッドをおよびconsole.timeEndメソッドを使って、処理を行った時間をミリ秒単位で計測することができます。・書式はconsole.time(ラベル)console.timeEnd(ラベル)console.timeメソッドを呼び出すと時間の計測が開始されます。そしてconsole.timeEndメソッドが呼び出されると、計測が終了し開始から終了までの経過時間をコンソールに出力します。ラベルを指定することで、複数のタイマーを同時に動かして計測することができます。計測が完了すると'ラベル:xxxx...js--console.timeメソッド

条件式がfalseの場合だけエラーログを出力する

条件式がfalseの場合だけエラーログを出力する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【条件式に応じてログを出力する】console.assertメソッドを使用すると、引数に指定した条件式がfalseの場合だけコンソールにログを出力することができます。・書式はconsole.assert(条件式,オブジェクト[,オブジェクト,...])console.assert(条件式,プレースメントを含む文字列[,置換するオブジェクト,...])1番目の引数に条件式を記述します。この条件式を評価しfalseとなった場合だけコンソールにログを出力します。2番目以降の引数の指定方法についてはconsole.errorメソッドと同じです。・サンプルMath.random()関数は、0以上...条件式がfalseの場合だけエラーログを出力する

JS--コンソールへの出力をグループ化

コンソールへの出力をグループ化【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ログの出力をグループ化する】console.groupメソッドとconsole.groupEndメソッドを使用することでログへの出力をグループ化することができます・書式console.group([ラベル])console.groupEnd()console.groupメソッドが呼び出されてからconsole.groupEndメソッドが呼び出されるまでの間にconsole.logメソッドなどを使って出力されたログがグループ化されます。省略可能な引数のラベルを文字列で指定すると、グループの先頭でラベルを表示することができます。サンプルconsole.log('MyList');console.group...JS--コンソールへの出力をグループ化

JS--Console オブジェクト

Consoleオブジェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コンソールにログを出力する】Consoleオブジェクトで用意されているコンソールにログとして文字列を出力するメソッドには次の4つがあります。・書式はconsole.log(オブジェクト[,オブジェクト,...])console.info(オブジェクト[,オブジェクト,...])console.warn(オブジェクト[,オブジェクト,...])console.error(オブジェクト[,オブジェクト,...])それぞれのメソッドの引数にはコンソールに出力するオブジェクトを指定してください。オブジェクトの値がコンソールに出力されます。複数のオブジェクトを同時に出力する場合はカンマ(,)で区切り続けて記述します...JS--Consoleオブジェクト

息子介護物語-エピソードの終了

息子介護物語-エピソードの終了のお知らせ【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】敬愛会のふれ愛の里の特養ホームに入所【かかりつけ医】本町在宅クリニック（久喜市）【介護】全介助【食事】全粥でスプーンを使って自分で食べてる【排泄】おむつ【歩行】車椅子で、立つのがやっとで歩行は出来ない【生活態度】最近は、慣れてきたため、勝手に起き上がり、ベットから落ちるのが、減った。しかし、人が居ないと不安になり、落ち着きがなくなるそうだ。【住所移動】6/11日、特養ホームに入所にあたり、契...息子介護物語-エピソードの終了

息子介護物語-エピソード68（令和6年6月）

息子介護物語-エピソード68（令和6年6月）【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】1.ショートステイ敬愛会のふれ愛の里：ロングショート（4/11～）※デイケアのサービス目的は、身体機能の回復・意地、日常生活の回復、認知機能の改善で、リハビリなどの医療的ケアに力を入れています【介護関連企業】ケアマネ：すずみな（6/6あたりで終了）【かかりつけ医】・徳洲会古河総合病院（整形外科・泌尿器）・加須東病院（内科・整形外科）から、本町在宅クリニックに移行【病歴】平成29年以前；大...息子介護物語-エピソード68（令和6年6月）

JS--三角関数

三角関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【三角関数の種類と使い方】Mathオブジェクトでは三角関数に関係するメソッドとして次の13種類が用意されています。Math.sin(x)xのサインを返すMath.cos(x)xのコサインを返すMath.tan(x)xのタンジェントを返すMath.asin(x)xのアークサインを返すMath.acos(x)xのアークコサインを返すMath.atan(x)xのアークタンジェントを返すMath.sinh(x)xのハイパーボリックサインを返すMath.cosh(x)xのハイパーボリックコサインを返すMath.tanh(x)xのハイパーボリックタンジェントを返すMath.asinh(x)xのハイパーボリックアークサインを返すMath....JS--三角関数

JS--対数関数

対数関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【対数関数の種類と使い方】Mathオブジェクトでは対数に関係するメソッドとして次の4つが用意されています。Math.log(x)xの自然対数を返すMath.log1p(x)xの1+xの自然対数を返すMath.log10(x)xの10を底とした対数を返すMath.log2(x)xの2を底とした対数を返す対数に関する詳しい説明はここでは省略しますが、簡単に書くとx=apが成り立つ時、pをxのaを底とする対数と呼びます。pはaを何乗したらxになるのかを表す数値です。・ネイピア数のeはMathオブジェクトの静的プロパティ（値）も用意されている。Math.E自然対数の底//=>2.718281828459045Math.LN22の自然...JS--対数関数

JS--正か負か数値の符号の取得

正か負か数値の符号の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【数値の符号を取得する(sign)】MathオブジェクトのMath.signメソッドは対象の数値の符号を取得します。・書式はMath.sign(数値)引数に指定した数値の符号を取得します。正の値だった場合は1、負の値だった場合は-1、ゼロだった場合は0または-0を取得します。引数が数値ではなかった場合は数値に変換してから符号を取得します。・サンプルMath.sign(4.72);>>1Math.sign(-71);>>-1Math.sign(0);>>0Math.sign(-0);>>-0引数に指定した数値の符号を調べ、1、-1、0、-0のいずれかの値を返します。引数に数値ではない値を指定した場合は、数値に変...JS--正か負か数値の符号の取得

js-累乗

累乗【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【累乗を計算する(pow)】MathオブジェクトのMath.powメソッドは底と指数を指定して累乗を計算します。書式はMath.pow(底,指数)引数に指定した底と指数から累乗を計算し結果を返します。引数が数値ではなかった場合は数値に変換してから平方根を計算しますサンプルMath.pow(2,3);>8Math.pow(3,2);>2Math.pow(-4,3);>-64指数が負の値の場合Math.pow(2,-1);//2-1=1/2=0.5>>0.5Math.pow(2,-2);//1/22=1/4=0.25>>0.25Math.pow(2,-3);//1/23=1/8=0.125>>0.125指数が0の場合Math.pow...js-累乗

JS--平方根/立方根を計算する

平方根/立方根【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【平方根(sqrt)】MathオブジェクトのMath.sqrtメソッドは指定した値の平方根を計算する。・書式はMath.sqrt(数値)引数に指定した数値の平方根を計算し結果を返します。引数が数値ではなかった場合は数値に変換してから平方根を計算します。対象の数値が負の値の場合はNaNを返します。サンプルMath.sqrt(9);>>3Math.sqrt(4);>>2Math.sqrt(2);>>1.4142135623730951対象の値が数値でない場合Math.sqrt('25');>5Math.sqrt(-16);>NaNMath.sqrt(NaN);>NaNMath.sqrt(undefined);>NaN【立方...JS--平方根/立方根を計算する

JS--乱数

乱数を取得す方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【乱数を生成する(random)】Math.randomメソッドは乱数を生成して返します。・書式はMath.random()0以上1未満のランダムな浮動小数点数を作成して返します。乱数におけるシード(乱数を生成する設定値のようなものでう)を指定することはできません。・サンプルコードfor(leti=0;i<5;i++){console.log(Math.random());}<spanclass="bold">>>0.46734844249381324>>0.8023117892739917>>0.33077513353347476>>0.6943056771845824>>0.097841380222198020以...JS--乱数

息子介護物語-エピソード67（令和6年5月）

息子介護物語-エピソード67（令和6年5月）【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】1.ショートステイ敬愛会のふれ愛の里：ロングショート（4/11～）※デイケアのサービス目的は、身体機能の回復・意地、日常生活の回復、認知機能の改善で、リハビリなどの医療的ケアに力を入れています【介護関連企業】ケアマネ：すずみな【かかりつけ医】加須東病院（内科・整形外科）・徳洲会古河総合病院（整形外科・泌尿器）【病歴】平成29年以前；大久保病院で内科（胃腸）・整形外科（腰痛）に通院している...息子介護物語-エピソード67（令和6年5月）

JS--複数の値の中から最大/最小を取得す方法

複数の値の中から最大/最小を取得す方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【最大の値を取得する(max)】Math.maxメソッドは引数に指定した複数の値の中から最大の値を返す・書式Math.max([数値1[,数値2[,...]]])引数に指定した複数の値の中から最大の値を1つ戻り値として返します。引数が数値ではなかった場合は数値に変換してから比較を行います。引数が一つも指定されなかった場合は-Infinity、引数の中でNaNとなる値が一つでもあった場合はNaNが返されます。サンプルMath.max(4,10.2,16,-2);>16Math.max(7);>7Math.max();>-Infinity引数の中に数値ではないMath.max(7,'8.4',[3]...JS--複数の値の中から最大/最小を取得す方法

JS--小数点以下を削除し整数を取得する

小数点以下を削除し整数を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【小数点以下を削除する(trunc)】Math.truncメソッドは対象の値の小数点以下を削除し、整数部分を取得します。・書式Math.trunc(数値)引数に指定した数値の小数点以下を削除し、整数の部分だけを返します。引数が数値ではなかった場合は数値に変換してから小数点以下を削除した値を取得します。・サンプルMath.trunc(4.72);>4Math.trunc(-152.4435);>-152Math.trunc(0.66);>0引数に数値ではない値を指定した場合Math.trunc('32.14');>32Math.trunc([-4.75]);>-4Math.trunc(undefined...JS--小数点以下を削除し整数を取得する

JS-四捨五入/切り上げ/切り下げ

四捨五入/切り上げ/切り下げ【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【小数点以下を四捨五入する】MathオブジェクトのMath.roundメソッドは対象の値の小数点以下を四捨五入した値を取得します。・書式Math.round(数値)引数に指定した数値の小数点以下を四捨五入した値を返します。引数が数値ではなかった場合は数値に変換してから小数点以下を四捨五入した値を取得します。・サンプルMath.round(3.4);>>3Math.round(3.5);>>4負の場合Math.round(-3.6);>>-4Math.round(-3.5);>>-3Math.round(-3.4);>>-3数字でない場合Math.round('12.75');>>13Math.round(...JS-四捨五入/切り上げ/切り下げ

JS--絶対値を取得する(Math.abs)

絶対値を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【絶対値の取得(abs)】MathオブジェクトのMath.absメソッドは対象の値の絶対値を取得します。・書式Math.abs(数値)引数に指定した数値の絶対値を返します。引数が数値ではなかった場合は数値に変換してから絶対値を取得します。数値xの絶対値は一般的には x と表します。絶対値の計算は、正の値だった場合はそのまま返し、負の値だった場合は-1を乗算して正と負の符号を反転させたものを返します。・サンプルMath.abs(12);>>12Math.abs(0);>>0Math.abs(-12);>>12引数に数値ではない値を指定した場合は、数値に変換された上で絶対値を取得・サンプルMath.abs('-64');...JS--絶対値を取得する(Math.abs)

JS--静的プロパティ

Mathオブジェクトの静的プロパティ一覧【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【静的プロパティ】Mathオブジェクトで用意されている静的プロパティには下図の通り詳細は省くJS--静的プロパティ

JS--ローカルとUTCタイムゾーンの差

ローカルとUTCタイムゾーンの差【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ローカルとUTCのタイムゾーンの差を取得する(getTimezoneOffset)】DateオブジェクトのgetTimezoneOffsetメソッドは、ローカルとタイムゾーンとUTCタイムゾーンの差を返します。・書式Dateオブジェクト.getTimezoneOffset()静的メソッドではないですが、Dateオブジェクトの内容に関わらず現在の環境でのローカルタイムゾーとUTCタイムゾーンとの差を返します。戻り値はローカルからみてUTCのタイムゾーンが何分後かを返します。例えばローカルのタイムゾーンがUTC+0900だった場合は、-9(時間)×60(分)=-540となります。サンプルletd=new...JS--ローカルとUTCタイムゾーンの差

JS--Dateオブジェクトから年、月、分、秒などの値の取得

Dateオブジェクトから年、月、分、秒などの値の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を取得するメソッドの一覧】Dateオブジェクトが持つ値から日付と時刻の値をそれぞれ取得するメソッドそれぞれのメソッドはDateクラスのオブジェクトが持つ値から年や分の値を個別に取得します。この時、ローカルの環境で設定されているタイムゾーンが使用されます。Dateオブジェクトが持つ値から日付と時刻の値をそれぞれ取得しますが、UTCタイムゾーンを使用して表された値を取得するメソッドもある。【年、月、日、曜日の取得】1）年の値を取得する(getFullYear)DateオブジェクトのgetFullYearメソッドは、Dateオブジェクトが持つ日付と時刻の値からローカルのタ...JS--Dateオブジェクトから年、月、分、秒などの値の取得

JS--値から年、月、分、秒などの値を取得

Dateオブジェクトの値から年、月、分、秒などの値を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を経過ミリの値で設定する（メソッド）】DateオブジェクトのsetTimeメソッドは、Dateオブジェクトの新しい値をとして1970年1月1日00:00:00UTCからの経過ミリ秒で設定します。・書式Dateオブジェクト.setTime(経過ミリ秒)引数に指定した経過ミリ秒をDateオブジェクトの新しい値として設定します。・サンプルletd=newDate();console.log(d.getTime());1716618342311d.setTime(10000);console.log(d.getTime());10000console.log(d.t...JS--値から年、月、分、秒などの値を取得

JS--DateオブジェクトのsetTimeメソッド

setTimeメソッド【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を経過ミリ秒の値で設定する（setTime）】DateオブジェクトのsetTimeメソッドは、Dateオブジェクトの新しい値をとして1970年1月1日00:00:00UTCからの経過ミリ秒で設定します。・書式Dateオブジェクト.setTime(経過ミリ秒)引数に指定した経過ミリ秒をDateオブジェクトの新しい値として設定する。・サンプルletd=newDate();console.log(d.getTime());>>1602918864282d.setTime(10000);console.log(d.getTime());>>10000console.log(d.toUTCString()...JS--DateオブジェクトのsetTimeメソッド

JS--getTime/valueOf

getTime/valueOf【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻を経過ミリ秒の値として取得する(getTime)】DateオブジェクトのgetTimeメソッドは、Dateオブジェクトが持つ日付と時刻の値を1970年1月1日00:00:00UTCからの経過ミリ秒の値として返す・書式Dateオブジェクト.getTime()Dateオブジェクトが持つ日付と時刻の値を基準日時からの経過ミリ秒の値として返す。・サンプルletd1=newDate(1000);console.log(d1.getTime());1000letd2=newDate();console.log(d2.getTime());1716528159179最初の例ではコンストラクタに基準時間から...JS--getTime/valueOf

JS--値を指定のロケール形式にした文字列で取得する

値を指定のロケール形式にした文字列で取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻を指定したロケールの形式で文字列として取得（toLocaleString）】DateオブジェクトのtoLocaleStringメソッドは、Dateオブジェクトが持つ日付と時刻の値を指定したロケールの形式で文字列として返す。・書式Dateオブジェクト.toLocaleString([ロケール[,オプション]])・サンプルletd=newDate();console.log(d.toLocaleString());>2024/5/2015:39:50console.log(d.toLocaleString('en-US'));>5/20/2024,3:39:50PMconsole....JS--値を指定のロケール形式にした文字列で取得する

JS---値を文字列で取得する

Dateオブジェクトの値を文字列で取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【toStringメソッド】Dateオブジェクトが持つ日付と時刻の値をローカルのタイムゾーンとした場合の文字列として返す。・書式Dateオブジェクト.toString()Dateオブジェクトが持つ日付と時刻の値を文字列として返します。文字列の形式はロケールがアメリカの場合に使用される形式が使われます。タイムゾーンはローカルの環境で設定されているタイムゾーンを使う・サンプルletd=newDate();console.log(d.toString());>>FriMay17202416:06:27GMT+0900(日本標準時)現在の日時を持つDateオブジェクトを作成したあと、Dateオブジェ...JS---値を文字列で取得する

JS--Date オブジェクトのインスタンスを作成する方法

Dateオブジェクトのインスタンスを作成する方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Dateオブジェクトのコンストラクタの種類】Dateオブジェクトのインスタンス（実体）を作成するにはコンストラクタを使用します。・書式newDate()newDate(経過ミリ秒数)newDate(日付と時刻を表す文字列)newDate(年,月[,日[,時[,分[,秒[,ミリ秒]]]]])引数の指定方法が異なる4種類のコンストラクタが使用できます。このあと、それぞれの使い方について解説します。※Dateオブジェクトのインスタンスを作成すると、特定の日時を表す値を持ちます。この値は内部的には1970年1月1日0時0分0秒UTCからの経過ミリ秒という形式で保管されており、Dateオブジェ...JS--Dateオブジェクトのインスタンスを作成する方法

JS--グローバル関数のencodeURI /encodeURIComponent

encodeURI/encodeURIComponent関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【encodeURI関数の使い方】グローバル関数のひとつであるencodeURI関数は、引数に指定した文字列の中に含まれる特別な文字をエンコードします。・書式encodeURI(strURI)引数には対象となる文字列を指定してください。文字列の中の特別な文字がエンコードされた新しい文字列が戻り値として返される。・サンプルコードleturi='https://www.example.com/ブログ/park.html'console.log(encodeURI(uri));実行>https://www.example.com/%E3%83%96%E3%83%AD%E3%82%...JS--グローバル関数のencodeURI/encodeURIComponent

JS--グローバルのeval関数

eval関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【eval関数の使い方】グローバル関数のひとつであるeval関数は、引数に文字列として指定したJavaScriptのコードを実行します。・書式eval(実行するコード)引数には文字列として式や文を記述します。eval関数は最後に評価した式の値を戻り値として返す・サンプルletstr='x*y+10';letx=8;lety=5;letz=eval(str);console.log(z);>>50eval関数が実行されると、引数に指定した文字列で表された式が評価されます。評価された結果は変数zに代入する。・サンプルletstr='z=x*y+10;console.log(z)';letx=8;lety=5;letz;eva...JS--グローバルのeval関数

JS--グローバル関数のisFinite

isFinite関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【isFinite関数の使い方】グローバル関数のひとつであるisFinite関数は、対象の値が有限の値か無限の値か調べて、有限の値の場合にはtrueを返します。・書式isFinite(値)引数に指定した値が有限の値かどうかを調べます。値がNaN、正の無限大(Infinity)、負の無限大(-Infinity)であればfalse、それ以外はtrueを返します。値が数値型ではない場合はまず数値型に変換されたあとで調べます。サンプルisFinite(Infinity);>>falseisFinite(-Infinity);>>falseisFinite(NaN);>>false無限大ではない数値は有限数です。isFin...JS--グローバル関数のisFinite

JS--グローバル関数のisNaN

isNaN関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【isNaN関数】グローバル関数のひとつであるisNaN関数は、対象の値がNaNかどうかを調べてtrueまたはfalseを返す。・書式isNaN(値)引数に指定した値がNaNかどうかを調べます。値が数値型ではない場合はまず数値型に変換されたあとで調べます。NaNは特殊な値で、等価演算子である==や===でNaN自身と等しいかどうか調べてもfalseとなるため等価演算子でNaNかどうかを調べることはできません。そのためisNaN関数を使います。console.log(NaN==NaN);>>falseconsole.log(NaN===NaN);>>falseisNaN(NaN);>>trueisNaN関数では、引数とし...JS--グローバル関数のisNaN

JS--グローバル関数のparseFloat

parseFloat関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【parseFloat関数】グローバル関数のひとつであるparseFloat関数は、文字列を浮動小数点数に変換した値を返します。・書式parseFloat(文字列)もし、引数が文字列でない場合は、文字列に変換したあとで浮動小数点数に変換する。文字列の浮動小数点数への変換は次のように行われます。(1)文字列の先頭にある空白を取り除きます。(2)先頭に'+'または'-'がある場合は符号として扱います。(3)数値でない文字が現れる直前までの文字列を浮動小数点数に変換します。数値と判断される文字は数字の他にドット(.)と指数を表すeまたはEです。ただし二回目からのドット(.)は数値とはみなされません。初めの文字が数値...JS--グローバル関数のparseFloat

JS--グローバルのparseInt関数

parseInt関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【グローバルオブジェクトとは】JavaScriptのコードはオブジェクトに格納されている必要があり、その格納するオブジェクトの最上位に位置する単一のオブジェクトがグローバルオブジェクトと呼ばれます。また、グローバルオブジェクトは明示して生成することができません。つまりnew演算子では作成できません。【グローバル関数】グローバル関数とはグローバルオブジェクトで定義されている関数です。【parseInt関数の使い方】グローバル関数のひとつであるparseInt関数は、文字列を整数に変換した値を返します。書式は次の通りです。parseInt(文字列[,基数])1番目の引数に指定した文字列を整数に変換します。引数が文字列...JS--グローバルのparseInt関数

JS--パターンのフラグ

正規表現で設定できるフラグの一覧【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ジャバスクリプトの正規表現で利用できるフラグ】【正規表現オブジェクトへのフラグの設定方法】フラグは正規表現オブジェクトを作成するときに設定します。正規表現リテラルの場合は次のように記述します。/パターン/フラグフラグにはひとつまたは複数のフラグを表す文字を指定します。letregexp1=/.*/i;letregexp2=/.*/ig;RegExpコンストラクタを使用する場合は次のように記述します。newRegExp(パターン,フラグ)フラグにはひとつまたは複数のフラグを表す文字を指定します。letregexp1=newRegExp(/.*/,'i');letregexp2=newRegExp(/....JS--パターンのフラグ

JS--パターンの先読み・後読み

先読みと後読みを使ったパターンの記述【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【正規表現における先読みと後読みとは】先読み(肯定先読み、否定先読み)と後読み(肯定後読み、否定後読み)の書式は次の通りです。パターンA(?=パターンB)肯定先読みパターンA(?!パターンB)否定先読み(?<=パターンB)パターンA肯定後読み(?<!パターンB)パターンA否定後読み先読みの場合→パターンAの直後にパターンBが続く場合(または続かない場合)にマッチする。後読みの場合→パターンAの直前にパターンBがある場合(またはない場合)にマッチします。どちらもパターンBも含めてマッチするかどうか判断しますが、マッチした文字列として取得するのはパターンAにマッチした部分だけです。【肯定の先読み】肯定...JS--パターンの先読み・後読み

息子介護物語-エピソード66（令和6年4月）

息子介護物語-エピソード66（令和6年4月）【被介護者】母：91才要介護3身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】1.DK（デイケア）さくら（加須東病院内）：1回/週（土曜日）2.ショートステイ敬愛会のふれ愛の里：毎週2泊3日久下さん家：毎週2泊3日（6年3/7～3/24）、ふれ愛がコロナのため※デイケアのサービス目的は、身体機能の回復・意地、日常生活の回復、認知機能の改善で、リハビリなどの医療的ケアに力を入れています【介護関連企業】ケアマネ：すずみな介護用具：ひまわり館（車椅子・布団用手すり）4月で終了【かかりつけ医】加須東病院...息子介護物語-エピソード66（令和6年4月）