sugulogの日記

JavaScriptとfetchメソッド!様々なデータを外部サーバーに送信してみよう!!

f:id:sugulog:20210825232048p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとfetchメソッドいうことで

  • 様々なデータを外部サーバーに送信してみよう

について簡単に解説します!!

その為このブログを読むことで、fetchメソッドについて理解が深まるのはもちろん、fetchメソッドで様々なデータを送信できるようになります。

是非最後までご愛読ください。

 

今回は、

・fetch()

・データを送信してみよう

の順で解説していきます。

では早速、みていきましょう!!

・fetch()

非同期通信でリクエストを発行しそのレスポンスを取得することができるメソッド。

fetchメソッドを使用することで、非同期通信で外部サーバーにアクセス(データ送信)しデータを取得することができます。

基本的な記述方法はfetch()の引数にアクセスしたいデータを返してくれる外部サーバーのURLを指定するだけです。

f:id:sugulog:20210827173445p:plain

またfetchメソッドのレスポンスはPromiseオブジェクトとして扱います。

そのためレスポンス取得後(成功)にはthen()を使用し、リクエスト失敗(失敗)にはcatch()を使用し後続処理を定義することもできます。

f:id:sugulog:20210827174732p:plain

もちろんasync/await構文を使用して記述することも可能です。 

・データを送信してみよう

fetchメソッドを使いデータを送信する際にはデフォルトのGETで送る方法とPOSTで送る方法があります。

今回は送信データが見えないPOSTを利用し送信することを想定して解説していきます。

POSTで送信する場合、fetchメソッドの第二引数としてオプションを指定する必要があります。

このオプションにはmethod(送信方法)、headers(Content-Typeを指定、JSON等のデータ形態を指定する場合のみ)、body(送信データ)をオブジェクトで定義する必要があります。

それでは記述イメージについてみていきましょう。

1.JSONデータで送信

f:id:sugulog:20210827231012p:plainJSONのContent-Typeはapplication/jsonです。

またJSON形式でデータを送信するので、dataをJSON.stringify()でJSON形式に変換する必要があります。

2.Formデータ(new FormDate)で送信

f:id:sugulog:20210828212044p:plain

new FromDataを使用しフォームデータとして送信する際、データはsetを使い第一引数にキー、第二引数に値を定義します。

またFormDataを使用するとContent-Typeはmultipart/form-dataとして自動的に定義されるため、headersとして定義する必要はありません。

この方法を使用するとサーバー側のPHPでは、$_POST["キー名"]として自動的に値が保存されています。

3.Formデータ(new URLSearchParams)

f:id:sugulog:20210828215700p:plain

new URLSearchParamsを使用しフォームデータとして送信する際、データはsetを使い第一引数にキー、第二引数に値を定義します。

この送信方法は「キー=値&キー=値...」という形でデータを送信します。

またURLSearchParamsを使用する際はContent-Typeをapplication/x-www-form-urlencoded; charset=utf-8と定義する必要があります。

この方法を使用するとサーバー側のPHPでは、$_POST["キー名"]として自動的に値が保存されています。

以上3つの記述イメージを紹介しましたが、実際はAPIと連携しデータを送信、取得すると思います。

またAPIと連携してみたブログも後日記述しますので、そちらも是非ご確認ください!!

 

以上、今回のブログでした。

fetchメソッドについて理解が深まり、fetchメソッドで様々なデータを送信できるようになりましたか??

APIと連携するための第一歩ですので、確実に理解していきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScriptとJSON!JSONを取り扱うメソッドを集めてみた!!

f:id:sugulog:20210824220322p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptJSONいうことで

  •  JSONを取り扱うメソッドを集めてみた!!

について簡単に解説します!!

その為このブログを読むことで、新しいJSONを取り扱うJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです!

また、新しいJSONを取り扱うJavaScriptメソッドに出会うたびに追記していきます!!

是非最後までご愛読ください。

 

今回は、

JSON

JSONを取り扱うJavaScriptメソッド

の順で解説していきます。

では早速、みていきましょう!!

JSON

様々な言語で共通して使用できる汎用的なデータ形式のこと。

PHPJAVAなどの他言語でも使用することが可能で、サーバーとの通信や外部ファイルとしてデータ保存する場合によく使用します。

データの定義方法としては以下です。

f:id:sugulog:20210824223057p:plain

{}(オブジェクト)の中でキーと値を定義します。

注意点としてはキーは必ず文字列の""(ダブルクオテーション)でなければいけない点です。

値としては文字列、数値、真偽値、配列、オブジェクトを使用できます。

オブジェクトの中にオブジェクトを含めることも可能で、深層の深いデータも定義することができます。

JavaScriptのオブジェクト(連想配列)と混同しないようにだけ気をつけましょう!

JSONを取り扱うJavaScriptメソッド

JSONという新しいデータと友達になるために、理解しようと必死に学習した思い出順なのでご了承ください。

JSON.parse()

引数に指定されたJSON形式で定義したされた文字列をJSONとして扱い、JavaScriptのオブジェクトとして変換する。

例)JSON.parse("{'name': 'suguru'}") → {name: 'suguru'}

JSON.stringify()

引数に指定されたJavaScriptのオブジェクトをJSON形式で定義された文字列に変換する。

例)JSON.stringify({name: 'suguru'}) → "{'name': 'suguru'}"

また第二引数にはリプレイサーと呼ばれるkeyとvalueを引数に持つ独自で定義した関数や配列の形で取得(変換)するキーを指定できます。

そして第三引数には変換後のオブジェクトに改行とインデントを挿入するために使用します。

 

以上、今回のブログでした。

新しいJSONを取り扱うJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか??

また新しい知識をどんどん蓄えていきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、async/await構文!非同期処理をよりシンプルに記述しよう!!

f:id:sugulog:20210822212634p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのasync/await構文いうことで

  •  非同期処理をよりシンプルに記述しよう

について簡単に解説します!!

その為このブログを読むことで、async/await構文について理解が深まるのはもちろん、非同期処理をよりシンプルに記述できるようになります。

是非最後までご愛読ください。

非同期処理、Promiseオブジェクトについては以下の記事で解説しています。

sugulog.hatenadiary.jp

sugulog.hatenadiary.jp

 

今回は、

・async/await構文

・非同期処理をよりシンプルに記述しよう

の順で解説していきます。

では早速、みていきましょう!!

・async/await構文

非同期処理を扱う構文。

Promiseオブジェクトを利用した構文よりも、よりシンプルに非同期処理を扱うことができます。

asyncは関数の前で宣言することにより、非同期処理で扱う関数を定義します。

定義された関数はreturnした場合には戻り値をresolveとして扱い、throwした場合は戻り値をrejectとして扱います。

そのためメソッドチェーンを行う際もreturnの場合はthen()、throwの場合はcatch()を使用します。

f:id:sugulog:20210822183002p:plain

f:id:sugulog:20210822183057p:plain

続いてawaitはasyncで定義された関数内のみで使用できます。

awaitで指定された関数はPromiseオブジェクトの結果が返されるまで処理を待ちます。

そして結果が返された時、asyncで定義された関数の処理を再開します。

f:id:sugulog:20210822204235p:plain

awaitで定義される関数はPromiseオブジェクトの結果を待つので、関数内ではPromiseオブジェクトを生成する必要があります。

それでは実行結果を見て見ましょう。

f:id:sugulog:20210822205048g:plain

awaitで定義した関数はsetTimeoutで処理を遅らせているのにもかかわらず、awaitで定義した関数より後に記述されている処理が、awaitで定義した関数の処理を待ち処理されているのが確認できますね!

・非同期処理をよりシンプルに記述しよう

sugulog.hatenadiary.jp

上記の記事で直列処理して以下のようなコードを紹介しました。

f:id:sugulog:20210822145651p:plain

このコードをasync/await構文を使用すると以下のように記述することができます。

f:id:sugulog:20210823214745p:plain
入れ子状態が緩和されコード自体が非常に見やすくなったと思います。

このようにasync/await構文を用いるとPromiseオブジェクトの記述がシンプルになります。

そして処理自体もしっかりと前の処理を待っているのが確認できますね!

f:id:sugulog:20210822150506g:plain

 

以上、今回のブログでした。

async/await構文について理解が深まり、非同期処理をよりシンプルに記述できるようになりましたか??

複雑な非同期処理を扱う際はasync/await構文を積極的に導入しましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、Promiseオブジェクトの応用編!非同期処理で並列処理、直列処理を扱おう!!

f:id:sugulog:20210821184257p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとPromiseオブジェクトの応用編いうことで

  •  非同期処理で並列処理、直列処理を扱おう

について簡単に解説します!!

その為このブログを読むことで、Promiseオブジェクトについてより理解が深まるのはもちろん、非同期処理の並列処理、直列処理についても理解が深まります。

是非最後までご愛読ください。

Promiseオブジェクトの基礎については以下で解説しております。

sugulog.hatenadiary.jp

今回は、

・並列処理

・直列処理

の順で解説していきます。

では早速、みていきましょう!!

・並列処理

Promiseオブジェクトでは複数の処理を同期に実行させ、その処理が全て完了した時に次の処理に繋げるような処理の順番を制御することできます。(並列処理)

そしてそんな処理の順番を制御するのがPromise.all(配列)メソッドです。

引数には配列でPromiseオブジェクトを指定し、その指定したPromiseオブジェクトの処理がresolved(処理成功)になった際に次の処理に進ませることができます。

実際にコードを見てみましょう。

f:id:sugulog:20210821220034p:plain

2つのPromiseオブジェクトで並列処理を行なっています。

Promise.allの引数としては配列の中に2つのPromiseオブジェクトを指定しています。

では実際にコンソールで処理の順番を確認して見ましょう。

f:id:sugulog:20210821220751g:plain

非同期処理により処理を遅らせていない一番最後のconsole.log()が始めに実行されています。

次に1つ目のPromiseオブジェクト、続けて2つ目のPromiseオブジェクトが実行されています。

そして最後に2つのPromiseオグジェクトがresolvedになったと同時に、Promise.allに対しthen()で指定した処理が実行されているのを確認できますね!

このように指定したPromiseオブジェクトの処理を全て待つのがPromise.allです。

またPromise.race()というのもあり、こちらは引数に配列で指定したPromiseオブジェクトの内、1つでもresolved(処理成功)になった際に次の処理に進ませることができます。

・直列処理

処理が終わった時に次の処理につなげていくような直列処理は外部データから情報を取得し、その情報を元に次の処理を行う際などによく用いられます。

Promiseオブジェクトのみで記述する際には、then()の中でPromiseオブジェクトをインスタンス化させることで複数の処理が繋がった直列処理を実施できます。

こちらも実際にコードを見てみましょう。

f:id:sugulog:20210822145651p:plain

コードとしては見づらいですが記述としてはシンプルです。

then()の中でPromiseオブジェクトをインスタンス化させ、そのPromiseオブジェクトに対しthen()を記述することで処理を繋いでいます。

では実際にコンソールで処理の順番を確認して見ましょう。

f:id:sugulog:20210822150506g:plain

2つ目の処理をsetTimeout()で遅らせていたのですが、3つ目の処理は実行されていませんね。

そして2つ目の処理が終わると同時に、3つ目の処理が実行されているのが確認できます!

このようにある処理が終わった時に次の処理が行われるような、複数の処理が繋がっている直列処理も記述することもできます。

またasync/awaitを使うことでよりコード自体をシンプルにすることもできます。

async/awaitについてはまた後日記事を作成いたしますので、そちらをご確認ください。

sugulog.hatenadiary.jp

 

以上、今回のブログでした。

Promiseオブジェクトについてより理解が深まり、非同期処理の並列処理、直列処理についても理解が深まりましたか??

非同期処理を扱うことで実装の幅が格段に広がります。

1歩ずつ1歩ずつ技術力を高めていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、Promiseオブジェクトの基礎編!非同期処理を扱おう!!

f:id:sugulog:20210817222442p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとPromiseオブジェクトの基礎編いうことで

  •  非同期処理を扱おう

について簡単に解説します!!

その為このブログを読むことで、Promiseオブジェクトの基礎について理解が深まるのはもちろん、非同期処理を扱う技術を手に入れることができます。

是非最後までご愛読ください。

 

今回は、

・Promiseオブジェクト

