{"documentCount":129,"nextId":129,"documentIds":{"0":"/released-on-nuxt-v3-11","1":"/released-on-nuxt-v3-11#ssr時のログ出力","2":"/released-on-nuxt-v3-11#server-componentをpages単位で利用可能","3":"/released-on-nuxt-v3-11#teleportのターゲットが追加","4":"/husky-lint-staged","5":"/husky-lint-staged#husky-と-lint-staged-をインストールする","6":"/husky-lint-staged#パッケージ情報","7":"/husky-lint-staged#husky-の初期化","8":"/husky-lint-staged#pre-commit-の追加","9":"/husky-lint-staged#packagejson-を修正","10":"/husky-lint-staged#まとめ","11":"/improve-storycap","12":"/get-started-with-elysiajs","13":"/get-started-with-elysiajs#bunのインストール","14":"/get-started-with-elysiajs#elysiajsのインストール","15":"/get-started-with-elysiajs#アプリの起動","16":"/get-started-with-elysiajs#indextsを覗いてみる","17":"/get-started-with-elysiajs#マニュアルのインストール","18":"/get-started-with-elysiajs#公式おすすめのディレクトリ構成","19":"/get-started-with-hono","20":"/get-started-with-hono#honoのインストール","21":"/first-oss-contribution","22":"/first-oss-contribution#きっかけ","23":"/first-oss-contribution#ossコントリビュートまでの軌跡","24":"/first-oss-contribution#issueを作成する","25":"/first-oss-contribution#pull-requestを作成する","26":"/first-oss-contribution#レビュー-merge","27":"/first-oss-contribution#ossコントリビュートを経験してみた感想","28":"/difference-between-defineexpose-and-provide-and-inject","29":"/difference-between-defineexpose-and-provide-and-inject#defineexpose-について","30":"/difference-between-defineexpose-and-provide-and-inject#使用例","31":"/difference-between-defineexpose-and-provide-and-inject#provide-inject-について","32":"/difference-between-defineexpose-and-provide-and-inject#provide","33":"/difference-between-defineexpose-and-provide-and-inject#inject","34":"/difference-between-defineexpose-and-provide-and-inject#使用例-1","35":"/difference-between-defineexpose-and-provide-and-inject#まとめ","36":"/run-workflow-with-secrets-in-dependabot","37":"/run-workflow-with-secrets-in-dependabot#secrets-を使用したワークフローが失敗する","38":"/run-workflow-with-secrets-in-dependabot#解決策","39":"/toref-and-torefs","40":"/toref-and-torefs#toref-について","41":"/toref-and-torefs#torefs-について","42":"/toref-and-torefs#まとめ","43":"/get-aws-certified-solutions-architect-associate","44":"/get-aws-certified-solutions-architect-associate#私について","45":"/get-aws-certified-solutions-architect-associate#試験について","46":"/get-aws-certified-solutions-architect-associate#学習に使用した教材","47":"/get-aws-certified-solutions-architect-associate#学習方法","48":"/get-aws-certified-solutions-architect-associate#_1-試験突破講座の動画を視聴する","49":"/get-aws-certified-solutions-architect-associate#_2-試験突破講座のハンズオンを行う","50":"/get-aws-certified-solutions-architect-associate#_3-模擬試験問題集に取り組む","51":"/get-aws-certified-solutions-architect-associate#まとめ","52":"/html-tags-memory-test","53":"/html-tags-memory-test#html-tags-memory-test","54":"/html-tags-memory-test#知らなかったhtmlタグ","55":"/html-tags-memory-test#address","56":"/html-tags-memory-test#hgroup","57":"/html-tags-memory-test#search","58":"/html-tags-memory-test#cite","59":"/html-tags-memory-test#abbr","60":"/html-tags-memory-test#b","61":"/html-tags-memory-test#bdi","62":"/html-tags-memory-test#bdo","63":"/html-tags-memory-test#data","64":"/html-tags-memory-test#time","65":"/html-tags-memory-test#dfn","66":"/html-tags-memory-test#kbd","67":"/html-tags-memory-test#mark","68":"/html-tags-memory-test#q","69":"/html-tags-memory-test#ruby","70":"/html-tags-memory-test#rp","71":"/html-tags-memory-test#rt","72":"/html-tags-memory-test#s","73":"/html-tags-memory-test#del","74":"/html-tags-memory-test#ins","75":"/html-tags-memory-test#samp","76":"/html-tags-memory-test#sub","77":"/html-tags-memory-test#sup","78":"/html-tags-memory-test#u","79":"/html-tags-memory-test#var","80":"/html-tags-memory-test#area","81":"/html-tags-memory-test#track","82":"/html-tags-memory-test#wbr","83":"/html-tags-memory-test#meter","84":"/html-tags-memory-test#実験的な機能","85":"/html-tags-memory-test#portal","86":"/html-tags-memory-test#まとめ","87":"/codebuild-token-error","88":"/codebuild-token-error#エラー","89":"/codebuild-token-error#対処法","90":"/codebuild-token-error#まとめ","91":"/search-nuxt-content","92":"/search-nuxt-content#前提","93":"/search-nuxt-content#検索機能の実装","94":"/search-nuxt-content#検索処理の呼び出し","95":"/search-nuxt-content#まとめ","96":"/monorepo","97":"/monorepo#はじめに","98":"/monorepo#実際に試してみる","99":"/monorepo#まとめ","100":"/github-actions","101":"/github-actions#はじめに","102":"/github-actions#実際のコード","103":"/github-actions#まとめ","104":"/get-started-with-nest-js","105":"/get-started-with-nest-js#プロジェクトの構築","106":"/get-started-with-nest-js#起動","107":"/get-started-with-nest-js#初期状態","108":"/get-started-with-nest-js#環境変数の設定","109":"/overflow-clip","110":"/overflow-clip#はじめに","111":"/overflow-clip#overflow-clip-とは","112":"/overflow-clip#単一方向におけるクリップ","113":"/overflow-clip#まとめ","114":"/nuxt-color-mode","115":"/nuxt-color-mode#はじめに","116":"/nuxt-color-mode#テーマの切り替えを実装する","117":"/nuxt-color-mode#css-変数を定義する","118":"/nuxt-color-mode#動作確認","119":"/nuxt-color-mode#storybook-を使用している場合のモック方法","120":"/nuxt-color-mode#まとめ","121":"/prisma-error","122":"/prisma-error#エラーの内容","123":"/prisma-error#エラーの原因","124":"/prisma-error#エラーの対処法","125":"/call-once-composable","126":"/call-once-composable#callonce","127":"/call-once-composable#ナビゲーションモード","128":"/call-once-composable#middleware-と-callonce-のナビゲーションモードの違いについて"},"fieldIds":{"title":0,"content":1,"titles":2},"fieldLength":{"0":[3,29,1],"1":[1,3,3],"2":[2,13,3],"3":[1,6,3],"4":[5,7,1],"5":[6,9,5],"6":[2,7,5],"7":[3,3,5],"8":[4,9,5],"9":[4,8,5],"10":[2,12,5],"11":[1,4,1],"12":[1,4,1],"13":[1,8,1],"14":[1,1,1],"15":[1,12,1],"16":[2,10,1],"17":[1,11,1],"18":[1,1,1],"19":[1,9,1],"20":[1,11,1],"21":[1,39,1],"22":[1,7,1],"23":[1,1,1],"24":[1,28,2],"25":[2,25,2],"26":[2,7,2],"27":[1,10,1],"28":[5,8,1],"29":[3,16,5],"30":[2,20,7],"31":[4,1,5],"32":[1,9,7],"33":[1,2,7],"34":[2,36,7],"35":[2,11,5],"36":[4,5,1],"37":[3,28,4],"38":[2,23,4],"39":[3,6,1],"40":[3,33,3],"41":[3,17,3],"42":[2,9,3],"43":[6,2,1],"44":[2,14,6],"45":[2,7,6],"46":[2,29,6],"47":[2,1,6],"48":[2,14,8],"49":[2,6,8],"50":[2,11,8],"51":[2,22,6],"52":[1,3,1],"53":[5,10,1],"54":[2,1,1],"55":[1,22,3],"56":[1,2,3],"57":[1,29,3],"58":[1,21,3],"59":[1,19,3],"60":[1,39,3],"61":[1,22,3],"62":[1,20,3],"63":[1,23,3],"64":[1,25,3],"65":[1,28,3],"66":[1,24,3],"67":[1,19,3],"68":[1,28,3],"69":[1,26,3],"70":[1,27,3],"71":[1,27,3],"72":[1,30,3],"73":[1,27,3],"74":[1,22,3],"75":[1,27,3],"76":[1,21,3],"77":[1,21,3],"78":[1,28,3],"79":[1,21,3],"80":[1,21,3],"81":[1,33,3],"82":[1,21,3],"83":[1,20,3],"84":[2,1,1],"85":[1,22,3],"86":[2,2,1],"87":[8,3,1],"88":[2,7,8],"89":[2,10,8],"90":[2,3,8],"91":[4,3,1],"92":[2,15,4],"93":[2,13,4],"94":[2,5,4],"95":[2,3,4],"96":[4,7,1],"97":[2,6,4],"98":[2,60,4],"99":[2,7,4],"100":[5,5,1],"101":[2,8,5],"102":[2,8,5],"103":[2,3,5],"104":[2,3,1],"105":[1,6,2],"106":[1,2,2],"107":[1,94,2],"108":[1,13,2],"109":[5,5,1],"110":[2,9,5],"111":[4,39,5],"112":[1,21,5],"113":[1,10,5],"114":[5,3,1],"115":[1,26,5],"116":[1,14,5],"117":[2,10,5],"118":[1,3,5],"119":[2,17,5],"120":[1,6,5],"121":[21,3,1],"122":[1,42,21],"123":[1,14,21],"124":[1,10,21],"125":[6,5,1],"126":[1,38,6],"127":[1,29,6],"128":[4,16,6]},"averageFieldLength":[2.108527131782946,15.193798449612403,3.7906976744186047],"storedFields":{"0":{"title":"Nuxt v3.11がリリース","content":"2024年3月16日にリリースされたNuxt v3.11の内容をまとめる。 2024年3月16日にNuxt v3.11がリリースされました。 Nuxt 3.11 · Nuxt Blog\n Nuxt 3.11 is out - with better logging, preview mode, server pages and much more!\n \n \n https://nuxt.com/blog/v3-11 Nuxt v4リリース前の最後のマイナーバージョンリリースとのことです。本記事では、Nuxt公式のブログを参考に気になる内容をまとめます。","titles":[]},"1":{"title":"SSR時のログ出力","content":"SSRのアプリケーションを開発する際にconsole.logの内容をブラウザコンソールに出力できるようになりました。","titles":["Nuxt v3.11がリリース"]},"2":{"title":"Server Componentをpages単位で利用可能","content":"Server Componentをpagesディレクトリ配下のVue.jsファイルにも適用することができるようになりました。 Server Componentを使用する際は、componentsディレクトリで使用するときと同様にファイル名.server.vueという命名にする必要があります。しかし、Server Componentは実験的な機能であるため、使用時には注意が必要そうです。 Nuxt v4のリリース時には安定版の機能として採用されることを期待したいと思います。","titles":["Nuxt v3.11がリリース"]},"3":{"title":"Teleportのターゲットが追加","content":"組み込みコンポーネントであるTeloportの新しいターゲットとしてbodyタグ配下に

が追加されました。","titles":["Nuxt v3.11がリリース"]},"4":{"title":"Husky と lint-staged の設定手順","content":"2024年3月26日時点の Husky と lint-staged の設定手順についてまとめる。","titles":[]},"5":{"title":"🤖 Husky と lint-staged をインストールする","content":"Husky と lint-staged を開発環境で使用するため、次のコマンドを実行し、devDependencies に各パッケージをインストールします。","titles":["Husky と lint-staged の設定手順"]},"6":{"title":"🔖 パッケージ情報","content":"2024年3月26日時点での各パッケージの最新バージョンを使用します。バージョンの詳細については以下の表を参照してください。パッケージ名バージョンHusky9.0.11lint-staged15.2.2","titles":["Husky と lint-staged の設定手順"]},"7":{"title":"🛠 Husky の初期化","content":"Husky を初期化するために次のコマンドを実行をします。","titles":["Husky と lint-staged の設定手順"]},"8":{"title":"🖌 pre-commit の追加","content":"pre-commit で lint-staged が実行されるようにコマンドを .husky/pre-commit に追加します。","titles":["Husky と lint-staged の設定手順"]},"9":{"title":"🖌 package.json を修正","content":"最後に package.json に lint-staged の設定を追加します。","titles":["Husky と lint-staged の設定手順"]},"10":{"title":"✅ まとめ","content":"以上で Husky と lint-staged の設定を行うことができます。 Husky のバージョンが v9 に上がったタイミングで設定周りが変更になっているため、v8 より以前のバージョンとは設定手順が異なることに注意してください。","titles":["Husky と lint-staged の設定手順"]},"11":{"title":"storycapの実行時間を短縮する","content":"フロントエンドのテスト手法の1つであるVisual Regression Testのツールであるstorycapの実行時間を短縮するための情報についてまとめる。 Storybookを事前にBuildするテスト対象を絞る並列実行する","titles":[]},"12":{"title":"ElysiaJSに入門してみる","content":"ElysiaJSについての個人的なメモ。 Bunのフレームワーク公式サイトExpressよりも21倍速い人間工学に基づいた人間のためのフレームワークEnd-to-Endで型セーフである","titles":[]},"13":{"title":"Bunのインストール","content":"まだBunをインストールしたことがなかったため、公式サイトを参照し、下記のコマンドを実行します。 2024年4月7日時点では、v1.1.2がインストールされました。","titles":["ElysiaJSに入門してみる"]},"14":{"title":"ElysiaJSのインストール","content":"","titles":["ElysiaJSに入門してみる"]},"15":{"title":"アプリの起動","content":"インストール時に表示されたメッセージに従って下記を実行します。上記では、メッセージに従いましたが、bun devでも起動できます。 localhost:3000 へアクセスし、「Hello Elysia」と表示されることを確認します。","titles":["ElysiaJSに入門してみる"]},"16":{"title":"index.tsを覗いてみる","content":"コンソールに「🦊 Elysia is running at localhost:3000」が表示されることを確認します。","titles":["ElysiaJSに入門してみる"]},"17":{"title":"マニュアルのインストール","content":"dependencyにelysiaが追加されるため、npmスクリプトを下記のように変更します。 testコマンドは、既に存在していため、追加ではなく更新しました。 devコマンドは、開発モードで起動し、オートリロードが効くbuildコマンドは、プロダクションビルドを実行するstartコマンドは、プロダクションサーバーで起動するtestコマンドは、テストを実行してくれる","titles":["ElysiaJSに入門してみる"]},"18":{"title":"公式おすすめのディレクトリ構成","content":"","titles":["ElysiaJSに入門してみる"]},"19":{"title":"Honoに入門してみる","content":"Honoについての個人的なメモ。公式サイト Honoは、CDNのエッジで動く高速なWebフレームワークです。 Cloudflareだけでなく、FastlyやAWS Lambda、Vercelなどでも動くようです。","titles":[]},"20":{"title":"Honoのインストール","content":"npmを使用してインストールする場合、下記のコマンドを実行します。プロジェクトを作成したら下記のコマンドを実行し、アプリを起動します。 http://localhost:8787にアクセスし、「Hello Hono!」と表示されることを確認します。","titles":["Honoに入門してみる"]},"21":{"title":"初めてOSSにコントリビュートしました","content":"OSSへのコントリビュートという実績を解除したのできっかけなどをまとめる。本日、OSSへのコントリビュートという実績を解除しました。 docs: change tag from div to li element by splendente · Pull Request #2814 · vuejs/docs\n Description of Problem\nAs noticed in #2813 , I changed tag in example code in transition group page from div to li element.\nProposed Solution\nAdditional Information\n \n \n https://github.com/vuejs/docs/pull/2814","titles":[]},"22":{"title":"きっかけ","content":"Vue.jsのTransitionとTransition Groupの違いを調査するため、公式ドキュメントを漁っていた時のことです。サンプルコードでulタグ直下の要素がliタグではなく、divタグになっていることに気づいたことがきっかけです。","titles":["初めてOSSにコントリビュートしました"]},"23":{"title":"OSSコントリビュートまでの軌跡","content":"","titles":["初めてOSSにコントリビュートしました"]},"24":{"title":"issueを作成する","content":"既に同じ問題に気づいている人がいる可能性があるため、Vue.jsの公式ドキュメントのリポジトリのissueを漁ってみました。修正したい内容である「Transition Group」や「ul」、「list」等の単語を検索ワードとして使いつつ、issueを確認しましたが、重複するissueを見つけることができませんでした。既にPull Requestが作成されている可能性もあるのでPull Requestも確認しました。その後も調査しましたが、どこにも重複するissueやPull Requestを見つけられなかったため、issueを作成することにしました。 Google翻訳等を活用し、issueを作成後、わずか数分で「bug」と「contribution welcome」というタグをコアチームメンバーの方が設定してくれました。","titles":["初めてOSSにコントリビュートしました","OSSコントリビュートまでの軌跡"]},"25":{"title":"Pull Requestを作成する","content":"次に私はこのissueを自分が担当していいのかどうかわからず、路頭に迷いました。「君が担当者だ！」とアサインされるのを待つべきか勝手にPRを送るってもいいのか...。リポジトリに対する権限的にissueに対して自らをアサインすることができなかったため、ルールなどが記載されたドキュメントを探すことにしました。 README.mdなどの様々なドキュメントを漁りましたが、欲しい情報を見つけることはできませんでした。他のissue等を覗きましたが、明確に担当者をアサインしているケースを見つけることができず、逆にissueを作成した人がそのままPull Requestを作成しているケースが多かったことと「contribution welcome」というタグを信じ、ダメ元でPull Requestを送ることにしました。 OSSへのコントリビュートが初めてだったため、fork等の慣れない作業は都度調べながら行いました。修正内容は軽微だったため、すぐに修正を終え、Pull Requestを作成しました。","titles":["初めてOSSにコントリビュートしました","OSSコントリビュートまでの軌跡"]},"26":{"title":"レビュー＆ Merge","content":"Pull Request作成後、すぐに自分が作成したissueに反応してくださったコアメンバーの方がレビューおよびApproveをしてくださり、そのままMergeとなりました。（初歩的なミスもカバーしてくれました。）以上で初のOSSコントリビュートが無事に終了することができました。","titles":["初めてOSSにコントリビュートしました","OSSコントリビュートまでの軌跡"]},"27":{"title":"OSSコントリビュートを経験してみた感想","content":"OSSと聞くと少し構えてしまうが、それよりもチャレンジしてみて良かったという気持ちが強いです。簡単な修正でしたが、初めてVitePressを触ってみることができたりと得られた収穫が大きいです。今回はいきなりPull Requestを送りましたが、リポジトリのルールはしっかり確認し、もし不安であればissueなどでコメントして事前に担当していいか確認するのが良いと思います。これを機にOSS活動も頑張っていきたいです。","titles":["初めてOSSにコントリビュートしました"]},"28":{"title":"defineExpose と Provide & Inject の違いについて","content":"データなどを共有したり、公開することができる defineExpose と Provide & Inject の違いについてまとめる。","titles":[]},"29":{"title":"❓ defineExpose について","content":"defineExpose は、Vue.js のコンパイラーマクロで子コンポーネントの script setup 構文で定義されたプロパティを親コンポーネント、もしくは外部のスクリプトファイルに対して公開する機能です。 script setup 構文は、デフォルトでスコープが閉じているため、親コンポーネントや外部のスクリプトファイルは通常アクセスすることができません。そのため、親コンポーネントから子コンポーネントの変数にアクセスしたい場合などは defineExpose を使用する必要があります。","titles":["defineExpose と Provide & Inject の違いについて"]},"30":{"title":"🛠 使用例","content":"defineExpose を使用した場合、子コンポーネントは下記のように書くことができます。 count というリアクティブデータが定義されおり、increment という関数が実行されると数値が1ずつ増えるというシンプルなコンポーネントです。公開したいプロパティを defineExpose 内に書くだけで外部に公開することができます。 increment という関数を外部に公開したい場合、下記のように書くことができます。 defineExpose を使用した子コンポーネントを呼び出す親コンポーネントは下記のように書くことができます。テンプレート参照を使用することで、子コンポーネントで defineExpose を使用して定義した increment という関数にアクセスすることができます。上記の例では、increment と書かれたボタンをクリックすると子コンポーネントの count というリアクティブデータが1つずつ増えることを確認することができます。","titles":["defineExpose と Provide & Inject の違いについて","❓ defineExpose について"]},"31":{"title":"❓ Provide & Inject について","content":"","titles":["defineExpose と Provide & Inject の違いについて"]},"32":{"title":"🪛\tProvide","content":"親または祖先にあたるコンポーネントから子または子孫にあたるコンポーネントに対してデータやメソッドを共有する機能です。 Provideは、defineExpose とは異なり、子また子孫にあたるコンポーネントから親または祖先にあたるコンポーネントに対してデータやメソッドを共有することはできません。また、外部のスクリプトファイルに対してもデータやメソッドを共有することはできない点も defineExpose と異なる点です。","titles":["defineExpose と Provide & Inject の違いについて","❓ Provide & Inject について"]},"33":{"title":"🪛\tInject","content":"子または子孫にあたるコンポーネントが親または祖先にあたるコンポーネントから共有されたデータやメソッドを受け取る機能です。","titles":["defineExpose と Provide & Inject の違いについて","❓ Provide & Inject について"]},"34":{"title":"🛠 使用例","content":"Provide と Inject を使用する場合、下記のように書くことができます。 Provide を定義する親コンポーネントです。先ほどの defineExpose で使用した例を再利用しています。注意点としては、defineExpose とは異なり、親コンポーネントであることです。親コンポーネントから Provide で共有された increment という関数を Inject で受け取るために子コンポーネントは下記のように書きます。子コンポーネントで定義した increment 書かれたボタンをクリックすると親コンポーネントの count というリアクティブデータが1つずつ増えることを確認することができます。 Provide と Injectは、子または子孫コンポーネントから親または祖先コンポーネントに対して情報を共有することはできません。例えば、下記のコードはエラーになります。子コンポーネントで定義した increment という関数を Provide で定義します。次に親コンポーネントで Inject を使用して increment という関数にアクセスしようとしてみます。上記のコードを実行すると次のエラーが表示されるはずです。 Vue warn: injection \"increment\" not found.","titles":["defineExpose と Provide & Inject の違いについて","❓ Provide & Inject について"]},"35":{"title":"✅ まとめ","content":"defineExpose を使用することで親または祖先コンポーネントだけでなく、外部のスクリプトファイルに対してもプロパティを公開することができます。 Provide は、親または祖先コンポーネントから子または子孫コンポーネントに対して情報を共有する機能であり、子または子孫コンポーネントから親または祖先コンポーネントに対して情報を共有することはできません。 Inject は、子または子孫にあたるコンポーネントが親または祖先にあたるコンポーネントから共有されたデータやメソッドを受け取るのみで外部にプロパティを公開したり、親または祖先コンポーネントに対して情報を共有することはできません。","titles":["defineExpose と Provide & Inject の違いについて"]},"36":{"title":"Dependabot で secrets を使用するワークフローを実行する方法","content":"Dependabot によってプルリクエストが作成された際に secrets を使用したワークフローが失敗してしまうときの対処法についてまとめる。","titles":[]},"37":{"title":"❌ secrets を使用したワークフローが失敗する","content":"先日、chromatic を GitHub Actions で実行するようなワークフローを追加しました。自分で変更を加え、プッシュをした際やプルリクエストを作成した際に chromatic のワークフローが実行されることは確認していたのですが、Dependabot によってプルリクエストが作成された際にワークフローが失敗してしまいました。実際に表示されたエラーメッセージを確認すると、chromatic にデプロイを実行する際に必要なトークンが取得できていないことが分かります。しかし、GitHub の secrets に CHROMATIC_PROJECT_TOKEN というトークン保存しているため、トークンを読み込めないという事象に戸惑いました。調査を進める中で Dependabot は actions に設定されている secrets を読み込むことができないということがわかりました。","titles":["Dependabot で secrets を使用するワークフローを実行する方法"]},"38":{"title":"✅ 解決策","content":"Dependabot secrets を使用することで解決することができます。次の画像を参考に Settings の Security から Secrets and variables へアクセスし、「New repository secret」というボタンを押下することで chromatic の実行時に必要なトークンを設定することができます。設定することができたら、失敗した chromatic のワークフローを再実行し、無事に成功することを確認します。","titles":["Dependabot で secrets を使用するワークフローを実行する方法"]},"39":{"title":"toRef と toRefs","content":"似た名前の toRef と toRefs の違いについて調べる。","titles":[]},"40":{"title":"❓ toRef について","content":"toRef は、引数として与えられた値から ref を作成します。例えば、props として受け取った値を変更したい場合があると思います。 props は、一方向のバインディングを形成します。親コンポーネントで値が変更した場合、子コンポーネントで受け取った props の値は変更されますが、子コンポーネントで受け取った props の値をを変更することはできません。次のコードはボタンをクリックしても値が変更されません。このような場合に toRef を使用することで受け取った props の値を変更することができます。 toRef を使用することで受け取った props から ref を作成することでボタンをクリックした際に値が変更されるようになります。この時、toRef は新たに ref を定義するため、親で保持する値が変更されないことに注意してください。次の親コンポーネントで定義された count の値は変更されません。また、readonly なリアクティブデータとして定義することもできます。次のコードは先ほどとは異なり、ボタンをクリックしても count の値が変更されることはありません。","titles":["toRef と toRefs"]},"41":{"title":"❓ toRefs について","content":"toRefs は、reactive によって宣言されたリアクティブなオブジェクトの各プロパティを toRef によって ref に変換します。リアクティビティを損なうことなく、個々の ref を生成することができるため、どちらかの値が変更されるともう片方の値も書き変わります。 toRefs を使用して ref を生成する場合、.value を使用してアクセスする必要があることに注意してください。","titles":["toRef と toRefs"]},"42":{"title":"✅ まとめ","content":"toRef は引数から ref を生成し、toRefs はリアクティブなオブジェクトから toRef を使用して個別の ref を生成します。","titles":["toRef と toRefs"]},"43":{"title":"AWS Certified Solutions Architect - Associate を取得しました","content":"資格取得に向けた学習方法と実際に使用した教材等についてまとめる。","titles":[]},"44":{"title":"🙋 私について","content":"私は普段、フロントエンドエンジニアとしてフロントエンド開発業務を担当しています。そのため、普段から AWS を頻繁に使用している訳ではありませんが、プロジェクトや状況に応じて以下のサービスを利用することはしばしばあります。 EC2S3CloudFrontCloudWatchRDSLambda 他にも、ECS や Codeシリーズなどで構成されたサービス開発に携わることはありますが、実際に設定を変更したりすることはありません。","titles":["AWS Certified Solutions Architect - Associate を取得しました"]},"45":{"title":"📜 試験について","content":"2024年4月1日から料金が改定され、受験費用は22,000円でした。弊社では、試験に合格すると資格試験の受験費用を肩代わりしてくれる制度があるため、実質0円です。","titles":["AWS Certified Solutions Architect - Associate を取得しました"]},"46":{"title":"📕 学習に使用した教材","content":"私が主に使用した教材は Udemy の教材です。 www.udemy.com\n \n \n \n https://www.udemy.com/course/aws-knan/ www.udemy.com\n \n \n \n https://www.udemy.com/course/aws-associate/ 通常価格だと2つで16,400円ですが、私が購入した際はセール価格だったため、2つ合わせて2,800円でした。また、出社の日は電車の中で YouTube の Black Belt Online Seminar を視聴していました。 www.youtube.com\n \n \n \n https://www.youtube.com/results?search_query=aws+blackbelt","titles":["AWS Certified Solutions Architect - Associate を取得しました"]},"47":{"title":"🖋 学習方法","content":"","titles":["AWS Certified Solutions Architect - Associate を取得しました"]},"48":{"title":"1. 試験突破講座の動画を視聴する","content":"試験範囲となるサービスはとても多く、聞いたことがないサービスや使ったことがないサービスがたくさんありました。そのため、まずは概要だけでも頭に入れようと思い、試験突破講座の動画を視聴しました。試験講座の動画もたくさんあるため、可能な限り高速で学習を進めたいと思い、私は動画の再生速度を1.5倍に設定していました。私にとって1.5倍という速度は、動画の内容を聞き漏らさず、ノートを取ることができる最大の速度でした。","titles":["AWS Certified Solutions Architect - Associate を取得しました","🖋 学習方法"]},"49":{"title":"2. 試験突破講座のハンズオンを行う","content":"土日などの時間に余裕があるときは試験突破講座のハンズオンに取り組みました。実際に自分で設定してみることで動画視聴で得た概要の知識がさらに深まったと思います。また、動画で聞いただけでは何度も覚えられないサービスや機能がありましたが、ハンズオンに取り組むことで覚えることができたというメリットもありました。","titles":["AWS Certified Solutions Architect - Associate を取得しました","🖋 学習方法"]},"50":{"title":"3. 模擬試験問題集に取り組む","content":"6回分の模擬試験を2〜3周しました。時間の都合上、3周目は第1回から第3回までしか解くことができませんでした。模擬試験は、問題の形式に慣れる、問題文の傾向を掴むという点で役に立ちました。また、模擬試験を解いた後は、模擬試験を解いた時間と同じかそれ以上に解説を読んで振り返る時間を設けるようにしていました。","titles":["AWS Certified Solutions Architect - Associate を取得しました","🖋 学習方法"]},"51":{"title":"✅ まとめ","content":"結果、無事に合格することができました！ Hikaru Kobayashi's profile on Credly\n View Hikaru Kobayashi's verified achievements on Credly. \n \n \n https://www.credly.com/users/hikaru-kobayashi.c2928e1a/badges 資格を取る際に得た知識を今後の業務に役立てていきたいと思います。","titles":["AWS Certified Solutions Architect - Associate を取得しました"]},"52":{"title":"知らなかったHTMLタグについて","content":"知らないHTMLタグが多くあったため、備忘録として残す。","titles":[]},"53":{"title":"📝 HTML Tags Memory Test","content":"114個のHTMLタグいくつ覚えているか？というテストでしたが、知らないHTMLタグが数多くありました。フロントエンドエンジニアとして知らなかったでは済まされないと思うのでこれを機に知らなかったHTMLタグについて学びを深めようと思います。 codepen.io\n \n \n \n https://codepen.io/plfstr/full/zYqQeRw","titles":["知らなかったHTMLタグについて"]},"54":{"title":"📙 知らなかったHTMLタグ","content":"","titles":["知らなかったHTMLタグについて"]},"55":{"title":"

","content":"

要素の中の情報が個人や組織の連絡先であることを示す。

: 連絡先要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n

は HTML の要素で、この中の HTML が個人、団体、組織の連絡先情報を提供していることを示します。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/address","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"56":{"title":"","content":"

等の見出し要素と
要素をグループ化する。","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"57":{"title":"
","content":"検索処理を行う要素のコンテナー。検索結果を表示するという役割ではなく、子要素の目的が検索機能であることを表す。 : 一般検索要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/search","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"58":{"title":"","content":"引用先を表示する際に使用する。 : 引用元要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、引用された創作物のタイトルをマークアップするために使用します。この参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/cite","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"59":{"title":"","content":"略語を表す。 : 略語要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、略語や頭字語を表します。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/abbr","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"60":{"title":"","content":"ユーザーの注意を惹きたい場合に使用する。ただし、を太字にするという装飾目的で使用するべきではない。単にテキストを太字にする場合は CSS の font-weight を使用し、重要な意味を持つテキストはを使用する。 : 注目付け要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の font-weight プロパティを使用し、特別な重要性を持つテキストを示すには要素を使用してください。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/b","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"61":{"title":"","content":"ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立しているものと扱うよう指示する。 : 書字方向分離要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立しているものと扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入するとき、挿入されるテキストの書字方向が不明な場合に便利です。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdi","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"62":{"title":"","content":"現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにする。 : 双方向文字列上書き要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/bdo","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"63":{"title":"","content":"商品などを並べる際にidのような識別子を付与する際に使用する。日付を扱う場合はではなくを使用する。 : データ要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、要素を使用する必要があります。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/data","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"64":{"title":"","content":"時刻を表す。\ndatetime属性を一緒に使用する。 : （日付）時刻要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、特定の時の区間を表します。datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/time","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"65":{"title":"","content":"定義句や文の文脈の中で定義している用語を示す。 : 定義要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、定義句や文の文脈の中で定義している用語を示すために用いられます。祖先である
要素、
/
の組み合わせ、または直近の
要素が用語の定義とみなされます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/dfn","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"66":{"title":"","content":"キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。 : キーボード入力要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、ユーザーエージェントは既定で要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/kbd","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"67":{"title":"","content":"テキストにマーカーを引くことができる。 : テキストマーク要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/mark","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"68":{"title":"","content":"文章中に含まれるインラインの引用。と異なり、テキストサイズが短い場合に使用する。 : インライン引用要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、中に含まれるテキストが短いインラインの引用であることを示します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、要素を使用してください。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/q","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"69":{"title":"","content":"テキストの上下左右に表示される小さな注釈を表す。漢字の読み等を表現する際に使用する。後述するとと併せて使用する。 : ルビ注釈要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"70":{"title":"","content":"による注釈表示に対応していないブラウザで表示する代替の括弧を提供するための要素。 : ルビの代替表示用括弧要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの要素で、注釈の文字列を含む要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/rp","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"71":{"title":"","content":"注釈として表示するテキストを指定する。 : ルビテキスト要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、ルビによる注釈（振り仮名）のルビテキストの部分を指定します。東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。要素は常に要素の中で使用されます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/rt","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"72":{"title":"","content":"打ち消し線で対象の要素が既に適切ではない、正確ではないことを表現する。 : 取り消し要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、テキストを取り消し線または打ち消し線つきで描画します。要素はすでに適切または正確ではなくなった事柄を表現するために使用してください。しかし、文書の修正を示す場合、要素は適切ではありません。この場合はとの方が適しているので、こちらを使用してください。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/s","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"73":{"title":"","content":"文章の中で削除されたテキスト。と併せて使用する。 : 削除済みテキスト要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。要素は逆の目的に、文書に追加された文字列を示すために用いることができます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/del","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"74":{"title":"","content":"文章の中に追加されたテキスト。と併せて使用する。 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、文書に追加されたテキストの範囲を表します。同様に、要素を使用して文書から削除されたテキストの範囲を表すことができます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/ins","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"75":{"title":"","content":"プログラムを実行した際のサンプル出力を表す。 : サンプル出力要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/samp","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"76":{"title":"_{","content":"表記上の理由で下付き文字として表示するべきインラインテキスト。 _{: 下付き文字要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n _{は HTML の要素で、表記上の理由で下付き文字として表示するべきインラインテキストを示します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/sub","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"77":{"title":"^{","content":"表記上の理由で上付き文字として表示するべきインラインテキスト。 ^{: 上付き文字要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n ^{は HTML の要素で、表記上の理由で上付き文字として表示するべきインラインテキストを指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/sup","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"78":{"title":"","content":"テキストに対して下線を付与したいだけの場合は CSS の text-decoration を使用する。 : 非言語的注釈（下線）要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/u","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"79":{"title":"","content":"変数名や数式を表す。 : 変数要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/var","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"80":{"title":"","content":"イメージマップの中でクリック可能な領域をあらかじめ定義する。 : イメージマップ領域要素 - HTML: ハイパーテキストマークアップ言語 | MDN\n は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。\n \n \n https://developer.mozilla.org/ja/docs/Web/HTML/Element/area","titles":["知らなかったHTMLタグについて","📙 知らなかったHTMLタグ"]},"81":{"title":"","content":"}}}}}}

Hikaru Kobayashi

Staff