2020年11月の記事一覧
Vue.jsでゲームを作ろ！ - ○×ゲーム-2(勝ち負け判定)
ゲーム盤に「まる」「ばつ」が打てるようになったので、次はゲームとして成立させたいので必要なコードを書いていきます。
ゲームが完了したかどうかをチェックする
var winnerId = this.getWinnerId(); if(winnerId != -1) { this.init(); playerIds = { 1:
Vue.jsでゲームを作ろ！ - ○×ゲーム - 1
参考サイトです。
・ ○×ゲーム（３目並べ）をVueでつくります。
・ ○は赤文字、×は青文字にする。
・ どちらの番かが分かるように「○（×）プレイヤーさん、マスを選んでください」と表示する（つまり２Pプレイ）
・ ゲームが終了したら「○（×）さんの勝ちです。おめでとうございます！」と表示する
・ 引き分けの場合は「引き分けです！」と表示する
早速ですが基本の形です。上記サイトのコードをVu
Vue.jsは3.0が公開されています。
v2系のVueを使ってきましたが、v3.0が9月に公開されたようです。どこが変わったかを調べて見ました。参考ページです。
公式ページです。
まず、CDNは
<script src="https://unpkg.com/vue@next"></script>
となっています。HTMLは
<div id="app"> {{ message }}</div>
そして、スクリプトですが
co
そうだ！Vue.jsを使ってみよう！ - 3
コンポーネントによる構成を見ていきます。使い回しができるコードを作っていきます。
「小さく、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になります。アプリケーションのインターフェイスについて考えてみると、ほぼすべてのタイプのインターフェイスはコンポーネントツリーとして抽象化することができます
基本です。
<div i
SwiftUIでいこう！ - Combining Gestures(組合せ)
参考サイトです。
要するに組合せです。2つのジェスチャーを続けてやっていきます。その時に使うキーワードは
.sequenced
です。
実際のコードで見ていきます。まず2つの"@GestureState"のついた変数を作ります。
// For long press gesture
@GestureState private var isPressed = false
//
そうだ！Vue.jsを使ってみよう！ - 2
条件分岐とループ
条件分岐からです。
まず、HTMLのタグです。
<div id="app-3"> <span v-if="seen">Now you see me</span></div>
これに対するスクリプト
var app3 = new Vue({ el: '#app-3', data: { seen: true }})
これはどうなるかというと、
v-if="seen"
そうだ！Vue.jsを使ってみよう！ - 1
公式のガイドのページを見ながら使ってみようと思います。
まず使うときには、フレームワークのインポートからです。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
開発バージョン、便利なコンソールの警告が含まれているものを使って見ます。
まずは、ホームページ上に文字を表示させることから始めます。
HTM
SwiftUIでいこう！ - Drag Gesture
参考サイトです
ドラッグできるようにします。
@GestureState private var dragOffset = CGSize.zero
@GestureState で変数を定義します。
"CGSize.zero"の使い方も記録しておきます。
CGSize(width: 数値, height: 数値)
ということで設定できます。今回は"CGSize.zero"なので
CGS
SwiftUIでいこう！ - Long Press Gesture
まず長押しで動作するようにするための使い命令は
LongPressGesture(minimumDuration: 1.0)
を使って、1秒後に動作するようにしています。必要なところだけ抜き取ると、
@State private var isPressed = false Image(systemName: "swift") .scaleEffect(isPressed ?
SwiftUIでいこう！ - TapGestures!
参考サイトです。Xcodeを使って試して見ます。
まず、表示させるものを決めます。"SF Symbol"を使います。
SF Symbolsについては、
便利にいろんなアイコンが使えます。
そして、"Image()"を使って表示させます。
struct ContentView: View { @State private var isPressed = false va