プログラミング言語

Vue3 + Vite + TailwindCSSのセットアップの仕方

by
Vite-Vue-TailwindCSS

今日はViteのビルドツールを使ってVue3とtailwindCSSのセットアップの仕方を紹介します。 すでにTailinwdCSSを使ったことがある方ならその良さをVueで発揮したいですよね？TailwindCSSは軽量でさらにデプロイの際に使用していないCSSをファイルから除くことができる優れたユーティリティライブラリです。 GitHubからソースコードを参照してください。 Vueのプロジェクトのセットアップ ではcdのコマンドでプロジェクトのディレクトリに移動してnodeのモジュールをインストールします。 Tailwind CSSのセットアップ Node.js 12.13.0より新しいバージョンであることを確認してください。 ではTailwindCSSをインストールします。 次にTailwindcssをイニシャライズしてコンフィグファイルを生成します。 ではプロジェクトのルート直下にtailwind.config.jsファイルが作成されたのでそちらを下記の様に更新します。 またpostcss.config.jsも自動で作成されていることを確認します。ちなみにnode.jsでエラーが出る場合はファイル名をpostcss.config.cjsに変えると直ります。 使用されていないスタイルを除くには： tailwind.config.jsにあるpurge（パージ）オプションにコンパイルしたcssファイルを出力したいパスを指定します。 次にassets/styles.cssなどのようにグローバルで使用したいCSSファイルを作成し、下記の様にtailwindcssをインポートします。 次にmain.jsからVueアプリの生成時に上記のcssファイルをインポートするように指示します。 main.js では最後にApp.vueにtailwindCSSのclassを使ってスタイリングをしてみます。 これでテスト用のウェブサーバーを起動するとスタイリングがアプライされたことが確認できますね。 デプロイの際には 下記のコマンドでvueアプリをデプロイ用にビルドします。 これでブラウザの検証ツールから確認すると最小限のCSSしか使用されていないことが確認できますね。 お疲れ様でした。

【コピペだけ】NuxtJSでCodePenのクローンを作成しよう

by

皆さん、CodePenは使ったことがありますか？CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。 今日はシンプルなCodePenのクローンを作成したので紹介します。 CodePenの例： 今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。 完成形は画像のようになります。完成したコードはこちらのGitHubリポからどうぞ。 この記事を読む前に知っておくこと このコードで使用するテクニック リポジトリのクローン では下記のコマンドを使用してリポジトリからデモアプリをセットアップします。 ファイル構成 nuxt.config.ts Nuxtのコンフィグファイルです。 monaco editorのモジュールの登録と、PrimeVueのUIライブラリで使うスタイルのインポートをしています。 plugins/primevue.js pluginsディレクトリはNuxtで指定されているディレクトリでレンダー時にNuxtが自動で読み込んでくれます。ここでは、グローバルで使えるPrimeVueのコンポーネントを登録しています。 詳しいPrimeVueのセットアップの仕方の記事はこちらから。 pages/code.vue pagesも同じようにNuxtで指定されている、自動で読み込んでくれるディレクトリです。pages/index.vueがランディングページになります。 /codeのページに行くとcode.vueのページ（コンポーネント）が読み込まれます。 components/code/editor.vue componentsディレクトもNuxtで指定されているディレクトリになります。 ここで登録されたvueファイルはグロバーバルで<CodeEditor>のように使用することができます。ファイル名の最初が大文字になることと、componetsディレクトリからディレクトリ名を当ててパスをしてするような方法になります。 TabViewとTabPanel：PrimeVueのコンポーネントです。 MonacoEditor：monaco editorのNuxtライブラリで使えるコンポーネントです。 valueJS、valueHTML、valueCSS：初期値とユーザーが入力できるリアクティブな値 iFrameのsrcdoc：iframeDoc変数（computedのHTMLファイルをレンダーします） monacoConfig：テキストエディターのパラメーター（ダークテーマ、ミニマップの表示、行数の表示など） 上記で説明した部分が今回のメインとなるロジックになります。 追加できなかった部分 JavaScriptを実行した際にconsole.logの値をブラウザ（consoleタブ）に表示 これは、以下の理由より完成できませんでした。 お疲れ様でした。

Viteとmonaco-editorを使ってVSCodeと同じテキストエディタを作成しよう

