{"id":13977,"date":"2025-11-20T10:00:00","date_gmt":"2025-11-20T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=13977"},"modified":"2025-11-19T17:23:34","modified_gmt":"2025-11-19T08:23:34","slug":"vue-js%e3%81%ae%e5%9f%ba%e6%9c%ac-2","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/13977","title":{"rendered":"Vue.js\u306e\u57fa\u672c #2"},"content":{"rendered":"\n

\u524d\u56de<\/a>\u306b\u5f15\u304d\u7d9a\u304dJavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306eVue.js\u306e\u57fa\u672c\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002
Vue.js\u306f\u3001HTML\u306b\u52d5\u304d\u3092\u3064\u3051\u305f\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u64cd\u4f5c\u306b\u5fdc\u3058\u3066\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u753b\u9762\u3092\u66f4\u65b0\u3057\u305f\u308a\u3059\u308b\u305f\u3081\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002
\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Vue.js\u306e\u4e2d\u3067\u3082\u7279\u306b\u3088\u304f\u4f7f\u308f\u308c\u308b \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u69cb\u6587\uff08HTML\u5074\uff09 \u3068 \u30ed\u30b8\u30c3\u30af\uff08JavaScript\u5074\uff09\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

JavaScript\u5074\u306e\u57fa\u672c\u69cb\u9020<\/h4>\n\n\n\n

Vue 3 \u3067\u306f Composition API\uff08setup\u95a2\u6570\uff09 \u3068 Options API\uff08data, methods, computed\u306a\u3069\uff09 \u306e2\u901a\u308a\u304c\u3042\u308a\u307e\u3059\u3002
\u3053\u3053\u3067\u306f\u4e21\u65b9\u3092\u7c21\u5358\u306b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

setup()\uff1aComposition API\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8<\/p>\n\n\n\n

import { reactive  } from 'vue';\n\nexport default {\n  setup() {\n    \/\/ reactive\u3092\u4f7f\u3063\u3066\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u3059\u308b\n    const state = reactive({\n      count: 0,\n      message: '\u3053\u3093\u306b\u3061\u306f\uff01'\n    });\n\n    const increment = () => {\n      state.count++;\n    };\n\n    return { state, increment };\n  }\n};<\/code><\/pre>\n\n\n\n

\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5074\u306e\u4f7f\u3044\u65b9<\/p>\n\n\n\n
<template>\n  <div>\n    <p>{{ state.message }}<\/p>\n    <p>\u30af\u30ea\u30c3\u30af\u56de\u6570\uff1a{{ state.count }}<\/p>\n    <button @click=\"increment\">\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7<\/button>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n

reactive() \u306f \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\uff08\u53cd\u5fdc\u7684\uff09\u306b\u5909\u63db \u3057\u307e\u3059\u3002
\u21d2 state.count \u306e\u3088\u3046\u306b\u76f4\u63a5\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u53c2\u7167\u3067\u304d\u307e\u3059\uff08ref \u306e\u3088\u3046\u306b .value \u306f\u4e0d\u8981\uff09\u3002<\/p>\n\n\n\n
ref() \u306f\u5358\u4e00\u306e\u5024\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u3059\u308b\u306e\u306b\u4fbf\u5229\u3067\u3059\u304c\u3001
\u8907\u6570\u306e\u72b6\u614b\u3092\u307e\u3068\u3081\u3066\u7ba1\u7406\u3059\u308b\u306a\u3089 reactive() \u306e\u307b\u3046\u304c\u30b9\u30c3\u30ad\u30ea\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
return { state, increment } \u306b\u3088\u308a\u3001HTML\uff08\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\uff09\u5074\u3067 state \u3068 increment \u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u6b21\u56de\u306fOptions API\u306edata\u3068computed\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6728\u66dc\u65e5\u62c5\u5f53\uff1anishida<\/p>\n\n\n\n
<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>