diff --git a/hello2.html b/hello2.html
new file mode 100644
index 0000000..fc093ca
--- /dev/null
+++ b/hello2.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <title>コンポーネント</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+      window.onload = function(){
+          Vue.component('hoge', {
+              template:'<div>{{name}}: {{msg}}</div>',
+              props: ['msg'],
+              data: function(){// コンポーネントのdataは関数でなければダメ
+                  return {
+                      name: 'Taro'
+                  }
+              }
+          });
+
+          var app = new Vue({
+              el: '#app'
+          });
+      }
+    </script>
+  </head>
+  <body>
+    <h1>サンプル</h1>
+    <div id="app">
+      <hoge msg="hello"></hoge>
+      <hoge msg="hogehoge"></hoge>
+      <hoge msg="fuga"></hoge>
+    </div>
+  </body>
+</html>