by
Viteでmonao editorを使う

今日はMicroSoft社のテキストエディタVSCodeで使われているmonaco-editorを紹介します。Viteと組み合わせることで今後VueやReactなどにも簡単に組み込むことが可能になります。 VSCodeはどんどん進化しており、Co Pilotも公開されてからAIで次のコードを推測して予測してくれる機能はどのテキストエディタにもかないません。 完成例はこのようになり、ユーザーがVSCodeと同じようにコードを書くことができます。 ちなみにVSCodeをブラウザ上で起動したい場合はhttps://vscode.dev/からアクセスしてコードを書くことができます。 今日紹介するmonaco editorはこちらのURLで試してみることができるので是非使ってみてください。 https://microsoft.github.io/monaco-editor/ まずはmonaco editorのGitHubリポジトリを見てみましょう。 https://github.com/microsoft/monaco-editor このmonaco editorはオープンソースでMITライセンスになります。つまり。。。コードの商用、個人の利用に関わらず、改変でも、再配布でも、商用利用でも、有料販売でも、どんなことにでも自由に無料でつかうことができます。 Reactのコンポーネント ちなみにReactのコンポーネントとして使いたい場合は下記のURLからどうぞ。ライブラリがあるのでそちらを使うと簡単にReactで細かい設定までできるようになります。 https://www.npmjs.com/package/@monaco-editor/react monaco editorでできること monaco editorはVSCodeのです。つまりVSCodeのテキストエディタの部分と同じことができるようになります。 なぜVite monaco editorはESMとAMDの2つのモジュールのバージョンが使えます。今回はESMの方を使います。 どちらにしてもWeb packというバンドラーが入っているのでそれを使わないといけません。 良いことにViteではビルドインのWeb packのworkerのサポートができます。Viteは軽量かつ完成度の高いビルドツールとして標準化されてきているので是非、使うことをお勧めします。 Viteのプロジェクトを作成 では、monaco editorをインストールする前にViteでJavaScriptのプロジェクトを作成していきましょう。 詳しいViteの使い方はこちらの記事を参照してください。 monaco editorをインストール では下記のコマンドでmonaco editorをインストールしてみましょう。 では、サンプルのcounter.jsを削除してmain.jsをこのように書きます。 こちらのコードはGitHubのmicrosoft/monaco-editorから引用しました。 ちなみにダークカラーにしたい場合、テキストエディタをRead Onlyにしたい場合などの細かい設定は下記のようにできます。その他の例は、monaco-editorのPlay Groundで確認してください。 次にstyles.cssを適当に書きます。 重要なのは#contianerのサイズを指定しているところだけです。 このid=contianerにmonaco editorがレンダーされるようになるからです。 完成したコードはGitHubで確認してください。 お疲れ様でした。

VueとFirebaseでGoogleアカウントを使ったログインシステムを作る

by
ユーザーをGoogleアカウントでログインさせる

前回はGoogleが提供するFirebaseのサービス（Baas:Backend as a Service）を紹介しました。 今日は、このFirebaseとJavaScriptのフレームワークのVueを使ってユーザーのログインシステムを作ってみましょう！ まずは、基本となるメールアドレスを使ってのログインのロジックを理解することが重要になります。順に従って進めていくことをお勧めします。 完成したコードはGitHubからどうぞ。 環境 なぜGoogleアカウントを使ってログインを作る必要があるか Googleアカウントである必要はありません。Twitterでも、GitHubアカウントでもOKです。数年前から見かけるようになったGoogleアカウントを使ってログインなどの認証方法はOAuthと言います、 OAuth方法を使用することで下記のメリットがあります。 以上のことから開発のスピードが速くなることとセキュリティが強化されることが理解できます。 Firebaseは必要か 詳しいFirebaseの説明は前回の記事を参照して下さい。Firebaseはあくまでもオプショナルです。しかし、無料でバックエンドのサービスを始められること、簡単にOAuthのロジックをフロントエンドに組み込められることから使っていて損はないシステムだと思います。またクライアント側はVueで作成するので必要に応じてバックエンド側のみ、フロントエンド側のみのテクノロジーを変更することができるのもメリットになります。 Vueプロジェクトの作成 今回はViteのビルドツールを使用してVueアプリを作成します。詳しいViteの使い方はこちらを参照してください。 ではテキストエディタを開いて基本のページを作成していきます。 Emailを使ったユーザー登録 では参考例として、Emailを使用したユーザー登録を作成していきます。その後にGoogleアカウントを使用したユーザーログインを作成します。 まずは、srcフォルダにFeed.vue、Home.vue、Register.vue,SignIn.vueを作成します。Feed.vueはログインしたユーザーのみアクセスさせるように進めていきます。 次にURLのラウティングを行うためにvue-routerをインストールします。下記のコマンドを実行してください。 次にsrc/routerフォルダを作成しindex.jsファイルを作成します。 ではrouter/indewx.jsに下記の様にページとなるコンポーネントを登録していきます。 つぎに作成しtarouterをmain.jsにインポートして読み込ませます。 次にデフォルトでついてきたHelloWorld.vueを削除して、App.vueに行きます。 App.vueにrouter-viewを登録してURLごとに読み込まれるページViewをレンダーさせます。 App.vue では、各Home、SignIn、Register、Feedのコンポーネントに適当なHTMLを入れてサーバーを起動するとURLごとにViewが変わることが確認できますね。 では最後にナビゲーションバーを作成して、URLではなくボタンからユーザーがページにジャンプできるようにします。 App.vue ここまで問題がないことを確認してください。 Firebaseのプロジェクトを作成 ではFirebaseのプロジェクトを作成していきます。詳しくはFirebaseを始めようの記事を参考にしてください。 手順だけ説明します。 下記のコマンドでfirebaseのライブラリをインストールします。 下記のようなコードがでるのでコピーしておきます。 認証システムを設定する firebaseの構築タブからAuthenticationを選択します。 始めるのボタンを押します。 Emailを追加します。 次にGoogleを追加します。 これで２つのプロバイダが登録されました。 では、npm install firebaseのコマンドを実行していることを再度確認してテキストエディタに戻ります。 次に先ほどコピーしておいたfirebaseのスニペットをmain.jsに貼り付けます。 initializeApp(firebaseConfig);の部分だけ変更してOKです。 認証システムを追加する では下準備が整ったところでいよいよユーザー認証のロジックをコードにしていきます。 ①ユーザー登録（Register.vue） 以上のようなテンプレートを作成します。 Vueの基本が理解されていることを前提に進めています。もしVueの基本を学びたい方はこちらのVue講座を読んでください。 今回注目してほしいところは、firebaseのライブラリからgetAuthとcreateUserWithEmailAndPasswordをインポートしてユーザー登録を完了させ、firebaseにデータを飛ばしてあげたことです。 ではfirebaseに戻り、Usersタブを見ると新しいユーザーが登録されていることが分かります。 もちろん実際には、強いパスワードのみ許可し、パスワードの再確認のインプットも作成すべきですが、今回は省きます。 … Read more

Firebaseを始めよう

by
初めてのFirebase

フロントエンドを初めて実際にプロダクトをつくろうと思って始めたけど、バックエンドのテクノロジーに圧倒されていませんか？またフロントエンドの認証システムとバックエンドの認証システムを連携させる方法が難しいと思いませんか？ そんな問題を解決してくれるのがGoogleが提供するFirebaseです。今日は、無料プランでDBを作成して実際にコードを書いてみます。 ちなみにFirebaseはトラディショナルなリレーショナルデータベース（MySQL,PostgreSQLなど）とは違うNoSQLデータベース（MongoDBなど）のデータベースを提供しています。NoSQLを使用する良い機会になるので是非試してみましょう！ Firebaseとは Google Cloud Console（グーグルクラウドコンソール）上に作成されたバックエンドサービス（Baas：Backend as a Service）のことです。では、最初にFirebaseのデータベース（Realtime Database）でできることを紹介します。この他にFirestore Databaseという最新のデータベースサービスがありますが、それは後程紹介します。 Firebase Realtime Database：リアルタイムでデータを保存してユーザー間で同期できる、クラウドホスト型 NoSQL データベースです。 新機能のCloud Firestore なら、グローバル スケールでアプリデータを保存、同期、クエリできます。 デバイス間の連携が容易：リアルタイム同期により、ユーザーはあらゆるデバイス（ウェブ、モバイル）からデータに簡単にアクセスして、他のユーザーとの共同作業を効率的にできるようになります。 サーバー不要のアプリを構築：Realtime Database にはモバイルとウェブの SDK が含まれているため、サーバーがなくてもアプリを構築できます。Cloud Functions for Firebase を使用して、データベースでトリガーされるイベントに応答するバックエンド コードを実行することもできます。 オフラインでの使用に最適：ユーザーがオフラインになると、Realtime Database SDK はデバイス上のローカル キャッシュを使用してデータを表示し、変更を保存します。デバイスがオンラインになると、ローカルデータが自動的に同期されます。 高度なユーザーベースのセキュリティ：Realtime Database と Firebase Authentication の統合により、デベロッパーはシンプルかつ直感的な認証を利用できます。Google の宣言型セキュリティ モデルを使用して、ユーザー ID、またはデータのパターン マッチングによってアクセスを許可できます。 これで開発のスピードがあげられそうですね！ そのほかに電話番号での認証やGoogleのアカウントを使っての認証も簡単に作成できてしまいます。 FirebaseではWebのみならずiOSやAndroidのアプリも作成できます。今回はWebに絞って紹介していきます。 Firebaseの料金 料金についてはこちらのリンクを参照してください。 まずは、無料プランからサービスを検証してみましょう。ではすぐに利用開始のボタンを押します。 Firebaseのプロジェクトを作成 Firebaseのプロジェクトを作成するとGoogle Cloud … Read more

TypeScriptを始めよう：オブジェクトの書き方

by
TypeScript　オブジェクトの書き方

今日はTypeScriptのオブジェクトの書き方について説明します。 前回までの記事に沿って説明をしているので是非、今までの記事を確認お願いします。 JavaScriptのオブジェクト JavaScriptのオブジェクトはダイナミックです。つまり、下記のようなコードが実行でき、コードが実行される中で形を変え、キーを増やしたりすることができます。 TypeScriptのオブジェクト ではTypeScriptのオブジェクトを作成してみましょう。 このようにオブジェクト内にnameのキー、バリューがない場合はエラーがでるのでname?のようにnameがあったらストリングと指示してあげます。 もしくは下記の様にデフォルトのバリューを与えてもOKです。 read onlyの値 オブジェクト内のidなどは変更することはありませんね。そのような場合でTypeScriptでreadonlyに設定することができます。 このようにreadonlyの値を変更しようとするとエラーが表示されるようになります。 オブジェクトに関数を入れる場合 では次にオブジェクトに関数の値を入れてみます。 例のようにpromoptedの値に関数が入ることを宣言しています。ここではdateのキーに対してJavaScriptのDateオブジェクトが入ることを指示しています。さらにreturnで返す値がないのでvoidとしています。実際のid:1のオブジェクトでは単純にコンソールにDateオブジェクトを表示させる関数を格納していることが分かりますね。 このままだと見づらいので次回以降にもっと洗練された書き方を紹介します。 お疲れ様でした。

TypeScriptを始めよう：関数

by
TypeScriptで関数の書き方

