diff --git a/.prettierignore b/.prettierignore index 3f005b5..d1828aa 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,6 @@ pnpm-lock.yaml -src/styles/globals.css +src/components/ui src/content/ +src/styles/globals.css public/ *.md diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro index c801a2e..a702aa7 100644 --- a/src/components/MemberCard.astro +++ b/src/components/MemberCard.astro @@ -10,6 +10,7 @@ import { import MemberAvatar from '@/components/MemberAvatar'; import type { Member } from '@/types/Member'; import Icon from './Icon.astro'; +import { cn } from '@/lib/utils'; interface Props { items: Member[]; layout?: 'author'; @@ -21,11 +22,19 @@ const { items, layout } = Astro.props; { items.map(member => ( - - + + {layout === 'author' && 'Author: '} {member.name} @@ -49,7 +58,7 @@ const { items, layout } = Astro.props; )} {member.links && ( - +
    {member.links.map(link => (
  • diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 2eb790a..ede85e8 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; +import type { HTMLAttributes } from 'react'; import { cn } from '@/lib/utils'; @@ -24,7 +24,7 @@ const badgeVariants = cva( ); export interface BadgeProps - extends React.HTMLAttributes, + extends HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 81e2e6e..89bcf89 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import { forwardRef, type ButtonHTMLAttributes } from 'react'; import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; @@ -34,12 +34,12 @@ const buttonVariants = cva( ); export interface ButtonProps - extends React.ButtonHTMLAttributes, + extends ButtonHTMLAttributes, VariantProps { asChild?: boolean; } -const Button = React.forwardRef( +const Button = forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button'; return ( diff --git a/src/content/blog/interface-tips.md b/src/content/blog/interface-tips.md new file mode 100644 index 0000000..ee9378e --- /dev/null +++ b/src/content/blog/interface-tips.md @@ -0,0 +1,301 @@ +--- +title: ゲーム開発で例えるinterface +pubDate: '2025-11-24' +description: ゲーム開発で例えるinterface +author: Millin +tags: [Tech, C#] +--- + +こんにちは！ゲームエンジニアのMillinです。 + +今回はinterfaceについてゲーム開発での活用例を交えて解説したいと思います。 + +今回、例題のコードはC#で書きますが、たいていの言語で同様の活用ができるかと思います。 + +## インターフェイスとは + +特定の関数やプロパティを持つことを明示する型です。 + +以下のように記述し、定義したInterface型の変数から関数やプロパティを呼び出すことができます。 + +```cs +interface ITest +{ + int Value { get; } + void Test(); +} + +class Foo : ITest +{ + int value; + public int Value => value; + + public void Test() + { + value = 3; + Console.WriteLine("Hello, World!"); + } +} + +class Program +{ + static void Main(string[] args) + { + ITest test = new Foo(); + //Hello, World!が表示される。 + test.Test(); + //3が表示される。 + Console.WriteLine(test.Value); + } +} +``` + +変数を持つことはできません。(C#ではコンパイルエラーになります。) + +```cs +interface ITest +{ + int test; + void Test(); +} +``` + +interfaceに定義された関数やプロパティがinterfaceを適用したクラスにない場合もコンパイルエラーになります。 + +```cs +interface ITest +{ + void Test(); +} + +//interfaceで定義されているTest()がない +class Foo : ITest +{ +} +``` + +継承と違い複数のインターフェースをクラスに適用することができます。(C++などの多重継承できる言語は除く) + +```cs +interface ITest +{ + void Test(); +} + +interface ITest2 +{ + void Test2(); +} + +class Foo : ITest, ITest2 +{ + public void Test() + { + Console.WriteLine("Hello, World!"); + } + + public void Test2() + { + Console.WriteLine("Hello, World!"); + } +} +``` + +## ゲームでの活用例 + +以下のような仕様を想定します。(この段階ではInterfaceは必要ありません) + +- すべてのクラスはObjectを継承する +- キャラクター・弾があり、弾はキャラクターにダメージを与える。 + +```cs +class Object +{ +} + +class Character : Object +{ + //体力 + int hp; + + public void Damage() + { + hp--; + } +} + +class Bullet : Object +{ + public void Hit(Character character) + { + character.Damage(); + } +} +``` + +シンプルですね。ここで以下の追加仕様があった場合のinterfaceを使用しない場合と使用した場合の違いを比較してみます。 + +- 弾で壊せる箱(BreakableBox)・壊せない箱(Box)がある。 +- 箱は持ち運ぶことができる。 + +### インターフェースを使用しない場合1(Bullet内でキャストして分岐) + +```cs +class Object +{ +} + +class Character : Object +{ + //体力 + int hp; + + public void Damage() + { + hp--; + } +} + +class Bullet : Object +{ + public void Hit(Object obj) + { + if(obj is Character character) + { + character.Damage(); + } + else if( obj is BreakableBox breakableBox) + { + breakableBox.Damage(); + } + } +} + +class BoxBase : Object +{ + public void Carry() + { + //運ぶ処理 + } +} + +class Box : BoxBase +{ +} + +class BreakableBox : BoxBase +{ + public void Damage() + { + //壊れる処理 + } +} +``` + +Bullet内でCharacterとBreakableBoxの二つに依存し、多態性が全く実現できていない状態になります。 + +### インターフェースを使用しない場合2(ObjectにDamage処理を持たせる) + +```cs +class Object +{ + public virtual void Damage() + { + } +} + +class Character : Object +{ + //体力 + int hp; + + public override void Damage() + { + hp--; + } +} + +class Bullet : Object +{ + public void Hit(Object obj) + { + obj.Damage(); + } +} + +class BoxBase : Object +{ + public void Carry() + { + //運ぶ処理 + } +} + +class Box : BoxBase +{ +} + +class BreakableBox : BoxBase +{ + public override void Damage() + { + //壊れる処理 + } +} +``` + +特定のサブクラス（BreakableBox や Character）のための処理が基底に書かれるのは継承関係として正しくないです。 + +### インターフェースを使用した場合 + +```cs +interface IDamageable +{ + void Damage(); +} + +class Object +{ +} + +class Character : Object, IDamageable +{ + //体力 + int hp; + + public void Damage() + { + hp--; + } +} + +class Bullet : Object +{ + public void Hit(IDamageable damageable) + { + damageable.Damage(); + } +} + +class BoxBase : Object +{ + public void Carry() + { + //運ぶ処理 + } +} + +class Box : BoxBase +{ +} + +class BreakableBox : BoxBase, IDamageable +{ + public void Damage() + { + //壊れる処理 + } +} +``` + +多態性や継承関係が適切に保たれます！ diff --git a/src/pages/[author]/rss.xml.js b/src/pages/[author]/rss.xml.js index e37b41c..8300acf 100644 --- a/src/pages/[author]/rss.xml.js +++ b/src/pages/[author]/rss.xml.js @@ -28,6 +28,6 @@ export async function GET(context) { customData: blog.data.customData, link: `/blog/${blog.slug}/`, })), - customData: `ja-jp`, + customData: 'ja-jp', }); }