勉強の記録

<template>
  <!-- ここにHTML -->
</template>

<script>
// ここにJavaScript
</script>

<style>
/** ここにCSS */
</style>

<script>
export default {
  // コンポーネント名
  name: "",

  // コンポーネント内で用いるデータ
  data() {},

  // メソッド
  methods: {},

  // 算出プロパティ。何らかの計算結果を返す
  computed: {},

  // ウォッチャー。監視対象の値の変更に応じて行う処理
  watch: {},

  // インポートしたコンポーネントを登録する
  components: {},

  // コンポーネントに登録できるカスタム属性
  props: {},

  // ここからライフサイクルフック（他にもいろいろある）
  // インスタンスがすべての状態関連オプションの処理を終了した後（？）に行う処理
  created() {},

  // レンダリングを終了し DOM ノードを生成した後に行う処理
  mounted() {},
};
</script>

<template>
  <div>
    <input v-bind:value="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "hoge",
    };
  },
};
</script>

<input :value="text" />

<template>
  <div>
    <input :id="index" :class="className" :value="text" :disabled="disabled" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: "1",
      className: "aaa",
      text: "hoge",
      disabled: true,
    };
  },
};
</script>

<template>
  <div>
    <p v-if="condition">a</p>
    <p v-else>b</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: false,
    };
  },
};
</script>

<template>
  <div>
    <p v-show="condition">a</p>
    <p v-show="!condition">b</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: false,
    };
  },
};
</script>

<div>
  <p style="display: none;">a</p>
  <p style="">b</p>
</div>

<template>
  <ul>
    <li v-for="(item, index) in items" v-bind:key="index">
      {{ item.message }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ message: "hoge" }, { message: "fuga" }, { message: "piyo" }],
    };
  },
};
</script>

<template>
  <div>
    <button v-on:click="onClick">button</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      alert("click");
    },
  },
};
</script>

<button @click="onClick">button</button>

<template>
  <div>
    <input v-model="text" />
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "hello",
    };
  },
};
</script>

<template>
  <div>{{ isMoreThanThreePerson }}</div>
</template>

<script>
export default {
  data() {
    return { persons: ["Tanaka", "Sato", "Yamada", "Fujiwara", "Watanabe"] };
  },
  computed: {
    isMoreThanThreePerson() {
      return this.persons.length > 3 ? "3人より多い" : "3人以下";
    },
  },
};
</script>

<template>
-  <div>{{ isMoreThanThreePerson }}</div>
+  <div>{{ isMoreThanThreePerson() }}</div>
</template>

<script>
export default {
  data() {
    return { persons: ["Tanaka", "Sato", "Yamada", "Fujiwara", "Watanabe"] };
  },
-  computed: {
+  methods: {
    isMoreThanThreePerson() {
      return this.persons.length > 3 ? "3人より多い" : "3人以下";
    },
  },
};
</script>

<template>
  <div>
    <button @click="number++">button</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
    };
  },
  watch: {
    // 監視対象(変更前の値, 変更後の値)
    number(newValue, oldValue) {
      // 行う処理
      alert(newValue, oldValue);
    },
  },
};
</script>

Public Class Form1
    Dim question() As String = {"リンゴ", "学校", "鉛筆", "机", "鞄", "本", "部屋", "コップ", "椅子", "頭"}
    Dim answer() As String = {"apple", "school", "pencil", "desk", "bag", "book", "room", "cup", "chair", "head"}
    Dim count As Integer = 0

    ''' <summary>
    ''' 読み込み時の処理
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub Form1_Activate(sender As Object, e As EventArgs) Handles Me.Load
        number.Text = $"第{count + 1}問"
        questionLabel.Text = question(0)
    End Sub

    ''' <summary>
    ''' 答えボタン
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles answerBtn.Click
        answerLabel.Text = answer(count)
        If input.Text = answer(count) Then
            result.Text = "○"
            result.ForeColor = Color.Red
        Else
            result.Text = "×"
            result.ForeColor = Color.Blue
        End If
    End Sub

    ''' <summary>
    ''' 戻るボタン
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub Button2_Click(sender As Object, e As EventArgs) Handles backBtn.Click
        count = count - 1
        number.Text = $"第{count + 1}問"
        questionLabel.Text = question(count)
        answerLabel.Text = ""
        input.Text = ""
        result.Text = ""
        If count = 0 Then
            backBtn.Enabled = False
        End If
        If count <> 9 Then
            nextBtn.Enabled = True
        End If
    End Sub

    ''' <summary>
    ''' 進むボタン
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub nextBtn_Click(sender As Object, e As EventArgs) Handles nextBtn.Click
        count = count + 1
        number.Text = $"第{count + 1}問"
        questionLabel.Text = question(count)
        answerLabel.Text = ""
        input.Text = ""
        result.Text = ""
        If count <> 0 Then
            backBtn.Enabled = True
        End If
        If count = 9 Then
            nextBtn.Enabled = False
        End If
    End Sub