・メソッドチェーン

の順で解説していきます。

では早速、みていきましょう!!

・Promiseオブジェクト

非同期処理とは1つの処理を実行中であっても他の処理を実行できる実行方式のことを言います。

JavaScriptではこの非同期処理の実行方式を取っています。

処理時間がかかる関数などを実行した際に、その関数の処理が完了される前に次の処理が実行されたりします(非同期処理)。

そしてPromiseオブジェクトはそんな非同期処理を扱えるオブジェクトで、処理の順番を制御することができます。

使用方法はnew Promise(関数)でインスタンスを生成します。

また引数の中の関数の引数には第一引数としてresolve関数(処理成功時の関数)を指定し、第二引数には任意でreject関数(処理失敗時の関数)を指定し、関数の中で関数として処理を返すことができます。

言葉では理解しにくいので実際にコードを見てみましょう。

f:id:sugulog:20210817231457p:plain

上記ではresolve()が実行された場合は引数resolveには成功がvalueとして格納され、reject()が実行された場合は引数rejectにはvalueとして失敗が格納されます。

・メソッドチェーン

メソッドを実行した際にその結果に応じてさらにメソッドを実行する仕組みのこと。

Promiseオブジェクトにおいては処理成功時としてthen(関数)、処理失敗時としてcatch(関数)というメソッドチェーンがあります。

先程resolve()が実行された場合は引数resolveには成功がvalueとして格納され、reject()が実行された場合は引数rejectにはvalueとして失敗が格納されました。

メソッドチェーンを行うことでこの値を継承することができます。

こちらも実際にコードを見てみましょう。

f:id:sugulog:20210821175000p:plain

今回は成功時として処理を走らせています。

then(関数)の関数の引数を指定することで値を継承することができます。

f:id:sugulog:20210821175507p:plain

またここまでPromiseオブジェクトを理解すると、非同期処理の制御を実感することができます。

f:id:sugulog:20210821175819p:plain

Promiseオブジェクト自体は先に処理が始まりますがsetTimeoutで処理の時間を遅らせています。

そしてPromiseオブジェクト後の処理としてthen()、catch()を指定しています。

このように処理の順番を制御することで、ある処理の後に確実に行いたい処理を指定することができます。

そのためコンソールでは非同期処理により「記述としては後」が先に表示され、遅れて「失敗」が表示されるのが確認できます。

f:id:sugulog:20210821180711g:plain

このように 1つの処理を実行中であっても他の処理を実行できる非同期処理の処理の順番を扱うのがPromiseオブジェクトです。

またさらに踏み込んだ内容の応用編は以下の記事で解説しています。

sugulog.hatenadiary.jp

 

以上、今回のブログでした。

Promiseオブジェクトの基礎について理解が深まり、非同期処理を扱う技術を手に入れることができましたか??

非同期処理はJavaScriptでは必ず抑えたい概念です。

少しずつ確実に自分の力として身につけましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、setTimeoutやsetInterval!関数の実行タイミングを制御するメソッドを集めてみた!!

f:id:sugulog:20210729225650p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptと関数制御ということで

  • 関数の実行タイミングを制御するメソッド

について簡単に解説します!!

その為このブログを読むことで、新しい関数の実行タイミングを制御するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になること間違いなしです!

また、新しい関数の実行タイミングを制御するJavaScriptメソッドに出会うたびに追記していきます!!

是非最後までご愛読ください。

 

・関数の実行タイミングを制御するJavaScriptメソッド

関数を自分の手のように動かしたい時に動かせるように必死に学習した思い出順なのでご了承ください。 

・cancelAnimationFrame()

引数にrequestAnimationFrame()実行時に戻り値として返されるrequestIDを指定することで、requestIDに該当するrequestAnimationFrame()をキャンセルする。

・clearInterval()

引数にsetInterval()実行時に戻り値として返されるインターバルIDを指定することで、インターバルIDに該当するsetInterval()をキャンセルする。処理回数等を数え、一定回数処理したらキャンセルする場合によく使用する。

・clearTimeout()

引数にsetTimeout()実行時に戻り値として返されるタイマーIDを指定することで、タイマーIDに該当するsetTimeout()をキャンセルする。

・requestAnimationFrame()

ブラウザの再描画の前(一般的には16msの間)に引数で指定した関数を呼び出す。ブラウザの表示を妨げることなく処理が実行されるため、滑らかなアニメーションを作成するのに適している。関数内に記述しその関数を引数に指定することで、関数をループさせることができる。

sugulog.hatenadiary.jp

・setInterval()

第一引数に指定した関数を第二引数で指定したミリ秒数間隔で実行し続ける。関数はthisのスコープの問題上、アロー関数を使用するのが推奨されている。

sugulog.hatenadiary.jp

・setTimeout()

第一引数に指定した関数を第二引数で指定したミリ秒数後に実行する。関数はthisのスコープの問題上、アロー関数を使用するのが推奨されている。

sugulog.hatenadiary.jp

 

以上、今回のブログでした。

新しい関数の実行タイミングを制御するJavaScriptメソッドに出会えたり、何か困ったときのカンニングペーパーとして参考になりそうですか??

また新しい知識をどんどん蓄えていきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!

JavaScript、Mapオブジェクト!複数画像を遅延読み込みさせクリック時に表示させよう!!

f:id:sugulog:20210810000221p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとMapオブジェクトいうことで

  •  複数画像を遅延読み込みさせクリック時に表示させよう

について簡単に解説します!!

その為このブログを読むことで、Mapオブジェクトについて理解が深まるのはもちろん、複数画像を遅延読み込みさせる技術を手に入れることができます。

是非最後までご愛読ください。

 

今回は、

・Mapオブジェクト

・複数画像を遅延読み込みさせクリック時に表示させよう

の順で解説していきます。

では早速、みていきましょう!!

・Mapオブジェクト

キーと値の組み合わせを保持することができるオブジェクト。

普通のオブジェクトと何が違うのと思いますが、簡単に言えばMapオブジェクトの方がkey取得など操作性に優れていることがあげられます。

new Mapでインスタンス化後に値をセットするのにsetメソッドを使用し、取得するのにはgetメソッドを使用します。

第一引数にキーを指定し第二引数には値を指定します。

その他にも削除する場合にはdeleteメソッド、要素数を取得するのにはsetメソッドを使用したりします。

何度も値を出し入れする場合や複雑な処理を行いたい場合に使用すると可読性が高まります。

より詳しく知りたい方は1度公式リファレンスをお読みください!!

developer.mozilla.org

下記の実装ではMapオブジェクトのget、setメソッドのみを使用します。

・複数画像を遅延読み込みさせクリック時に表示させよう

まずはHTMLで画像表示箇所とボタンを作成します。

f:id:sugulog:20210811225620p:plain

ポイントとしてはdata属性として画像へのパスを持たせていることです。

次にJavaScriptの記述です。

f:id:sugulog:20210811225639p:plain

Mapオブジェクトをインスタンス化させ、各要素を取得しています。

次にDOMContentLoadedでHTML読み込みを監視し、querySelectorAllで取得した2つのimg要素をforEachで展開しています。

そしてMapオブジェクトのsetメソッドを使いそれぞれのimg要素をキーとし、date属性の値を値として保存しています。

Mapオブジェクトではキーの型を問わないのも大きな特徴です。

またボタンがクリックされた際には、HTML読み込み時と同じくquerySelectorAllで取得した2つのimg要素をforEachで展開しています。

そしてMapオブジェクトのgetメソッドを使いキーを指定し、先ほど保存したキーに対する値を取得しています。

この辺は普通のオブジェクトの扱いと変わりませんね!

最後にsrcを使いオブジェクトから取得した値をimg要素のパスとして設定しています。

では実際に動きを見てみましょう。

f:id:sugulog:20210811225656g:plain

初期表示では読み込みされず、ボタンクリック時に画像が表示されているのが確認できますね!!

Mapオブジェクトを使わずとも同じ実装は可能ですが、実際にコードを見た時に非常にシンプルでわかりやすいのを感じてもらえれば幸いです。


以上、今回のブログでした。

Mapオブジェクトについて理解が深まり、複数画像を遅延読み込みさせる技術を手に入れることができましたか??

1つ1つ確実に知識を蓄えていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!