JavaScriptを使うにあたって関数は必要不可欠です。今日はTypeScriptの関数について紹介します。 特に関数の引数のデフォルト値の設定の仕方、使われていないローカル変数の検知、returnで必ずデータが返ってきているか確認できるフラグは今後のコーディングに役に立つはずです。 今までの記事を確認してから今日のレッスンを理解することをお勧めします。 function:関数 ではテキストエディタを開いて.tsファイルに下記の様に関数を作成してみましょう。 ここで関数をカーソルでホバーすると上記のコメントのように:voidという表示が出てきました。voidはこの関数が値を返さないことを意味しています。 では下記の様にreturnを使って値を返してみます。 そうするとnumberのデータタイプの値が返ってくることが分かりますね。 さらに関数()：numberとreturnの値のデータタイプを指定することでデータタイプを制限することができます。 引数が使われていない場合のエラー表示 では、tsconfig.jsonファイルを見て、下記の行のコメントアウトを外してください。 このフラグを立てることで、関数の引数が使われていない場合にエラーを表示させることができます。 return値を必ず返したい場合 次に、if構文なのでnumberデータが返ってくる時と返ってこないときにエラーを表示させたい場合にはどうすればよいでしょうか？ 下記の例を見てください。 この場合だと、priceが100よりも小さい場合は0.1を返しますがそれ以外の場合はundefinedを返します。 このようなエラーを防ぐには、tsconfig.jsonのnoImplicitReturnsをtrueにしてあげます。 これでエラーが表示されるようになりました。 使われていないローカル変数を検知する 次に関数ないやブロック内で使われていない変数があった場合にエラーを表示させたい場合です。 この場合、tsconfig.jsonのnoUnusedLocalsをtrueに設定します。 これを使用することで、使われていない変数を検知して、無駄な変数の削減をすることができます。 このようにエラーが出るようになりました。 因数がオプショナルの場合 では下記の関数を見てみましょう。 このようにtotalPrice関数を実行する際に2つの引数（argument）が必要になりますが、足りない場合でも、多い場合でもエラーが出ます。 しかし、ご存じの通り、JavaScriptではこれはあり得ることで、引数がオプショナルの場合はこのように使用することも考えられます。 その場合は下記の様に引数に?を追加して、あった場合は使うという指示をします。 さらに(discount||0)のようにdiscountとorオペレーターで記載しておき、もしdiscountがなかったら0を使うように指示します。 さらに！より良い書き方として、このdiscountにデフォルト値を設定することができます。 このように引数に=でデフォルト値を割り当てます。 では今日はTypeScriptの関数の書き方について紹介しました。 お疲れ様です。

TypeScriptを始めよう：ビルドインタイプ

by
TypeScriptのデータタイプ

今日はTypeScriptのビルドインのデータタイプについて説明します。前回までの記事を理解していることが条件になりますのでご確認お願いします。 TypeScriptのビルドインタイプ TypeScriptにはJavaScriptのデータタイプに加えられたものがあります。 JavaScript TypeScript numberstringbooleannullundefinedobject 左に加えて…anyunknownneverenumtuple ではテキストエディタを開いてコードを書いていきましょう！ 数字を見やすくする TypeScriptでは、数字のk（キロ：カンマの部分）はアンダースコアで記載することができます。 下記の例のように123_000_000は123,000,000と同じになります。もちろんこれはオプショナルなので使っても使わなくてもOKです。 データタイプを宣言する 下記のようにデータタイプを宣言することができます。 ここで、初期の変数に値がある場合は変数のデータタイプをデフォルト値で固定できるのでデータタイプを外すこともできます。 ここでVSCodeでカーソルを変数の値にホバーするとデータタイプが表示されることが確認できます。 しかしlet myName;のようにデフォルト値を設定しないとTypeScriptが変数のデータタイプを判定することができません。 データタイプ：any では.tsファイルに下記のような関数を作成してみます。 そうすると、因数のdocumentがハイライトされエラーが出ます。 エラーの内容はParameter ‘document’ implicitly has an ‘any’ typeで、documentにanyタイプのパラメーターが使用されています、です。 では、下記のようにanyのデータタイプを記載します。 これでエラーが消えましたね。これは、データがどのタイプ(any)でも受け付けますと指示しています。これで開発する際にデータタイプを確認させるような仕組みになっているわけですね。 もし、このエラーを非表示にしたい場合はtsconfig.jsonファイルから設定を変更することができます。 このようにnoImplicitAnyをfalseにすることでエラーがなくなりました。実際にはTypeScriptはデータタイプのチェックのために使用するのでこの変更はできるだけしないようにしましょう。 配列：Array JavaScriptの配列（Array）ではどのデータを使用することができます。 しかし、このようなストリングと数字の混ざったデータを計算させようとすると１＋１＝１１のようになってしまい問題になりますね。 では、下記の様に数字のみの配列であることを宣言します。 もしくは、デフォルト値が数字だけの場合はnumber[]を外してもTypeScript側でデータタイプがnumber[]であることを認識してもらえます。 空の配列で数字のデータを受け入れる場合は下記の様にデータタイプを宣言しておくようにします。 VSCodeの推測機能 さらにTypeScriptを使う事でできるおまけの機能を紹介します。 TypeScriptではデータタイプを指定するのでVSCodeが次に来るメソッド等を予測して表示してくれます。 JavaScriptではできないことなので素晴らしいですね。 Tuple Pythonを使ったことがある人は見たことがあるかもしれません。Tuple（タプル）はデータタイプが固定された配列のことです。よって配列の長さも変更できません。 このように上記のTupleに3つ目のデータを追加しようとしたりデータタイプを変更したりしようとするとエラーになります。 それ以外の変更（値の変更）は可能です。 また、TypeScriptの強みとしてこのように数字のデータに対してのメソッドと次のスクリーンショットのストリングに対するメソッドがそれぞれ表示されるのでとても使いやすくなります。 列挙型(Enums) 列挙型は、関連する値の集合を編成する方法です。これを使用することで関連する変数をセットとして一つのenum内にまとめることができます。 下記のsmallとSize.Smallは同じものになります。ちなみにenumで宣言する変数名は大文字で始まり、中の変数も大文字で始めることが慣習とされています。 上記のコードは下記のコマンドで実行できます。 このようにsmallとSize.Smallは同じ値になることがわかりますね。 ここでコンパイルされた.jsファイルを見ると中身がすごいことになっていることに気が付きます。 dist/index.js この変数を詳しく見てみましょう。 そうすと、データタイプがオブジェクトで返ってきました。これは変数 … Read more

TypeScriptを始めよう：デバッグの仕方

by
TypeScript VSCodeでデバッグの仕方

今日は前回に紹介したTypeScriptの基本の続きです。初めてTypeScriptを学ぶ人は前回の記事から読むことをお勧めします。 今日は、VSCodeにあるデバッグ機能を使ってコードを実行する順番にコードがどのように読み込まれているか見ていきましょう。 tsconfig.jsonファイルの設定 では、tsconfig.jsonファイルを見ていくつかコンフィグを設定していきます。 コンフィグファイルから下記のキーを見つけコメントを外し、下記の通りに設定します。※参考例として紹介しますが、好みで調整してください。 では、コンフィグファイルを設定し、.tsファイルを./srcディレクトリに移動したところで.tsファイルをコンパイルします。 では、コンパイルが完了するとdistディレクトリ（ディストリビューションの略）ができて.jsファイルと.js.mapファイルができたことが分かりますね。 では、.tsファイルに戻り下記の様なコードを作成したとします。 さらにVSCodeの行の左側に赤い点がクリックできるのでそれを押してブレイクポイントを作成します。 ブレイクポイントはコードを実行する際に一旦止まる場所を設定できます。そこからコードを再実行できますし前後のコードを確認することもできる便利な機能です。 launch.jsonファイル 次にVSCodeの左のタブからてんとう虫と三角のアイコン（デバッグのアイコン）をクリックします。 その中にcreate a launch.json fileというテキストがあるのでそれをクリックしてlaunch.jsonファイルを作成します。クリックするといくつかオプションが表示されるのでNode.jsを選択します。 launch.jsonファイルはNode.js用のデバッガーファイルになります。 中身はこんな感じです。 では、このコンフィグファイルに下記のラインを追加します。 “preLaunchTask”: “tsc: build – tsconfig.json”, これでこのデバッガーが実行されたときにタスクを追加することができます。 デバッグの実行 では、launch.jsonを閉じて、VSCodeのデバッグタブから下記のlaunchProgramボタンをクリックしてテストを実行します。 そうすると先ほど作成したタスクが実行され、その後にJavaScriptコードが実行されます。 ここで、先ほど設定しておいたブレイクポイントで止まったことが分かります。 この上部のメニューにあるように▶三角ボタンでコードをブレイクポイントから実行しなおすことができます。 ステップインは最もステップ単位が小さいデバッグ方法でで、基本的に1行単位で実行されます。関数の内部にも入ることができます。 ステップオーバーは同じく1行単位で実行されますが、関数があった場合その関数を実行して次の行に移行します。 ステップアウトは今実行している関数の外（呼び出し元）に出るまでプログラムを進めるステップ実行方法です。現在の関数の動作チェックができたので呼び出し元に戻りたいときに使用できます。 では、右側のVARIABLE（変数）のタブを見てみます。ここでは、デバッグに必要なWindowsオブジェクトで使用される変数などが見ることができます。 上記の画像のように変数の値がどこで変わったかを確認することができますね。 ではTypeScriptのデバッグの仕方は今日はここまで！ お疲れ様でした。