End Class

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Partial Class Form1
    Inherits System.Windows.Forms.Form

    'フォームがコンポーネントの一覧をクリーンアップするために dispose をオーバーライドします。
    <System.Diagnostics.DebuggerNonUserCode()> _
    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
        Try
            If disposing AndAlso components IsNot Nothing Then
                components.Dispose()
            End If
        Finally
            MyBase.Dispose(disposing)
        End Try
    End Sub

    'Windows フォーム デザイナーで必要です。
    Private components As System.ComponentModel.IContainer

    'メモ: 以下のプロシージャは Windows フォーム デザイナーで必要です。
    'Windows フォーム デザイナーを使用して変更できます。
    'コード エディターを使って変更しないでください。
    <System.Diagnostics.DebuggerStepThrough()> _
    Private Sub InitializeComponent()
        Me.answerBtn = New System.Windows.Forms.Button()
        Me.backBtn = New System.Windows.Forms.Button()
        Me.nextBtn = New System.Windows.Forms.Button()
        Me.number = New System.Windows.Forms.Label()
        Me.answerLabel = New System.Windows.Forms.Label()
        Me.questionLabel = New System.Windows.Forms.Label()
        Me.input = New System.Windows.Forms.TextBox()
        Me.result = New System.Windows.Forms.Label()
        Me.SuspendLayout()
        '
        'answerBtn
        '
        Me.answerBtn.Location = New System.Drawing.Point(96, 196)
        Me.answerBtn.Name = "answerBtn"
        Me.answerBtn.Size = New System.Drawing.Size(101, 47)
        Me.answerBtn.TabIndex = 0
        Me.answerBtn.Text = "答え"
        Me.answerBtn.UseVisualStyleBackColor = True
        '
        'backBtn
        '
        Me.backBtn.Enabled = False
        Me.backBtn.Location = New System.Drawing.Point(120, 332)
        Me.backBtn.Name = "backBtn"
        Me.backBtn.Size = New System.Drawing.Size(136, 52)
        Me.backBtn.TabIndex = 1
        Me.backBtn.Text = "前の問題"
        Me.backBtn.UseVisualStyleBackColor = True
        '
        'nextBtn
        '
        Me.nextBtn.Location = New System.Drawing.Point(504, 332)
        Me.nextBtn.Name = "nextBtn"
        Me.nextBtn.Size = New System.Drawing.Size(136, 52)
        Me.nextBtn.TabIndex = 2
        Me.nextBtn.Text = "次の問題"
        Me.nextBtn.UseVisualStyleBackColor = True
        '
        'number
        '
        Me.number.AutoSize = True
        Me.number.Location = New System.Drawing.Point(69, 69)
        Me.number.Name = "number"
        Me.number.Size = New System.Drawing.Size(56, 18)
        Me.number.TabIndex = 3
        Me.number.Text = "第１問"
        '
        'answerLabel
        '
        Me.answerLabel.AutoSize = True
        Me.answerLabel.Font = New System.Drawing.Font("MS UI Gothic", 11.0!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(128, Byte))
        Me.answerLabel.Location = New System.Drawing.Point(333, 210)
        Me.answerLabel.Name = "answerLabel"
        Me.answerLabel.Size = New System.Drawing.Size(0, 22)
        Me.answerLabel.TabIndex = 4
        '
        'questionLabel
        '
        Me.questionLabel.AutoSize = True
        Me.questionLabel.Font = New System.Drawing.Font("MS UI Gothic", 11.0!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(128, Byte))
        Me.questionLabel.Location = New System.Drawing.Point(93, 102)
        Me.questionLabel.Name = "questionLabel"
        Me.questionLabel.Size = New System.Drawing.Size(0, 22)
        Me.questionLabel.TabIndex = 5
        '
        'input
        '
        Me.input.Location = New System.Drawing.Point(337, 99)
        Me.input.Name = "input"
        Me.input.Size = New System.Drawing.Size(300, 25)
        Me.input.TabIndex = 6
        '
        'result
        '
        Me.result.AutoSize = True
        Me.result.Font = New System.Drawing.Font("MS UI Gothic", 14.0!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(128, Byte))
        Me.result.Location = New System.Drawing.Point(543, 214)
        Me.result.Name = "result"
        Me.result.Size = New System.Drawing.Size(0, 28)
        Me.result.TabIndex = 7
        '
        'Form1
        '
        Me.AutoScaleDimensions = New System.Drawing.SizeF(10.0!, 18.0!)
        Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
        Me.ClientSize = New System.Drawing.Size(800, 450)
        Me.Controls.Add(Me.result)
        Me.Controls.Add(Me.input)
        Me.Controls.Add(Me.questionLabel)
        Me.Controls.Add(Me.answerLabel)
        Me.Controls.Add(Me.number)
        Me.Controls.Add(Me.nextBtn)
        Me.Controls.Add(Me.backBtn)
        Me.Controls.Add(Me.answerBtn)
        Me.Name = "Form1"
        Me.Text = "英単語アプリ"
        Me.ResumeLayout(False)
        Me.PerformLayout()

    End Sub

    Friend WithEvents answerBtn As Button
    Friend WithEvents backBtn As Button
    Friend WithEvents nextBtn As Button
    Friend WithEvents number As Label
    Friend WithEvents answerLabel As Label
    Friend WithEvents questionLabel As Label
    Friend WithEvents input As TextBox
    Friend WithEvents result As Label
End Class

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        For i As Integer = 0 To 100
            If i Mod 15 = 0 Then
                System.Diagnostics.Debug.WriteLine($"{i}:FizzBuzz")
            ElseIf i Mod 3 = 0 Then
                System.Diagnostics.Debug.WriteLine($"{i}:Fizz")
            ElseIf i Mod 5 = 0 Then
                System.Diagnostics.Debug.WriteLine($"{i}:Buzz")
            Else
                System.Diagnostics.Debug.WriteLine(i)
            End If
        Next
    End Sub
End Class