[{"data":1,"prerenderedAt":1077},["ShallowReactive",2],{"\u002Fblog\u002Fprogramming\u002Fvue-define-model":3,"relation-articles\u002Fblog\u002Fprogramming\u002Fvue-define-modelシステム開発":989,"recommented-articles\u002Fblog\u002Fprogramming\u002Fvue-define-modelシステム開発":1037},{"id":4,"title":5,"body":6,"category":976,"createdAt":977,"description":978,"extension":979,"isRecommend":161,"meta":980,"navigation":161,"path":981,"seo":982,"stem":983,"subCategory":984,"tags":985,"thumbnail":986,"updatedAt":987,"__hash__":988},"blog\u002Fblog\u002Fprogramming\u002Fvue-define-model.md","VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】",{"type":7,"value":8,"toc":965},"minimark",[9,13,22,25,29,37,41,55,66,69,74,77,83,87,92,263,268,375,384,409,413,416,420,493,503,516,519,522,525,539,548,551,555,720,725,846,848,851,855,860,909,915,918,928,934,937,944,946,951,954,958,961],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16,17,21],"p",{},"2023年12月29日、",[18,19,20],"strong",{},"Vue.js 3.4","がリリースとなりました🎉",[14,23,24],{},"3.4で追加された機能は以下のブログで確認できます。",[26,27],"link-card",{"url":28},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-3-4",[14,30,31,32,36],{},"この記事ではVue.js 3.4の中で特に便利だと感じた",[33,34,35],"code",{},"defineModel","について、実例を交えながら使い方を解説します。",[10,38,40],{"id":39},"definemodelを使った入力コンポーネントの作成","defineModelを使った入力コンポーネントの作成",[14,42,43,46,47,50,51,54],{},[33,44,45],{},"input","を含むコンポーネントを作成する場合、今までは引数を定義するための",[33,48,49],{},"props","と、親コンポーネントへ値を受け渡す関数を定義するための",[33,52,53],{},"emits","、どちらも記述する必要がありました。",[14,56,57,59,60,62,63,65],{},[33,58,35],{},"を使うと",[33,61,49],{},"と",[33,64,53],{},"を記述することなく、入力コンポーネントを実現することができます。",[14,67,68],{},"例として、今回は以下のようなコンポーネントを作成してみます。",[70,71],"img",{"alt":72,"src":73},"今回作成するコンポーネント","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-define-model_define-model.webp",[14,75,76],{},"インプット部分が子コンポーネントとなっており、子コンポーネントのインプットに入力された内容を親コンポーネントに表示しています。",[14,78,79,80,82],{},"このコンポーネントを従来の記法と",[33,81,35],{},"を活用した記法で作成してみます。",[84,85,86],"h3",{"id":86},"従来の記法",[14,88,89],{},[33,90,91],{},"App.vue",[93,94,99],"pre",{"className":95,"code":96,"filename":91,"language":97,"meta":98,"style":98},"language-vue shiki shiki-themes github-dark","\u003Cscript setup>\nimport Child from \".\u002FChild.vue\";\nimport { ref } from \"vue\";\n\nconst msg = ref(\"Hello World!\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ msg }}\u003C\u002Fh1>\n  \u003CChild v-model=\"msg\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[33,100,101,121,141,156,163,188,198,203,213,229,254],{"__ignoreMap":98},[102,103,106,110,114,118],"span",{"class":104,"line":105},"line",1,[102,107,109],{"class":108},"s95oV","\u003C",[102,111,113],{"class":112},"s4JwU","script",[102,115,117],{"class":116},"svObZ"," setup",[102,119,120],{"class":108},">\n",[102,122,124,128,131,134,138],{"class":104,"line":123},2,[102,125,127],{"class":126},"snl16","import",[102,129,130],{"class":108}," Child ",[102,132,133],{"class":126},"from",[102,135,137],{"class":136},"sU2Wk"," \".\u002FChild.vue\"",[102,139,140],{"class":108},";\n",[102,142,144,146,149,151,154],{"class":104,"line":143},3,[102,145,127],{"class":126},[102,147,148],{"class":108}," { ref } ",[102,150,133],{"class":126},[102,152,153],{"class":136}," \"vue\"",[102,155,140],{"class":108},[102,157,159],{"class":104,"line":158},4,[102,160,162],{"emptyLinePlaceholder":161},true,"\n",[102,164,166,169,173,176,179,182,185],{"class":104,"line":165},5,[102,167,168],{"class":126},"const",[102,170,172],{"class":171},"sDLfK"," msg",[102,174,175],{"class":126}," =",[102,177,178],{"class":116}," ref",[102,180,181],{"class":108},"(",[102,183,184],{"class":136},"\"Hello World!\"",[102,186,187],{"class":108},");\n",[102,189,191,194,196],{"class":104,"line":190},6,[102,192,193],{"class":108},"\u003C\u002F",[102,195,113],{"class":112},[102,197,120],{"class":108},[102,199,201],{"class":104,"line":200},7,[102,202,162],{"emptyLinePlaceholder":161},[102,204,206,208,211],{"class":104,"line":205},8,[102,207,109],{"class":108},[102,209,210],{"class":112},"template",[102,212,120],{"class":108},[102,214,216,219,222,225,227],{"class":104,"line":215},9,[102,217,218],{"class":108},"  \u003C",[102,220,221],{"class":112},"h1",[102,223,224],{"class":108},">{{ msg }}\u003C\u002F",[102,226,221],{"class":112},[102,228,120],{"class":108},[102,230,232,234,237,240,243,246,249,251],{"class":104,"line":231},10,[102,233,218],{"class":108},[102,235,236],{"class":112},"Child",[102,238,239],{"class":116}," v-model",[102,241,242],{"class":108},"=",[102,244,245],{"class":136},"\"",[102,247,248],{"class":108},"msg",[102,250,245],{"class":136},[102,252,253],{"class":108}," \u002F>\n",[102,255,257,259,261],{"class":104,"line":256},11,[102,258,193],{"class":108},[102,260,210],{"class":112},[102,262,120],{"class":108},[14,264,265],{},[33,266,267],{},"Child.vue",[93,269,271],{"className":95,"code":270,"filename":267,"language":97,"meta":98,"style":98},"\u003Cscript setup>\nconst props = defineProps([\"modelValue\"]);\nconst emit = defineEmits([\"update:modelValue\"]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput :value=\"props.modelValue\" @input=\"(e) => emit('update:modelValue', e.target.value)\" \u002F>\n\u003C\u002Ftemplate>\n",[33,272,273,283,304,323,331,335,343,367],{"__ignoreMap":98},[102,274,275,277,279,281],{"class":104,"line":105},[102,276,109],{"class":108},[102,278,113],{"class":112},[102,280,117],{"class":116},[102,282,120],{"class":108},[102,284,285,287,290,292,295,298,301],{"class":104,"line":123},[102,286,168],{"class":126},[102,288,289],{"class":171}," props",[102,291,175],{"class":126},[102,293,294],{"class":116}," defineProps",[102,296,297],{"class":108},"([",[102,299,300],{"class":136},"\"modelValue\"",[102,302,303],{"class":108},"]);\n",[102,305,306,308,311,313,316,318,321],{"class":104,"line":143},[102,307,168],{"class":126},[102,309,310],{"class":171}," emit",[102,312,175],{"class":126},[102,314,315],{"class":116}," defineEmits",[102,317,297],{"class":108},[102,319,320],{"class":136},"\"update:modelValue\"",[102,322,303],{"class":108},[102,324,325,327,329],{"class":104,"line":158},[102,326,193],{"class":108},[102,328,113],{"class":112},[102,330,120],{"class":108},[102,332,333],{"class":104,"line":165},[102,334,162],{"emptyLinePlaceholder":161},[102,336,337,339,341],{"class":104,"line":190},[102,338,109],{"class":108},[102,340,210],{"class":112},[102,342,120],{"class":108},[102,344,345,347,349,352,354,357,360,362,365],{"class":104,"line":200},[102,346,218],{"class":108},[102,348,45],{"class":112},[102,350,351],{"class":116}," :value",[102,353,242],{"class":108},[102,355,356],{"class":136},"\"props.modelValue\"",[102,358,359],{"class":116}," @input",[102,361,242],{"class":108},[102,363,364],{"class":136},"\"(e) => emit('update:modelValue', e.target.value)\"",[102,366,253],{"class":108},[102,368,369,371,373],{"class":104,"line":205},[102,370,193],{"class":108},[102,372,210],{"class":112},[102,374,120],{"class":108},[14,376,377,378,380,381,383],{},"子コンポーネント内で",[33,379,49],{},"を定義することで親コンポーネントから値を受け取り、",[33,382,53],{},"を定義することで親コンポーネントへ値を送れるようにしています。",[14,385,386,387,389,390,393,394,397,398,401,402,404,405,408],{},"また、",[33,388,49],{},"で定義した値は書き込みが出来ないため、",[33,391,392],{},"v-model","に設定することができません。",[395,396],"br",{},"\n代わりに、",[33,399,400],{},":value","に",[33,403,49],{},"を設定することによって値を表示、",[33,406,407],{},"@input","に入力時の処理を書いています。",[84,410,412],{"id":411},"definemodelを活用した記法","defineModelを活用した記法",[14,414,415],{},"App.vueは上記と同じです。",[14,417,418],{},[33,419,267],{},[93,421,423],{"className":95,"code":422,"filename":267,"language":97,"meta":98,"style":98},"\u003Cscript setup>\nconst model = defineModel();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"model\" \u002F>\n\u003C\u002Ftemplate>\n",[33,424,425,435,450,458,462,470,485],{"__ignoreMap":98},[102,426,427,429,431,433],{"class":104,"line":105},[102,428,109],{"class":108},[102,430,113],{"class":112},[102,432,117],{"class":116},[102,434,120],{"class":108},[102,436,437,439,442,444,447],{"class":104,"line":123},[102,438,168],{"class":126},[102,440,441],{"class":171}," model",[102,443,175],{"class":126},[102,445,446],{"class":116}," defineModel",[102,448,449],{"class":108},"();\n",[102,451,452,454,456],{"class":104,"line":143},[102,453,193],{"class":108},[102,455,113],{"class":112},[102,457,120],{"class":108},[102,459,460],{"class":104,"line":158},[102,461,162],{"emptyLinePlaceholder":161},[102,463,464,466,468],{"class":104,"line":165},[102,465,109],{"class":108},[102,467,210],{"class":112},[102,469,120],{"class":108},[102,471,472,474,476,478,480,483],{"class":104,"line":190},[102,473,218],{"class":108},[102,475,45],{"class":112},[102,477,239],{"class":116},[102,479,242],{"class":108},[102,481,482],{"class":136},"\"model\"",[102,484,253],{"class":108},[102,486,487,489,491],{"class":104,"line":200},[102,488,193],{"class":108},[102,490,210],{"class":112},[102,492,120],{"class":108},[14,494,495,62,497,499,500,502],{},[33,496,49],{},[33,498,53],{},"を記述する代わりに、",[33,501,35],{},"を記述することで変数の受け取りと変更ができるようになります。",[14,504,386,505,507,508,510,511,401,513,515],{},[33,506,392],{},"の値は変更可能なので、そのまま",[33,509,45],{},"タグの",[33,512,392],{},[33,514,35],{},"で定義した変数を渡すことができます。",[14,517,518],{},"上記のコードは、以下のプレイグラウンドで動作させることができます。",[26,520],{"url":521},"https:\u002F\u002Fplay.vuejs.org\u002F#eNqFUstqwzAQ\u002FBVVF6eQ2pTcghNoQ6At9EFb6EWXYK8dpbIk9EgDxv\u002FelZy4KYTkJO3ODDurUUvvtE63HuiU5rYwXDtiwXk9Z5I3WhlHFmsuSlIZ1ZAkzWIVBMlAaImBinR7Sg8xWShpHWlsTWYBHyUPIIQiX8qI8iq5ZjLP+nk4CQsHjRYrB1gRkq9v520bxV2XZ1jFbu9ke9OoEsSMUcQZJRmCeXakp2PqLI6veJ1urJK4Whv0jBaq0VyAedWOoz1GpyQiAVuhu5+n2HPGw\u002FjQL9ZQfJ\u002Fob+wu9Bh9M2DBbIHRAXMrU4Pr4eXHC+zwPoDo3gtknwHfwSrhg8eedu9libaPeNHtY3x\u002FLutPu9w5kPawVDAamF3kM4qZLM6s\u002Fmd3kk6ijskOX3HI+sTn2McbksCAS6i4hOdQjS5Ey6X27jjEcDL6P0Ta\u002FQLnct5h",[84,523,524],{"id":524},"複数のv-modelを渡す方法",[14,526,527,528,530,531,534,535,538],{},"複数の",[33,529,392],{},"を使用する場合は、",[33,532,533],{},"v-model引数","を用いて",[33,536,537],{},"v-model:変数名","と記述します。",[14,540,541,542,544,545,538],{},"子コンポーネントでは",[33,543,35],{},"に引数を与えて",[33,546,547],{},"defineModel('変数名')",[14,549,550],{},"以下に例を示します。",[14,552,553],{},[33,554,91],{},[93,556,558],{"className":95,"code":557,"filename":91,"language":97,"meta":98,"style":98},"\u003Cscript setup>\nimport { ref } from \"vue\";\nimport UserName from \".\u002FUserName.vue\";\n\nconst first = ref(\"John\");\nconst last = ref(\"Doe\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ first }} {{ last }}\u003C\u002Fh1>\n  \u003CUserName v-model:first-name=\"first\" v-model:last-name=\"last\" \u002F>\n\u003C\u002Ftemplate>\n",[33,559,560,570,582,596,600,618,636,644,648,656,669,711],{"__ignoreMap":98},[102,561,562,564,566,568],{"class":104,"line":105},[102,563,109],{"class":108},[102,565,113],{"class":112},[102,567,117],{"class":116},[102,569,120],{"class":108},[102,571,572,574,576,578,580],{"class":104,"line":123},[102,573,127],{"class":126},[102,575,148],{"class":108},[102,577,133],{"class":126},[102,579,153],{"class":136},[102,581,140],{"class":108},[102,583,584,586,589,591,594],{"class":104,"line":143},[102,585,127],{"class":126},[102,587,588],{"class":108}," UserName ",[102,590,133],{"class":126},[102,592,593],{"class":136}," \".\u002FUserName.vue\"",[102,595,140],{"class":108},[102,597,598],{"class":104,"line":158},[102,599,162],{"emptyLinePlaceholder":161},[102,601,602,604,607,609,611,613,616],{"class":104,"line":165},[102,603,168],{"class":126},[102,605,606],{"class":171}," first",[102,608,175],{"class":126},[102,610,178],{"class":116},[102,612,181],{"class":108},[102,614,615],{"class":136},"\"John\"",[102,617,187],{"class":108},[102,619,620,622,625,627,629,631,634],{"class":104,"line":190},[102,621,168],{"class":126},[102,623,624],{"class":171}," last",[102,626,175],{"class":126},[102,628,178],{"class":116},[102,630,181],{"class":108},[102,632,633],{"class":136},"\"Doe\"",[102,635,187],{"class":108},[102,637,638,640,642],{"class":104,"line":200},[102,639,193],{"class":108},[102,641,113],{"class":112},[102,643,120],{"class":108},[102,645,646],{"class":104,"line":205},[102,647,162],{"emptyLinePlaceholder":161},[102,649,650,652,654],{"class":104,"line":215},[102,651,109],{"class":108},[102,653,210],{"class":112},[102,655,120],{"class":108},[102,657,658,660,662,665,667],{"class":104,"line":231},[102,659,218],{"class":108},[102,661,221],{"class":112},[102,663,664],{"class":108},">{{ first }} {{ last }}\u003C\u002F",[102,666,221],{"class":112},[102,668,120],{"class":108},[102,670,671,673,676,678,681,684,686,688,691,693,695,697,700,702,704,707,709],{"class":104,"line":256},[102,672,218],{"class":108},[102,674,675],{"class":112},"UserName",[102,677,239],{"class":116},[102,679,680],{"class":108},":",[102,682,683],{"class":116},"first-name",[102,685,242],{"class":108},[102,687,245],{"class":136},[102,689,690],{"class":108},"first",[102,692,245],{"class":136},[102,694,239],{"class":116},[102,696,680],{"class":108},[102,698,699],{"class":116},"last-name",[102,701,242],{"class":108},[102,703,245],{"class":136},[102,705,706],{"class":108},"last",[102,708,245],{"class":136},[102,710,253],{"class":108},[102,712,714,716,718],{"class":104,"line":713},12,[102,715,193],{"class":108},[102,717,210],{"class":112},[102,719,120],{"class":108},[14,721,722],{},[33,723,724],{},"UserName.vue",[93,726,728],{"className":95,"code":727,"filename":724,"language":97,"meta":98,"style":98},"\u003Cscript setup>\nconst firstName = defineModel(\"firstName\");\nconst lastName = defineModel(\"lastName\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput type=\"text\" v-model=\"firstName\" \u002F>\n  \u003Cinput type=\"text\" v-model=\"lastName\" \u002F>\n\u003C\u002Ftemplate>\n",[33,729,730,740,758,776,784,788,796,818,838],{"__ignoreMap":98},[102,731,732,734,736,738],{"class":104,"line":105},[102,733,109],{"class":108},[102,735,113],{"class":112},[102,737,117],{"class":116},[102,739,120],{"class":108},[102,741,742,744,747,749,751,753,756],{"class":104,"line":123},[102,743,168],{"class":126},[102,745,746],{"class":171}," firstName",[102,748,175],{"class":126},[102,750,446],{"class":116},[102,752,181],{"class":108},[102,754,755],{"class":136},"\"firstName\"",[102,757,187],{"class":108},[102,759,760,762,765,767,769,771,774],{"class":104,"line":143},[102,761,168],{"class":126},[102,763,764],{"class":171}," lastName",[102,766,175],{"class":126},[102,768,446],{"class":116},[102,770,181],{"class":108},[102,772,773],{"class":136},"\"lastName\"",[102,775,187],{"class":108},[102,777,778,780,782],{"class":104,"line":158},[102,779,193],{"class":108},[102,781,113],{"class":112},[102,783,120],{"class":108},[102,785,786],{"class":104,"line":165},[102,787,162],{"emptyLinePlaceholder":161},[102,789,790,792,794],{"class":104,"line":190},[102,791,109],{"class":108},[102,793,210],{"class":112},[102,795,120],{"class":108},[102,797,798,800,802,805,807,810,812,814,816],{"class":104,"line":200},[102,799,218],{"class":108},[102,801,45],{"class":112},[102,803,804],{"class":116}," type",[102,806,242],{"class":108},[102,808,809],{"class":136},"\"text\"",[102,811,239],{"class":116},[102,813,242],{"class":108},[102,815,755],{"class":136},[102,817,253],{"class":108},[102,819,820,822,824,826,828,830,832,834,836],{"class":104,"line":205},[102,821,218],{"class":108},[102,823,45],{"class":112},[102,825,804],{"class":116},[102,827,242],{"class":108},[102,829,809],{"class":136},[102,831,239],{"class":116},[102,833,242],{"class":108},[102,835,773],{"class":136},[102,837,253],{"class":108},[102,839,840,842,844],{"class":104,"line":215},[102,841,193],{"class":108},[102,843,210],{"class":112},[102,845,120],{"class":108},[14,847,518],{},[26,849],{"url":850},"https:\u002F\u002Fplay.vuejs.org\u002F#eNqFkstuwjAQRX\u002FF8iZUAqKKHQpIfbAoUmnVx86bKEzANLEt26FUkf+9Y4MDSAg2UWbu9fjckVv6oNRw2wAd08wUmitLDNhGTZngtZLakpZoKIkjpZY1SdCadNK3Ab3IazhowzQ2\u002FES0MVFIYSwpucbvxA\u002FqJXO5FsldlKr8qDxL8EKW7kEQAQsLtapyC1gRkq3vp217mOccwf8wwLksRSlYIoMvCNkOarmEahyODAT2J4yGgtFzhx8UDf5\u002Fr6c4NEs7CNqnpxkvbO0kcVjNhCyh5AJe\u002FSW9pBPOV3DJGvu3dsKFaiyxf8qTW9gheQwVs4Z90BDm5oF47cF\u002FHt4aZC75argxUmD61g9ktJC14hXoN2U5ZmJ0TILitbyq5O889KxuoB\u002F7xRqKnwv9jdn5HqPvGnDVWwTpNJvrFSCul2efi4DeiRigqdB9RfwAI6vGM+5tj41YIvaJL9C+hOfNxerLzHYWhImhPKh3uuBnFJ\u002FA05XoR9zRcBTOMeGo+wcs+yse",[84,852,854],{"id":853},"typescriptでの使用","TypeScriptでの使用",[14,856,857,859],{},[33,858,35],{},"は型引数を取ることができます。",[93,861,863],{"className":95,"code":862,"filename":267,"language":97,"meta":98,"style":98},"\u003Cscript setup lang=\"ts\">\nconst model = defineModel\u003Cstring>();\n\u003C\u002Fscript>\n",[33,864,865,883,901],{"__ignoreMap":98},[102,866,867,869,871,873,876,878,881],{"class":104,"line":105},[102,868,109],{"class":108},[102,870,113],{"class":112},[102,872,117],{"class":116},[102,874,875],{"class":116}," lang",[102,877,242],{"class":108},[102,879,880],{"class":136},"\"ts\"",[102,882,120],{"class":108},[102,884,885,887,889,891,893,895,898],{"class":104,"line":123},[102,886,168],{"class":126},[102,888,441],{"class":171},[102,890,175],{"class":126},[102,892,446],{"class":116},[102,894,109],{"class":108},[102,896,897],{"class":171},"string",[102,899,900],{"class":108},">();\n",[102,902,903,905,907],{"class":104,"line":143},[102,904,193],{"class":108},[102,906,113],{"class":112},[102,908,120],{"class":108},[14,910,911,912,914],{},"型引数を記述することによって、",[33,913,35],{},"が受け入れられる型を制限することができます。",[84,916,917],{"id":917},"まとめ",[14,919,31,920,922,923,925,927],{},[33,921,35],{},"について、実例を交えながら使い方を解説しました。",[395,924],{},[33,926,35],{},"を使うと入力コンポーネントを少ないコード量で書くことができるので、ぜひ使ってみてください。",[929,930],"affiliate-block",{"asin":931,"image-url":932,"title":933},"B0BG3YF6ZY","https:\u002F\u002Fm.media-amazon.com\u002Fimages\u002FI\u002F51EEdM8QBtL._SL160_.jpg","Vue 3　フロントエンド開発の教科書",[10,935,936],{"id":936},"参考",[938,939,940],"ul",{},[941,942,943],"li",{},"Announcing Vue 3.4",[26,945],{"url":28},[938,947,948],{},[941,949,950],{},"Component v-model",[26,952],{"url":953},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fv-model.html",[938,955,956],{},[941,957,35],{},[26,959],{"url":960},"https:\u002F\u002Fja.vuejs.org\u002Fapi\u002Fsfc-script-setup#definemodel",[962,963,964],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":98,"searchDepth":123,"depth":123,"links":966},[967,968,975],{"id":12,"depth":123,"text":12},{"id":39,"depth":123,"text":40,"children":969},[970,971,972,973,974],{"id":86,"depth":143,"text":86},{"id":411,"depth":143,"text":412},{"id":524,"depth":143,"text":524},{"id":853,"depth":143,"text":854},{"id":917,"depth":143,"text":917},{"id":936,"depth":123,"text":936},"システム開発","2024\u002F01\u002F07","Vue.js 3.4で追加されたdefineModelの使い方を紹介しています。","md",{},"\u002Fblog\u002Fprogramming\u002Fvue-define-model",{"title":5,"description":978},"blog\u002Fprogramming\u002Fvue-define-model","Vue.js",[984],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vue-define-model_vue.webp","2024\u002F03\u002F07","0IvE-S1d2LsdUHuZrsNIp4_WPVH2274PAdEVQhG2URc",[990,1000,1008,1014,1023,1029],{"id":991,"path":992,"title":993,"category":976,"tags":994,"thumbnail":997,"createdAt":998,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Faws-iam-passkey.md","\u002Fblog\u002Fprogramming\u002Faws-iam-passkey","AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました",[995,996],"AWS","Windows","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002F2024-08-22_11-12-41_nvre36gj.webp","2024\u002F08\u002F22",null,{"id":1001,"path":1002,"title":1003,"category":976,"tags":1004,"thumbnail":1006,"createdAt":1007,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue.md","\u002Fblog\u002Fprogramming\u002Freact-tutorial-vue","React公式チュートリアルをVueでも書いて比較してみた",[1005,984],"React.js","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_react-vue_react-vue.webp","2024\u002F06\u002F22",{"id":1009,"path":1010,"title":1011,"category":976,"tags":1012,"thumbnail":986,"createdAt":1013,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Fvue-scoped-css.md","\u002Fblog\u002Fprogramming\u002Fvue-scoped-css","Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】",[984],"2024\u002F06\u002F12",{"id":1015,"path":1016,"title":1017,"category":976,"tags":1018,"thumbnail":1021,"createdAt":1022,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify.md","\u002Fblog\u002Fprogramming\u002Fvercel-vs-amplify","Vercel(Hobby)→AWS Amplify 移行して分かった両者の違い",[1019,1020],"Vercel","Amplify","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_vercel-vs-amplify_vercel-amplify.webp","2024\u002F05\u002F17",{"id":1024,"path":1025,"title":1026,"category":976,"tags":1027,"thumbnail":986,"createdAt":1028,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Fvue-playground.md","\u002Fblog\u002Fprogramming\u002Fvue-playground","手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説",[984],"2024\u002F04\u002F08",{"id":1030,"path":1031,"title":1032,"category":976,"tags":1033,"thumbnail":1036,"createdAt":987,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install.md","\u002Fblog\u002Fprogramming\u002Ftailwind-css-v4-install","Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】",[1034,1035],"Tailwind CSS","Vite","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_tailwind-css-v4-install_tailwind-css.webp",[1038,1040,1051,1061,1070],{"id":1001,"path":1002,"title":1003,"category":976,"tags":1039,"thumbnail":1006,"createdAt":1007,"updatedAt":999},[1005,984],{"id":1041,"path":1042,"title":1043,"category":976,"tags":1044,"thumbnail":1048,"createdAt":1049,"updatedAt":1050},"blog\u002Fblog\u002Fprogramming\u002Fnpm-develop.md","\u002Fblog\u002Fprogramming\u002Fnpm-develop","フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】",[1045,1046,1047],"JavaScript","TypeScript","npm","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_npm-develop_thumbnail.webp","2024\u002F01\u002F14","2024\u002F01\u002F19",{"id":1052,"path":1053,"title":1054,"category":976,"tags":1055,"thumbnail":1058,"createdAt":1059,"updatedAt":1060},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-storybook.md","\u002Fblog\u002Fprogramming\u002Fnuxt-storybook","Nuxt3にStorybookを導入する方法",[1056,1057],"NuxtJS","Storybook","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-storybook_thumbnail.webp","2023\u002F11\u002F22","2024\u002F03\u002F18",{"id":1062,"path":1063,"title":1064,"category":976,"tags":1065,"thumbnail":1068,"createdAt":1069,"updatedAt":1050},"blog\u002Fblog\u002Fprogramming\u002Fnuxt-blog.md","\u002Fblog\u002Fprogramming\u002Fnuxt-blog","NuxtJSを使ってブログを作ってみた【Nuxt Content\u002FTailwindCSS\u002FdaisyUI】",[1056,984,1066,1067],"TailwindCSS","ブログ","https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_nuxt-blog_thumbnail.webp","2023\u002F08\u002F25",{"id":1071,"path":1072,"title":1073,"category":976,"tags":1074,"thumbnail":1075,"createdAt":1076,"updatedAt":999},"blog\u002Fblog\u002Fprogramming\u002Fchat-scroll.md","\u002Fblog\u002Fprogramming\u002Fchat-scroll","メッセージ送受信時にスクロール位置を最下部に維持する処理を実装【TypeScript\u002FVue.js】",[1045,1046,984],"https:\u002F\u002Fimg-blog.ashcolor.jp\u002Fimg\u002Fpc\u002Fprogramming_chat-scroll_thumbnail.webp","2023\u002F08\u002F01",1793620323632]