目次　 1.はじめに 2.状況 3.実際のコード 4.おわりに 1. はじめに v-forで使用する配列の中にv-onで使用したいメソッドを使用する方法がわかったのでまとめたいと思います。 2. 状況 v-forの中にv-onのメソッドを使用したいと考えたのは以下のような状況があったからでした。 表示されたメニューにイベントを追加したいと考えました。 vuetify参照 3. 実際のコード export default { data () { return { items: [ { title: '編集', icon: 'mdi-pencil', action: 'edit' }, { title: '削除', icon: 'mdi-delete', action: 'remove' } ] } } 通常上記のようなオブジェクトを用意してv-forを使用すると思います。今回はactionにクリックされた時に発火するメソッドがあるとします。 methods: { edit () { ・・・省略 }, remove () { ・・・省略 }, callAction (action) { this[action] }, ① actionと同じ名前のmethodsを用意します ② callactionではブラケット記法で記載します <v-list-item v-for="item in items" :key="item.text" link @click="callAction(item.action)" ③ callactionの引数としてitem.actionを設定する。 ブラケット記法ではドット記法では設定できない値も設定することが可能となっています。 ブラケットとは 4. おわりに ドット記法しか使用したことがなかったので、ブラケット記法で簡単に解決できるとは知らずに悶々としていました。非常に勉強になりました。

概要 plunkerでvueやってみた。 phinaでブロック崩しやってみた。 サンプルコード new Vue({ el: '#app', 　data: { }, beforeMount: function() { this.init() }, methods: { init() { phina.globalize(); var SCREEN_WIDTH = 640; var SCREEN_HEIGHT = 960; var MAX_PER_LINE = 8; var BLOCK_NUM = MAX_PER_LINE * 5; var BLOCK_SIZE = 64; var BOARD_PADDING = 50; var PADDLE_WIDTH = 150; var PADDLE_HEIGHT = 32; var BALL_RADIUS = 16; var BALL_SPEED = 16; var BOARD_SIZE = SCREEN_WIDTH - BOARD_PADDING * 2; var BOARD_OFFSET_X = BOARD_PADDING + BLOCK_SIZE / 2; var BOARD_OFFSET_Y = 150; phina.define("MainScene", { superClass: 'CanvasScene', init: function(options) { this.superInit(options); this.scoreLabel = Label('0').addChildTo(this); this.scoreLabel.x = this.gridX.center(); this.scoreLabel.y = this.gridY.span(1); this.scoreLabel.fill = 'white'; this.group = CanvasElement().addChildTo(this); var gridX = Grid(BOARD_SIZE, MAX_PER_LINE); var gridY = Grid(BOARD_SIZE, MAX_PER_LINE); var self = this; (BLOCK_NUM).times(function(i) { var xIndex = i % MAX_PER_LINE; var yIndex = Math.floor(i / MAX_PER_LINE); var angle = (360) / BLOCK_NUM * i; var block = Block(angle).addChildTo(this.group).setPosition(100, 100); block.x = gridX.span(xIndex) + BOARD_OFFSET_X; block.y = gridY.span(yIndex) + BOARD_OFFSET_Y; }, this); this.ball = Ball().addChildTo(this); this.paddle = Paddle().addChildTo(this); this.paddle.setPosition(this.gridX.center(), this.gridY.span(15)); this.paddle.hold(this.ball); this.ballSpeed = 0; this.one('pointend', function() { this.paddle.release(); this.ballSpeed = BALL_SPEED; }); this.score = 0; this.time = 0; this.combo = 0; }, update: function(app) { this.time += app.deltaTime; this.paddle.x = app.pointer.x; if (this.paddle.left < 0) { this.paddle.left = 0; } if (this.paddle.right > this.gridX.width) { this.paddle.right = this.gridX.width; } (this.ballSpeed).times(function() { this.ball.move(); this.checkHit(); }, this); if (this.group.children.length <= 0) { this.gameclear(); } }, checkHit: function() { var ball = this.ball; if (ball.left < 0) { ball.left = 0; ball.reflectX(); } if (ball.right > this.gridX.width) { ball.right = this.gridX.width ball.reflectX(); } if (ball.top < 0) { ball.top = 0; ball.reflectY(); } if (ball.bottom > this.gridY.width) { ball.bottom = this.gridY.width ball.reflectY(); this.gameover(); } if (ball.hitTestElement(this.paddle)) { ball.bottom = this.paddle.top; var dx = ball.x - this.paddle.x; ball.direction.x = dx; ball.direction.y = -80; ball.direction.normalize(); this.ballSpeed += 1; this.combo = 0; } this.group.children.some(function(block) { if (ball.hitTestElement(block)) { var dq = Vector2.sub(ball, block); if (Math.abs(dq.x) < Math.abs(dq.y)) { ball.reflectY(); if (dq.y >= 0) { ball.top = block.bottom; } else { ball.bottom = block.top; } } else { ball.reflectX(); if (dq.x >= 0) { ball.left = block.right; } else { ball.right = block.left; } } block.remove(); this.combo += 1; this.score += this.combo * 100; var c = ComboLabel(this.combo).addChildTo(this); c.x = this.gridX.span(12) + Math.randint(-50, 50); c.y = this.gridY.span(12) + Math.randint(-50, 50); return true; } }, this); }, gameclear: function() { var bonus = 2000; this.score += bonus; var seconds = (this.time / 1000).floor(); var bonusTime = Math.max(60 * 10 - seconds, 0); this.score += (bonusTime * 10); this.gameover(); }, gameover: function() { this.exit({ score: this.score, }); }, _accessor: { score: { get: function() { return this._score; }, set: function(v) { this._score = v; this.scoreLabel.text = v; }, }, } }); phina.define('Block', { superClass: 'RectangleShape', init: function(angle) { this.superInit({ width: BLOCK_SIZE, height: BLOCK_SIZE, fill: 'hsl({0}, 80%, 60%)'.format(angle || 0), stroke: null, cornerRadius: 8, }); }, }); phina.define('Ball', { superClass: 'CircleShape', init: function() { this.superInit({ radius: BALL_RADIUS, fill: '#eee', stroke: null, cornerRadius: 8, }); this.speed = 0; this.direction = Vector2(1, -1).normalize(); }, move: function() { this.x += this.direction.x; this.y += this.direction.y; }, reflectX: function() { this.direction.x *= -1; }, reflectY: function() { this.direction.y *= -1; }, }); phina.define('Paddle', { superClass: 'RectangleShape', init: function() { this.superInit({ width: PADDLE_WIDTH, height: PADDLE_HEIGHT, fill: '#eee', stroke: null, cornerRadius: 8, }); }, hold: function(ball) { this.ball = ball; }, release: function() { this.ball = null; }, update: function() { if (this.ball) { this.ball.x = this.x; this.ball.y = this.top - this.ball.radius; } } }); phina.define('ComboLabel', { superClass: 'Label', init: function(num) { this.superInit(num + ' combo!'); this.stroke = 'white'; this.strokeWidth = 8; if (num < 5) { this.fill = 'hsl(40, 60%, 60%)'; this.fontSize = 16; } else if (num < 10) { this.fill = 'hsl(120, 60%, 60%)'; this.fontSize = 32; } else { this.fill = 'hsl(220, 60%, 60%)'; this.fontSize = 48; } this.tweener.by({ alpha: -1, y: -50, }).call(function() { this.remove(); }, this); }, }); phina.main(function() { var app = GameApp({ title: 'Breakout', startLabel: 'splash', width: SCREEN_WIDTH, height: SCREEN_HEIGHT, backgroundColor: '#999', }); app.run(); }); }, } }); 成果物 以上。

概要 plunkerでvueやってみた。 phinaでbox2dやってみた。 サンプルコード new Vue({ el: '#app', 　data: { }, beforeMount: function() { this.init() }, methods: { init() { phina.globalize(); var SCREEN_WIDTH = 640; var SCREEN_HEIGHT = 960; phina.define("MainScene", { superClass: 'DisplayScene', init: function() { this.superInit(); this.backgroundColor = 'aqua'; var layer = Box2dLayer({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, }).addChildTo(this); var ball0 = CircleShape().addChildTo(this); ball0.setPosition(this.gridX.span(3), this.gridY.span(3)); ball0.alpha = 0.5; layer.createBody({ type: 'dynamic', shape: 'circle', }).attachTo(ball0); this.ball1 = CircleShape().addChildTo(this); this.ball1.setPosition(this.gridX.span(4), this.gridY.span(3)); this.ball1.alpha = 0.5; this.ball = layer.createBody({ type: 'dynamic', shape: 'circle', }).attachTo(this.ball1); var ball2 = CircleShape().addChildTo(this); ball2.setPosition(this.gridX.span(5), this.gridY.span(3)); ball2.alpha = 0.5; layer.createBody({ type: 'dynamic', shape: 'circle', }).attachTo(ball2); var floor0 = RectangleShape({ width: 500, height: 32, }).addChildTo(this); floor0.setPosition(this.gridX.span(4), this.gridY.span(9)); floor0.alpha = 0.5; layer.createBody({ type: 'static', shape: 'box', }).attachTo(floor0).body.SetAngle(Math.degToRad(10)); var floor1 = RectangleShape({ width: 500, height: 32, }).addChildTo(this); floor1.setPosition(this.gridX.span(13), this.gridY.span(13)); floor1.alpha = 0.5; layer.createBody({ type: 'static', shape: 'box', }).attachTo(floor1).body.SetAngle(Math.degToRad(-15)); }, update: function() { if (this.ball1.y > 900) { //alert(this.ball.body) //this.ball1.body.setPosition(this.gridX.span(4), this.gridY.span(3)); var p = new b2.Vec2(0, 0); this.ball.body.SetPosition(p); } }, }); phina.main(function() { var app = GameApp({ startLabel: 'splash', title: 'box2d', }); app.run(); }); }, } }); 成果物 以上。

この記事は？ はじめまして！恵比寿でエンジニアをやってる Zak です。 最近よく Tailwind CSS を耳にするようになりました！ どうやら CSS を書く量が減ってかなり楽になるのだとか ? 個人的に CSS を書くのはやりたくないことランキング第3位に入るくらい嫌いなので興味本位で使ってみました！ 簡単にセットアップできたので今回は Vue3系で Tailwind CSS を利用するまでの流れを解説します? 基本コピペでやれば OK という感じで進めていこうと思います。 それではいきましょう? 前提条件 ? 既に Vue プロジェクトがあるとすぐに作業に入れます。 まだプロジェクトがない方は Vue3の環境を30分以内にさくっと構築したい✨ こちらからどうぞ！ 実践 ? Step1. Tailwind CSS インストール プロジェクトルート # これは自分の環境の場合なので各自環境で適切なコマンドを実行してコンテナに入ります % docker compose exec app bash yarn で Tailwind CSS をインストールをするのですが現在の Tailwind CSS 最新バージョンに cli 側が対応できていないのでバージョンを指定してインストールします。 Dockerコンテナ内 # 最新バージョンのインストールコマンド % yarn add tailwindcss@latest postcss@latest autoprefixer@latest # バージョン指定のインストールコマンド % yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Step2. Config ファイルの作成 以下コマンドを実行して tailwind.config.js postcss.config.js ファイルを生成します。 Dockerコンテナ内 % npx tailwindcss init -p postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } tailwind.config.js module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // ここだけ本番環境で不要スタイルが削除される設定にしておきます（おそらく任意） darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } Step3. グローバル CSS に Tailwind を含める src/index.css /* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; Step4. main ファイルで import する main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import './index.css' // 追記 createApp(App).use(router).mount('#app') ここまでで設定完了です✨ 早速使ってみましょう！ Step5. template で書いてみる とりあえず動いてるのを確認したいので公式の PlayGround の内容コピーします。 views/Sample.vue <template> <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12" > <div class="relative py-3 sm:max-w-xl sm:mx-auto"> <div class=" absolute inset-0 bg-gradient-to-r from-cyan-400 to-sky-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl " ></div> <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20" > <div class="max-w-md mx-auto"> <div> <img src="/img/logo.svg" class="h-7 sm:h-8" /> </div> <div class="divide-y divide-gray-200"> <div class=" py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 " > <p> An advanced online playground for Tailwind CSS, including support for things like: </p> <ul class="list-disc space-y-2"> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2"> Customizing your <code class="text-sm font-bold text-gray-900" >tailwind.config.js</code > file </p> </li> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2"> Extracting classes with <code class="text-sm font-bold text-gray-900">@apply</code> </p> </li> <li class="flex items-start"> <span class="h-6 flex items-center sm:h-7"> <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> </span> <p class="ml-2">Code completion with instant preview</p> </li> </ul> <p> Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online. </p> </div> <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7" > <p>Want to dig deeper into Tailwind?</p> <p> <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700" > Read the docs &rarr; </a> </p> </div> </div> </div> </div> </div> </div> </template> おー！動いてる✨ もっと詳しく知りたい方はチートシートがあるみたいなのでこちらから?‍♂️ Tailwind Cheat Sheet 参考記事 Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS