2023/5/11 に、vue 3.3 がリリースされました。
[https://blog.vuejs.org/posts/vue-3-3#generic-components](https://blog.vuejs.org/posts/vue-3-3#generic-components)

Vue3.3 では、TypeScript 関連の強化や便利な機能などが追加されています。
従来よりも型宣言がしやすく、かつ vue 自体も書きやすくなっているため、開発体験の向上が図れると感じています。

今回の記事では、新機能についての内容と、その中で便利だと感じた点を紹介していきます。

以下は新機能の一覧です。

- `<script setup>` + TypeScript DX Improvements（script setup 構文における TypeScript 体験の向上）

  - Imported and Complex Types Support in Macros（外部インポートされた複合の型サポート）
  - Generic Components（コンポーネントでのジェネリック型パラメータのサポート）
  - More Ergonomic defineEmits（人間工学的な宣言）
  - Typed Slots with defineSlots（型付き slot の宣言）

- Experimental Features（実験的機能）

  - Reactive Props Destructure（props の応答性維持とデフォルト宣言の簡易化）
  - defineModel（defineModel を用いた v-model 宣言の簡易化）

- Other Notable Features（その他の注目すべき機能）
  - defineOptions（コンポーネントオプション の記述簡易化）
  - Better Getter Support with toRef and toValue（toRef, toValue: getter のサポート）
  - JSX Import Source Support（JSX の Import Source のサポート）

### `<script setup>` + TypeScript DX Improvements（script setup 構文における TypeScript 体験の向上）

大きな変更点としては、TypeScript のサポートがより行われた点となります。

それでは見ていきましょう。

#### Imported and Complex Types Support in Macros（外部インポートされた複合の型サポート）

以前は、defineProps および defineEmits の型パラメーターの位置で使用される型はローカル型に限定されており、型リテラルとインターフェースのみがサポートされていました。

以下のようにvueファイル内に直接Interface定義しなければなりませんでした。

```js
<script setup lang="ts">
interface Props {
  name: string
  kana: string
  email: string
}

defineProps<Props>()
</script>
```

この制限は 3.3 で解決されました。コンパイラは外部インポートされた型を解決できるようになり、限られた複合型のセットをサポートするようになりました。

便利になった点としては、以前のようにローカル型で型定義しなくても良くなったので、共通のインターフェースを別のコンポーネントや他tsファイルから使用できるようになりました。

型定義に関する事は、ts ファイル側で管理できるのも良い点です。


```js
<script setup lang="ts">
import type { Props } from './foo'

// 他tsファイルからimportしたinterface + nicknameの型の追加
defineProps<Props & { nickname?: string }>()
</script>
```

#### Generic Components（コンポーネントでのジェネリック型パラメータのサポート）

`<script setup>` を使用するコンポーネントは、ジェネリック属性を介してジェネリック型パラメータを受け入れることができるようになりました。

ここで従来の例を見てみましょう。

以下の場合を想定します。

type Item を継承したItem1やItem2を、propsの値として親コンポーネントから子コンポーネントへ渡せるようにしたい

これを実現したい場合、以下の記載方法となります。

```js
<script setup lang="ts">
import type { Item1, Item2 } from './types'
interface Props {
  list: Array<Item1 | Item2>
}

defineProps<Props>()
</script>
```

従来の例だと、Propsのlistを定義する際、ジェネリック型を使って縛ることが出来ないため、

type Item1, type Item2 をユニオン型で定義する必要があり、Itemを継承したtypeの数分の型定義が必要となってしまいます。


しかし、今回のアップデートにより、この問題は解決できます。

以下は、ジェネリック型にユニオン型の制約や、インターフェイス継承の制約をつける場合の例となります。

```js
<script setup lang="ts" generic="U extends Item">
import type { Item } from './types'
defineProps<{
  list: U[]
}>()
</script>
```

ジェネリック型で定義できると component の中身がスッキリする事が一目見てわかると思います。

この例から、listについて、ジェネリック型を使って縛ることが出来るので、自らtype Item1、type Item2それぞれのユニオン型を作る手間がなくなったり、可読性が増したりします。

#### defineEmits（人間工学的な宣言）

以前の defineEmits の構文です。

```js
const emit = defineEmits<{
  (e: 'foo', id: number): void
  (e: 'bar', name: string, ...rest: any[]): void
}>()
```

少し冗長で書きにくかったので、Vue3.3 では、より人間工学に基づいた書きやすい構文が導入されました。

以前の構文ではe: にemitのイベント名を記載する形でしたが、イベント名の数だけe: を記載する事になるため、少し冗長な記載方法になっていました。

Vue3.3では、emitのイベント名をキーとした以下の構文で記載する事ができるようになったため、以前の冗長さは解消されました。

```js
const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()
```

#### Typed Slots with defineSlots（型付き slot の宣言）

新しい defineSlots マクロを使用して、スロットの型を宣言できます。

これまでは、スロットで受け取る引数に型を宣言できなかったため、より型システムの恩恵を受ける事ができるようになりました。

```js
<script setup lang="ts">
defineSlots<{
  default?: (props: { msg: string }) => any
  item?: (props: { id: number }) => any
}>()
</script>
```

### Experimental Features（実験的機能）

まだ実験的な機能ではありますが、今後の安定版が期待できる機能と感じていますので紹介します。

#### Reactive Props Destructure（props の応答性維持とデフォルト宣言の簡易化）
Vue3.3 以前では、propsのreactive値の変化の検知やデフォルト値宣言の際は、以下のような記述が必要でした。

```js
<script setup>
import { watchEffect } from 'vue'

interface Props {
  msg: string
}

// デフォルト値を指定するためには、withDefaultsを使用する必要がある
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
})

watchEffect(() => {
  // 親コンポーネントから子コンポーネントに渡したreactive値の変化を検知するためには、propsオブジェクトを介して値にアクセスする必要がある
  console.log(`msg is: ${props.msg}`)
```


Vue3.3 では、以下の様にシンプルな形で記述できるようになります。

```js
<script setup>
import { watchEffect } from 'vue'

// withDefaultsを使用せずともデフォルト値の指定が可能となった
const { msg = 'hello' } = defineProps(['msg'])

watchEffect(() => {
  // propsオブジェクトを介さずとも、`msg` と記述するだけで値の変化に追従できるようになった
  console.log(`msg is: ${msg}`)
})
</script>
```

利用には以下の設定が必要となります。

```js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: true
      }
    })
  ]
}
```

#### defineModel（v-model 宣言の簡易化）

従来は v-model との双方向バインディングを行うためには、

従来は、親コンポーネントからreactive値を子コンポーネントに渡して、状態を変化させるためには、props と emit を用いて表現する必要がありました。

```js
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
console.log(props.modelValue)

function onInput(e) {
  emit('update:modelValue', e.target.value)
}
</script>

<template>
  <input :value="modelValue" @input="onInput" />
</template>
```

Vue3.3 では、新しい defineModel を使用する事で、シンプルな記述にする事ができるため、便利な機能でしょう。

```js
<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

<template>
  <input v-model="modelValue" />
</template>

```

### まとめ

ここまで新機能についての内容説明と、便利だと感じた点を紹介してきましたが、

特に、`<script setup>` + TypeScript DX Improvements（script setup 構文における TypeScript 体験の向上）
の機能追加項目に関してはメリットが大きく、開発体験が大きく変わると感じています。

皆さんも、是非とも開発に取り入れてみましょう！




Vue3.3 新機能リリース!便利になった機能を紹介

### LaravelのCollectionとは

LaravelのCollectionは、PHPの配列をより便利に使うためのラッパークラスです。

[前回の記事](https://implist.dev/entries/laravel-collection-use)ではCollectionの基本、toArray、map、each、filter、whereメソッドをご紹介しました。

Collectionのメソッドはまだたくさんありますが、その知識を習得すればするほど、実務において非常に役立つと感じられるでしょう。

この記事では新たに、以下のメソッドを学んでいきましょう。

- sort
- sortBy
- count
- groupBy
- pluck

### sort

`sort`メソッドは、要素を並べ替えるために使います。

例えば、ばらばらの大きさで並んでいる数値の配列を、昇順（小さい順）に並べ替えるときに役立ちます。

[前回の記事](https://implist.dev/entries/laravel-collection-use)でお話ししたように、このメソッドも元のCollectionに変更を加えずに、新しいCollectionを返します。

```php
$numbers = collect([3, 1, 5, 2, 4]);

$asc = $numbers->sort();

/*
$asc->toArray()：
    [
        1 => 1,
        3 => 2,
        0 => 3,
        4 => 4,
        2 => 5,
    ]
*/
```

降順（大きい順）に並べ替えたいときは`sortDesc`メソッドを使います。

```php
$desc = $numbers->sortDesc();

/*
$desc->toArray()：
    [
        2 => 5,
        4 => 4,
        0 => 3,
        3 => 2,
        1 => 1,
    ]
*/
```

注意していただきたいのは、確かに並べ替えられたものの、キーは元のままである点です。

連番の配列がほしいときはどうすればいいのでしょうか。

#### キーを連番にリセットするvaluesメソッド

順番は変わったのにキーが元のままということは、Collectionではよくあることです。

こういうときは、キーを連番にリセットする`values`メソッドの出番です。

`sort`に続けて使ってみましょう。

```php
$numbers = collect([3, 1, 5, 2, 4]);

$sorted = $numbers->sort()->values();

/*
$sorted->toArray()：
    [
      0 => 1,
      1 => 2,
      2 => 3,
      3 => 4,
      4 => 5,
    ]
*/
```

#### sortにクロージャを渡す

`sort`で並べ変えることができるのは数値だけではありません。

`sort`は文字列も並べ替えてくれます。

```php
$events = collect([
    '11/23 勤労感謝の日',
    '5/5 こどもの日',
    '1/1 元日',
    '11/3 文化の日',
]);

$sorted = $events->sort()->values();

/*
$sorted->toArray()：
    [
        0 => "1/1 元日",
        1 => "11/23 勤労感謝の日",
        2 => "11/3 文化の日",
        3 => "5/5 こどもの日",
    ]
*/
```

並べ替えられましたが違和感があります。

機械的な文字の順番としてはこの並びが正しいのですが、文字列の先頭が日付であるという人間の意図が反映されていません。

こういうときは`sort`にクロージャを渡すことで、並び替えの条件を具体的に指定することができます。

```php
// 例えば'1/1 元日'を'01/01 元日'に変換する
function padDate($str) {
    $exploded = explode(' ', $str);  // ['1/1', '元日']
    $name = $exploded[1];

    $exploded2 = explode('/', $exploded[0]);  // ['1', '1']
    $mon = Str::padLeft($exploded2[0], 2, '0');
    $day = Str::padLeft($exploded2[1], 2, '0');

    return "$mon/$day $name";
}

$sorted2 = $events->sort(function($a, $b) {
    return strcmp(padDate($a), padDate($b));
})->values();

/*
$sorted2->toArray()：
    [
        0 => "1/1 元日",
        1 => "5/5 こどもの日",
        2 => "11/3 文化の日",
        3 => "11/23 勤労感謝の日",
    ]
*/
```

### sortBy

key=>value形式のCollectionを昇順に並べ替えたいときは、`sortBy`メソッドが便利です。

降順に並べ替える`sortByDesc`メソッドもあります。

```php
$users = collect([
    ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
    ['name' => '波平', 'gender' => 'male', 'age' => 54],
    ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
    ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
]);

$sorted = $users -> sortBy('age');

/* 
$sorted->toArray()：
    [
        ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
        ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
        ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
        ['name' => '波平', 'gender' => 'male', 'age' => 54],
     ]
*/
```

### count

`count`メソッドは、Collection内の要素の数を返します。

```php
$items = collect(['apple', 'banana', 'orange']);

$count = $items->count(); // $countには3が代入される
```

### groupBy

`groupBy`メソッドは、key=>value形式のCollectionの要素を指定したキーに基づいてグループ化します。

例えば、ユーザーを男女に分けたいときに便利です。

```php
$users = collect([
    ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
    ['name' => '波平', 'gender' => 'male', 'age' => 54],
    ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
    ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
]);

$grouped = $users->groupBy('gender');

/* 
$grouped->toArray()：
    [
        'female'=> [
            ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
            ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
        ],
        'male' => [
            ['name' => '波平', 'gender' => 'male', 'age' => 54],
            ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
        ]
    ]
*/
```

### pluck

`pluck`メソッドも、key=>value形式のCollectionに対して使うメソッドで、特定のkeyを持つ値だけを抽出してCollectionを作ってくれます。

例えば、ユーザー情報が手元にあるけど、そこからユーザー名だけの配列を作りたいというときに便利です。

```php
$users = collect([
    ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
    ['name' => '波平', 'gender' => 'male', 'age' => 54],
    ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
    ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
]);

$names = $users->pluck('name');
/*
$names->toArray()：
    ['サザエ', '波平', 'フネ', 'マスオ']
*/
```

### 組み合わせて使ってみよう

Collectionのメソッドは単発で使うだけでも、生の配列を処理するよりも簡潔に書けますが、組み合わせて使うとき、特にその簡潔さが際立ちます。

例えば、ユーザーの年齢の昇順の配列が欲しいとき、このように書くことができます。

```php
$users
    ->pluck('age')
    ->sort()
    ->values()
    ->toArray();

/*
    [24, 28, 50, 54]
*/
```

次に、ユーザーを若い順に並び替え、男女別に分けてみましょう。

```php
$names = $users
    ->sortBy('age')
    ->groupBy('gender')
    ->toArray();

/*
    [
        'female'=> [
            ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
            ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
        ],
        'male' => [
            ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
            ['name' => '波平', 'gender' => 'male', 'age' => 54],
        ]
    ]
*/
```

いずれの場合も、生の配列でやろうと思うと、書くのも読むのも億劫なコードになってしまいます。

Collectionを上手に使うことで、きれいで保守性の高いコードを書くことを心がけましょう。


Laravel Collection 並び替えやグループ化 sort/groupby/pluckなど

## 【Laravel】Collectionの使い方とよく使うメソッド

### LaravelのCollectionとは

LaravelのCollectionは、PHPの配列をより便利に使うためのラッパークラスです。

PHPの配列だけでやると複雑になってしまうことを、メソッドを通して簡潔に行えます。

#### Collectionを生成する方法

`collect()`に配列を渡すことで、`Illuminate\Support\Collection`インスタンスが生成されます。

```php
$collection = collect([1, 2, 3, 4, 5]);
```

また、DBファサードやEloquentのクエリビルダーの結果がCollection（またはその拡張）です。

#### Collectionは「イミュータブル」

Collectionを使う上で注意点があります。

Collectionの多くのメソッドは、呼び出し元の配列に変更を加えず、新しいCollectionを返します（この特性をイミュータブルと表現します）

つまり、メソッドの返す値を変数で受け取らないと、変更が反映されません。

```php
$collection = collect([1, 2, 3, 4, 5]);

// mapメソッドで各要素に2をかける
$multiplied = $collection->map(function ($item) {
    return $item * 2;
});

// $collectionの中身は[1, 2, 3, 4, 5]のまま
// $multipliedの中身は[2, 4, 6, 8, 10]
```

### よく使うメソッド

Collectionには様々なメソッドがありますが、よく使う以下のメソッドの使い方を紹介します。

- toArray
- map
- each
- filter
- where

### toArray

Collectionは配列を内部に保持するラッパークラスであり、配列そのものではありません。

`toArray`は配列そのものが欲しいときに使うCollectionのメソッドです。

```php
$collection = collect([1, 2, 3]);

$arr = $collection->toArray();  // [1, 2, 3]
```

なお、`all`メソッドもCollectionの中身を配列として返してくれますが、`toArray`と違いネストされたCollectionは配列になりません。

### map

`map`メソッドは、各要素にコールバック関数に書いた処理を加えて、値に変更が加わった新しいCollectionを生成します。

そのまま値を返すと変更が加わらないので、条件分岐などを使って柔軟な対応ができます。

例えば、Collection内の数値を2倍にした新しいCollectionを生成する場合は以下のようになります。

```php
$collection = collect([1, 2, 3, 4, 5]);

$multiplied = $collection->map(function ($item, $key) {
    return $item * 2;
});

// $multipliedは[2, 4, 6, 8, 10]を持つ新しいCollection
```

### each

`each`メソッドは、各要素をクロージャに渡して反復処理します。

`map`メソッドに似ていますが、新しいCollectionは返さず、また元の値にも影響を与えません。

```php
$collection = collect([1, 2, 3, 4, 5]);

$collection->each(function ($item, $key) {
    echo "{$item}, ";
});

// 「1, 2, 3, 4, 5, 」がechoされる
// $collectionの中の配列は[1, 2, 3, 4, 5]のまま
```

### filter

`filter`メソッドは、条件を満たす要素を選び出して、新しいCollectionを返します。

条件はコールバック関数で指定します。

例えば、偶数の数値だけを含む新しいCollectionを作成する場合は以下のようになります。

```php
$collection = collect([1, 2, 3, 4, 5]);

$evenNumbers = $collection->filter(function ($item) {
    return $item % 2 === 0;
});

// $evenNumbersは[1 => 2, 3 => 4]を持つ新しいCollection
```

ここで注目してほしいのは、filterで抽出された要素のインデックスまでそのままである点です。

連番のCollectionを得るには`values`メソッドを使います。

```php
$evenNumbers2 = $evenNumbers->values();

/*
    $evenNumbers2は[0 => 2, 1 => 4]を持つ新しいCollection
*/
```

### where

`where`メソッドは、key=>value形式のCollectionから、条件を満たす要素だけを持つ新しいCollectionを返します。

以下の例が、key=>value形式のCollectionです。

クエリビルダーの結果はこのようなCollectionです。

```php
$users = collect([
    ['name' => 'サザエ', 'gender' => 'female', 'age' => 24],
    ['name' => '波平', 'gender' => 'male', 'age' => 54],
    ['name' => 'フネ', 'gender' => 'female', 'age' => 50],
    ['name' => 'マスオ', 'gender' => 'male', 'age' => 28],
]);
```

例えば、性別がfemaleのユーザーだけを含む新しいCollectionを作成する場合は以下のようになります。

```php
$femaleUsers = $users->where('gender', 'female');

/*
$femaleUsers->toArray()：
    [
        0 => ['name' => 'サザエ', gender='female', 'age' => 24],
        2 => ['name' => 'フネ', gender='female', 'age' => 50],
    ]
*/
```

オプションとして、 `!==`や`<`などのオペレーターを指定することもできます。

例えば、年齢が30歳未満のユーザーだけを含む新しいCollectionを作成する場合は以下のようになります。

```php
$youngUsers = $users->where('age', '<', '30');

/*
$youngUsers->toArray()：
    [
        0 => ['name' => 'サザエ', gender='female', 'age' => 24],
        3 => ['name' => 'マスオ', gender='male', 'age' => 28],
    ]
*/
```

なお、ここでも`filter`メソッドと同様にインデックスがそのままですが、`values`メソッドを使って連番にできます。

```php
$youngUsers = $users->where('age', '<', '30')->values();
```

#### filterとwhereの違い

filterもwhereも条件を満たす要素を抽出して新しいCollectionを返すという点でよく似ていますが、使いどころが異なります。

違いを押さえておきましょう。

* filterはクロージャーを渡せるので、より複雑な処理を書くことができる。
* filterはkey=>value形式でなくても対応できる。
* whereはkey=>value形式に限定されるが、その形式であれば記述量が少なくて済む。

### メソッドを組み合わせて宣言的に書こう

Collectionはメソッドを続けて呼び、連続して操作を行うことができます。

これをメソッドチェーンといいます。

例えば、年齢が30歳未満の女性ユーザーだけを含む新しいCollectionを作成する場合は以下のようになります。

```php
$selectedUsers = $users
                    ->where('gender', 'female')
                    ->where('age', '<', 30)
                    ->values();
/*
$selectedUser->toArray()：
    [
        ['name' => 'サザエ', gender='female', 'age' => 24],
    ]
*/
```

このように、Collectionのメソッドを有効に組み合わせて、宣言的なコードを書くことを意識しましょう。

宣言的とは、何がしたいかが一目でわかるような書き方のことです。

上記の例では「genderがfemaleでageが30未満のuserがほしい」ことを簡潔に書いています。


PHP Laravel Collectionの使い方！each/map/filter/whereを使いこなす

**Reactのバージョン: 18.2.0**

### useStateとは何か？

#### useStateの概要
React Hooksの1つであり、関数コンポーネント内で状態(state)を管理する機能です。
useStateは以下のような形で示されます。

`const [変数, 関数] = useState(初期値) `

#### stateとレンダリング
Reactではコンポーネントが呼び出されることをレンダリングと言います。
何らかの入力により変数(state)が変更されるときに関数が呼び出されます。

useStateでは以下のプロセスを経て画面表示を行っています。

1. stateの変更、更新
2. stateに紐づく関数コンポーネントの呼び出し
3. 変更の前後での差分を出す
4. 差分をDOMに反映
5. 画面表示

次の章で具体的な使い方を説明します。

### useStateの使い方

#### 変数
ここではまず変数の取り扱いについてサンプルコードを用いて解説します。

##### カウンターの実装

カウンターの実装では以下のような機能を実装します。

- 初期値に対して+1するカウントアップ
- 初期値に対して-1するカウントダウン
- 初期値に戻すリセット機能

以下にサンプルコードを記載します。

```javascript
import React, {useState} from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   <>
     <h1>Counter App</h1>
     <p>{count}</p>
     <button onClick={() => setCount((prevCount) => prevCount + 1)}>count up!</button>
     <button onClick={() => setCount((prevCount) => prevCount - 1)}>count down!</button>
     <button onClick={() => setCount(0)}>reset!!!</button>
   </>
 );
}

export default Counter;
```

このサンプルコードでは変数count(初期値0)および関数コンポーネントsetCountを定義しています。

buttonタグでカウントアップ/カウントダウン/リセットの各ボタンを作成し、それぞれのボタンがクリックされた際にonClickイベントでsetCountをレンダリングし変数countの値の変化を表示しています。
実際には以下のように変化しています。

##### カウントアップ

<ボタンクリック前>
![image9](//images.ctfassets.net/2kcyx6q7ww5g/5FhjD6AUNrpIgC1gc5ze11/fbb44493a3b0f75de8a9647615c9f21b/image9.png)

<ボタンクリック後>
![image1](//images.ctfassets.net/2kcyx6q7ww5g/5LOvWjzYCUmvrTo7MMa9bg/2bf2baab5e98829841a60d085d15d052/image1.png)

##### カウントダウン
![image15](//images.ctfassets.net/2kcyx6q7ww5g/2Iri9GT3GdDip6OspX3NLY/3e58c3ec9657e63bf0861472f9873d77/image15.png)

##### リセット
![image10](//images.ctfassets.net/2kcyx6q7ww5g/28hjwvL3F1QVpTJPBF0IA/abeb153106fe4ee87fa6f2ff730f9e8e/image10.png)

#### 入力値に更新する
ここでは<input>タグで入力した内容に書き換える機能を実装しています。

以下にサンプルコードを記載します。
```javascript
import React, {useState} from 'react';

function Edit() {
 const [text, setText] = useState("");
 const [result, setResult] = useState("sample");

 return (
   <>
     <h1>Text Edit App</h1>
     <input type='text' value={text} onChange={(e) => setText(e.target.value)} />
     <button onClick={()=>setResult(text)}>更新</button>
     <button onClick={()=>setResult("sample")}>リセット</button>
     <p>{result}</p>
   </>
 );
}

export default Edit;
```

このサンプルコードではまずinputタグを用意し、文字列等を入力できるようにします。
inputタグ内のonChange関数によりsetTextがレンダリングされ入力された値を保持します。
その後更新ボタンを押すことでsetResultがレンダリングされ、inputに入力された文字列に書き換えられます。

実際には以下のような画面になります。

##### 更新
<入力前>
![image5](//images.ctfassets.net/2kcyx6q7ww5g/5OdU0w0Pxq2DlRZLiQXntb/81c6ba0f56c66b768244be936891a458/image5.png)

<入力し更新>
![image12](//images.ctfassets.net/2kcyx6q7ww5g/WYOQXRISTQGCmq87U040l/0d02f269d62bc9f1850c3be47b0a38fd/image12.png)

##### リセット
![image8](//images.ctfassets.net/2kcyx6q7ww5g/3XTrPcjIj4HBPr0gfJ3tBm/2e0738262dfac0e075d7fe3912e06f07/image8.png)

#### 配列
配列を取り扱う上で以下の機能を実装しました。

- inputタグで入力した値を配列に追加
- 配列の特定の値を削除

以下にサンプルコードを記載します。

```javascript
import React, {useState} from 'react';

function Array() {
   const [num, setNum] = useState();
   const [result, setResult] = useState([]);

    return (
       <>
       <h1>Array Edit App</h1>

       <input type="number" value={num} onChange={(e) => setNum(e.target.value)} />
       <button onClick={()=>setResult([...result, num])}>追加</button>
       <div>
         <p>array</p>
         <p>{ result }</p>

         <h3>Array Edit</h3>
         <ul>
           {result.map((num, index) => (
             <li>
               { num }
               <button onClick={() => setResult(result.filter((n) => (n != num)))}>削除</button>
             </li>
           ))}
         </ul>
       </div>
       </>
   );
}

export default Array;
```

このサンプルコードでは配列への追加および削除を行っています。

##### 配列への追加
inputタグで入力された値をonChangeによりレンダリングされたsetNumに保持します。

その後onClickを押すことでせtResultがレンダリングされ配列に追加されます。

`[...result, num]`では今までの配列(result)の末尾に入力値(num)を追加するということです。
画面表示時にはmap関数を使い配列を一つずつ表示します。

##### 削除
削除ボタンをクリックするとsetResultがレンダリングされ配列resultの中から該当する要素をフィルタリングします。
削除ボタンはmapで取り出した各要素ごとに設置されています、
そのため押した削除ボタンに該当する要素以外をresultに保存するという処理を行っています。
実際には以下のような画面になります。

##### 追加
<追加前>
![image14](//images.ctfassets.net/2kcyx6q7ww5g/2TnoipfXQcLpUaevzJ6bjl/3ab372004efb7d87c1dcf5cfe51e16ac/image14.png)

<入力し追加>
![image7](//images.ctfassets.net/2kcyx6q7ww5g/2Xz0p7v5Ldddsen7FflMCd/59ac9688be3b9168e1b0d3a6d3f5a84e/image7.png)

![image11](//images.ctfassets.net/2kcyx6q7ww5g/3QS6Az58Aed6qAHMVD5xIW/1094a612c7a8d2994a91776bd11ec279/image11.png)

##### 削除
<削除ボタンを押し削除>
![image4](//images.ctfassets.net/2kcyx6q7ww5g/5SuQDxI9n0ioeXCrxao7tL/eb0b917cb53cd26757b7e210864fd1e8/image4.png)

#### オブジェクト
オブジェクトを取り扱う上で以下の機能を実装しました。

- DBのような形でkeyごとのinputを作成し、入力値を追加
- 削除の実装

以下にサンプルコードを記載します。

```javascript
import React, {useState} from 'react';

function Object() {
   const [name, setName] = useState("");
   const [age, setAge] = useState();
   const [users, setUsers] = useState([]);

   return (
       <>
       <h1>Object Edit</h1>

       name : <input value={ name } onChange={(e) => setName(e.target.value)} />
       age : <input type="number" value={ age } onChange={(e) => setAge(e.target.value)} />
       <button onClick={() => setUsers([...users, { name: name, age: age}])}>追加</button>

       <ul>
         { users.map((user) => (
           <li>
             名前 : { user.name }, 年齢 : { user.age }
             <button id="obj_delete_btn" onClick={() => setUsers(users.filter((n) => (n != user)))}>削除</button>
           </li>
         ))}
       </ul>
       </>
   );
}

export default Object;
```

このサンプルコードではusersオブジェクトへの追加、削除を行っています。

追加および削除のやり方は配列と同じですがオブジェクトでは追加時のinputタグをkeyに合わせて用意する必要があります。

また表示する際には`{ user.name }`のように「オブジェクト名.key」とする必要があります。
実際には以下のような画面になります。

##### 追加
<初期値>
![image13](//images.ctfassets.net/2kcyx6q7ww5g/10w9UY4vIIOZ3t0btvAg2V/8212fc7ac87f8fe06ebc29bc8fb814a7/image13.png)

<入力し追加>
![image6](//images.ctfassets.net/2kcyx6q7ww5g/AWKZIXblXWVNujvsYD2I7/31d8f3fcee1a20d2f9941f1366d9c40b/image6.png)

![image3](//images.ctfassets.net/2kcyx6q7ww5g/5ThT04CjqGVDOZOoEHoqSt/f60e7275082754071c3021d9cdbb8d0a/image3.png)

##### 削除
![image2](//images.ctfassets.net/2kcyx6q7ww5g/2YCtrXsjXKW3UQTxkPgTwp/ca62d4efa47604ec51fe5818ceb8bcd9/image2.png)


React入門 useStateの使い方　変数・配列・オブジェクトを操作してみる

本記事では、Figmaの超便利機能「コンポーネント」の使い方について、解説します！

複数のページを持つWEBサイトを製作する場合、コンポーネントを使いこなすことで、作業時間を大幅に短縮することができるでしょう。

「コンポーネントって何？」という初心者の方が、コンポーネントを使いこなせるようになることを目標に解説していきますので、手を動かしながら一緒に学んでいきましょう！

- コンポーネントとは？
- コンポーネントの使い方
  - コンポーネントの解除
  - コンポーネントの画像差し替え
  - コンポーネントのショーカット
- バリアントの使い方

### Figma コンポーネントとは
__コンポーネントとは、繰り返し出てくる要素をまとめて、ひとつの要素として定義したもののことです。__

コンポーネント化しておくと便利な要素として、例えば以下のようなものがあります。

- ヘッダー＆フッター
- 固定化した記事デザイン
- デザイン化された見出し
- ボタン

WEBサイトに複数のページがある場合、これらは共通の要素として繰り返し使われます。
![コンポーネントのイメージ](//images.ctfassets.net/2kcyx6q7ww5g/12BWT3tS4tFAmoxPH5EbmY/596df51bf33256c90840cd4b235472af/_______________________________________.png)

もちろんコピー&ペーストで同じデザインを作ることも可能です…が、コンポーネントが本領を発揮するのは、繰り返し使われるデザインにまとめて変更を加えたいというときです。

コンポーネントは、「メインコンポーネント」とそのコピーである「インスタンス」がありますが、
メインコンポーネントに変更を加えると、インスタンスにもその変更が適用されるのです。
（詳しいやり方は、次の「コンポーネントの使い方」で解説します）
![コンポーネントのイメージ2](//images.ctfassets.net/2kcyx6q7ww5g/4uKLSOjcyP0eZ11We0BZ5c/53311183662d0f00f45b41b8bce065c4/__________________________________________2.png)

このように、要素をコンポーネント化しておくことで、複数ページにまたがる変更を一気に行うことができるのです。

### Figma コンポーネントの使い方
ではさっそく、要素を「コンポーネント化」し、その「コンポーネント化した要素」を使ってみましょう。

今回は、ヘッダーを例にとって見てみます。

1. メインコンポーネント（コピー元つまり”親”）となる要素を選択
2. 上記要素のコンポーネント化
3. インスタンス（メインコンポーネントのコピー）の呼び出し

複数の要素を選択するときは、その要素を含む範囲をドラッグするか、「レイヤーパネル」で「shiftキー」を押しながら要素を選択していきます。
![複数要素の選択](//images.ctfassets.net/2kcyx6q7ww5g/74Ij20fCEAe3LHvmDA13Kw/779e7ad90b78f8a0b12eee17a56676d8/_____________________.png)

要素を選択したら、ツールバー（画面上）より「コンポーネントの作成」アイコンをクリックします。
![コンポーネント化](//images.ctfassets.net/2kcyx6q7ww5g/suEsdn4k9SSbzyESMjnwV/fb4f62740092a4d382c3b336a7288b10/___________________________.png)

コンポーネント化した要素は、画面左の「アセット（レイヤーの隣）」に保管されています。ここからドラッグ＆ドロップで、コンポーネント化した要素を呼び出すことができます。
![インスタンスを生成](//images.ctfassets.net/2kcyx6q7ww5g/2zahJlrAHPhsAXIaQPNw8N/7ccb690401dec198d7f132d28a6408b1/___________________________.png)

メインコンポーネントとインスタンスは、レイヤーパネルでの表示マークで見分けることができます。

なお、コンポーネント化された要素が選択されている場合、画面右の「デザイン」タブに「コンポーネント」の項目が現れますので、ここから各コンポーネントに名前をつけることができます。
![インスタンスの生成](//images.ctfassets.net/2kcyx6q7ww5g/7DeoktJD5kzK74Uo4pxE8t/eef59b0f846423d97b5d13443b967b24/___________________________.png)

では、ここでメインコンポーネントについて、何らかのスタイル（背景色など）を変更してみましょう。
![コンポーネントを使ったスタイル変更](//images.ctfassets.net/2kcyx6q7ww5g/5hUFOUplxi37ehaTzm9jO0/8d160bbe2e9c32e1a753e45ebdc571f2/______________________________________________________.png)

インスタンスのスタイルも同じように変更されましたね！インスタンスが複数個ある場合も、全て同時に新たなスタイルが適用されます。

__もし、作業中にメインコンポーネントに移動したくなった場合は、「デザイン」タブから、「メインコンポーネントに移動」のアイコンをクリックすればOKです。__
![メインコンポーネントに移動](//images.ctfassets.net/2kcyx6q7ww5g/3Ggkda8MffY6J0dnrhzZIP/1a8c9f5be968d2bb73f29f265a51c7d6/__________________________________________.png)

#### Figma コンポーネントの解除
コンポーネント解除するには、解除したいインスタンスを選択し、右クリックして「インスタンスの切り離し」をクリックします。

これで選択したインスタンスのみを切り離すことができます。
![インスタンスの切り離し](//images.ctfassets.net/2kcyx6q7ww5g/7zfFTLIo2xB9XrN8EwKKzG/a236010fb2347c053622ebc6a8c7e68b/_________________________________.png)

なお、この「切り離し」は、メインコンポーネントに対しては行えません（「切り離し」という選択肢が現れません）。

__コンポーネントのすべてを解除したい場合は、「インスタンス」をすべて切り離した後、メインコンポーネントを削除し、「元インスタンス（切り離し後は「フレームとその要素」）」のひとつからコピー&ペーストしましょう。__

なお、インスタンスを切り離さずにメインコンポーネントを削除した場合は、インスタンスはそのまま残ります。

もしもメインコンポーネントを誤って削除してしまった場合は、「コンポーネントの復元」ボタン（インスタンスをクリックして「デザイン」タブへ）から復元が可能です。
![インスタンスの復元](//images.ctfassets.net/2kcyx6q7ww5g/4renU9VtgdF6MnHgR3cp4p/08b8eb64005b37f19494d0289d8df4c7/___________________________.png)

#### Figma コンポーネントの画像差し替え
画像も含めてコンポーネント化した場合、当然、最初はどのインスタンスも同じ画像が挿入されています。

（メインコンポーネントをいじると全てのインスタンスに変更が反映されますが）、ひとつひとつのインスタンスに個別に変更を加えた場合には、その変更が他に影響することはありません。

__よって、インスタンスへの画像の差し替えは、「通常の画像の差し替え」と全く同じ方法で行うことができます。__

参考：[『Figma画像配置・トリミング・色調整・書き出しをマスター』](https://implist.dev/entries/figma-image-arrangement-trimming-color-tone-adjustment-and-export)

![コンポーネント画像の差し替え](//images.ctfassets.net/2kcyx6q7ww5g/6rc1FVIkgXB0umctKzebr4/fb4b64670a126b8bcbd92814a7b44d3d/_____________________________________________.png)

もちろん本文も、各インスタンス毎に、後から文章を変更することができます（テキストをダブルクリックすると編集モードになります）。

デザインをするときは、上記画像のように、メインコンポーネント専用のフレーム（またはメインコンポーネントだけを集めたフレーム）を用意しておくとようでしょう。そうすれば、差し替えの際に、誤ってメインコンポーネントをいじってしまうことを防げます。

#### Figma コンポーネントのショーカット
「コンポーネントの作成」及び、「インスタンスの切り離し」は、以下のようにショートカットキーを用いて行うこともできます。

- コンポーネントの作成は、「Command + Option + K」
- インスタンスの切り離しは、「Command + Option + B」

### バリアントの使い方
Figmaでは、「バリアント（variants≒バリエーション）」という機能を使うことで、「あるコンポーネントのバリエーション」を一括管理することができます。例えば、以下のようなものがあります。

- 「通常」「ホバー時」「クリック時」のボタン色のバリエーション
- 「デスクトップ」「タブレット」「モバイル」におけるヘッダー表示項目のバリエーション

では、例として色のバリエーションを含むボタンを作ってみましょう。

1. ボタンデザインをコンポーネント化する
　（バリアントは「コンポーネントのグループ」なので、まず元の要素をコンポーネント化します）
2. 「バリアントの追加」をクリック
![バリアントの追加](//images.ctfassets.net/2kcyx6q7ww5g/1S01LXBHvhCQaxgBsjetj4/2eb800e3b7dc9f8d68224fa78e40385d/___________________________.png)

各ボタンのスタイルにバリエーションを加えます。スタイルは通常の方法でデザインタブから変更することができます（バリエーションを含む３つのボタンをまとめてメインコンポーネントという扱いです）。
![バリアントへのスタイルの追加](//images.ctfassets.net/2kcyx6q7ww5g/1pqv03WMOsLY1yfYfKZHI0/b9964b2095f701c49d3aad6bed72face/_____________________________________________.png)

バリアント化されたコンポーネントを使う場合も、「アセット」からドラッグ＆ドロップでOKです。
![バリアント化されたインスタンスの追加](//images.ctfassets.net/2kcyx6q7ww5g/gvfW4HyJYTLHMkRiJhtj9/73f87421e44f6b344c94f2403e0f36c1/_________________________________________________________.png)
すると、「デザイン」タブからバリアントの選択ができるようになるので（まだそれぞれのバリアントがデフォルト名ですが）、色違いのボタンに入れ替えることができます。

#### バリアントの管理
先程までは、コンポーネントやプロパティの名前がデフォルトのままでしたので、少々分かりづらかったですね。そこで、バリアントをプパティ名で整理してきましょう。

まずメインコンポーネント（下記の例では３つのバリアントを含む）に名前を付けます。

次に、「デザイン」タブの「プロパティ」より、「プロパティの編集」をクリックします。そして、「（プロパティの）名前」と「値」をそれぞれ入力していきます。「名前」と「値」に何を入れるかは、以下の例を参考にしてください。

- 名前：色　　　　値：赤・青・黄・緑…
- 名前：大きさ　　値：大・中・小
- 名前：デバイス　値：PC・タブレット・モバイル
- 名前：状態　　　値：通常・ホバー・クリック
![プロパティの編集](//images.ctfassets.net/2kcyx6q7ww5g/2glOQXjucFb5kfxqfy65Xq/0f3640c45960835c2d30cf2e89cca87f/______________________________.png)

バリアントをさらに増やした例がこちらです。選択されたボタンには、「色ー黄色、大きさー小」と表示されており、2つのプロパティが設定されていることがわかります。
![バリアントを増やす](//images.ctfassets.net/2kcyx6q7ww5g/poOnzGEEj6dSJvQTA1lZO/835372893f3710c6d2c346eb81dc779e/______________________________.png)

#### プロパティの追加・変更
プロパティを追加する時は、「プロパティ」項目の「＋」マークから「バリアント」を選ぶと新規プロパティ作成画面が現れます。

また、ある要素を選択した状態で、「値」にカーソルを合わせると「メニューマーク」が現れるので、これをクリックすることで別の「値」に変更したり、「値」を新規追加することができます。

「値」として表示されている文字自体をクリックすると、それを編集できるモードになります。
![値の編集](//images.ctfassets.net/2kcyx6q7ww5g/bKlQOcMjP9YPj9uGSQYbi/cf88b697b0feaec48b12a39cc0fa3662/____________.png)
「色」「大きさ」といったプロパティ名も、それをダブルクリックすると編集できるようになります。

Figma コンポーネントの基礎からバリアントまでを理解しよう

本記事ではLaravelで使うValidationの応用編の7つを紹介します。

例えばメールアドレスを入力する際に、ひらがなやカタカナなどの文字を使うことはないと思います。
そこで入力できる内容を限定しようというのがバリデーションです。

本記事では、応用編のバリデーションを紹介していきますので是非ご活用ください！

※基礎的でよく使うバリデーションについては下記の記事で紹介しております。
参考→[Laravel バリデーションの基礎9選をマスターしよう！](https://implist.dev/entries/laravel-basic-validation)

※具体的なコードの記述方法については下記の記事で紹介しております。
参考→[Laravelで簡単にバリデーションを実装してエラーメッセージを表示してみる（日本語化も）](https://implist.dev/entries/149d22b000f2dd4ce42510b9efb524a1)

本記事で扱うバリデーションは下記の7つです。

1. starts_with:〇　
    - 〇から始まっているかどうか
3. after_or_equal:tomorrow
    - 明日もしくは明日以降の日付かどうか
5. url
    - 　URLの形式であるかどうか
7. digits_between:〇, □（数字）
    - 〇桁～□桁の間であるかどうか
9. mimes:〇〇,□□（拡張子）
    - 〇〇や□□に指定した拡張子の形式かどうか
11. confirmed
    - （パスワードなどの）値が同じであるかどうか
13. unique
    - 入力された内容が一意（オンリーワン）であるかどうか

### 「starts_with:〇」で〇から始まる値に限定するバリデーション

電話番号は国内であれば必ず「0」から始まりますよね。
ということは「0」以外（例えば「a」など）で始まっているものは国内の電話番号として機能しません。

この場合、「0」以外から始まるものをはじくことができれば、上記のように機能しない内容を少しでも防ぐことができますよね。

「starts_with:0」を設定すると下の画像のように、「0」以外から始まる内容を入力して「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![starts with](//images.ctfassets.net/2kcyx6q7ww5g/2TO53UhjhBJBBoRHfTXpDZ/639dd6d7d859c67ccff6652b05bd5574/starts_with.jpg)

尚、エラーメッセージは英語で表示されますが、日本語へ変更やカスタマイズも可能です。

詳しくは下記の記事で紹介していますので必要に応じて参照ください。

参考→[Laravelで簡単にバリデーションを実装してエラーメッセージを表示してみる（日本語化も）](https://implist.dev/entries/149d22b000f2dd4ce42510b9efb524a1)

### 「after_or_equal:tomorrow」で明日もしくは明日以降の日に限定するバリデーション

これは予約フォームで予約日付を入力する場合によく使われます。

「after_or_equal:today」で設定すれば本日以降の日に限定するバリデーションとして使えます。

「after_or_equal:tomorrow」を設定し、過去の日付を入力して「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![after or equal tomorrow](//images.ctfassets.net/2kcyx6q7ww5g/5sjFul1RVy0YPnZNMDTpe3/b3bee7785c3df98b92c6e7e3fc290029/after_or_equal_tomorrow.jpg)

### 「url」でURLの形式に限定するバリデーション

URLの形式以外の入力内容のリクエストをはじいてくれます。

例えば下の画像のように「abcdefg」と入力して「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![url](//images.ctfassets.net/2kcyx6q7ww5g/35ha2VEsj1wkP23OBu9mI6/8e475acfba99109fead52ac613872608/url.jpg)

### 「digits_between:〇, □（数字）」で〇桁～□桁の間に限定するバリデーション

これはパスワードによく使われます。
パスワードの設定で「4文字以上、8文字以下でパスワードを設定してください」というエラーを見たことがある人は多いのではないでしょうか。

例えば下の画像のように3桁だけを入力して「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![digits](//images.ctfassets.net/2kcyx6q7ww5g/5XcklSm2uIW611ng6ree0g/9d6ef5356062df10bca51b84d814713c/digits.jpg)

### 「mimes:〇〇,□□（拡張子）」で〇〇と□□の拡張子に限定するバリデーション

各種申請のフォームで添付資料が必要な場合によく使われます。

画像等の資料を添付する場合、このバリデーションを設定することよってデータの拡張子を限定することができます。

今回はjpegとtxtの拡張子に限定しています。

この状態でpdfのデータを添付して「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![mimes1](//images.ctfassets.net/2kcyx6q7ww5g/68NNOoJTLczPIIeniRfXIi/afa14deefc15d50452a3af239950809c/mimes1.jpg)

そこで拡張子がtxtのデータを添付して「登録」をクリックすると、リクエストが受け付けられてデータが登録されます。

![mimes2](//images.ctfassets.net/2kcyx6q7ww5g/2PNmEEQ5Y1xozunZtt0Itb/063da652618fb482534b94333932c63b/mimes2.jpg)

### 「confirmed」でパスワードなどの値と同じ値に限定するバリデーション

これはみなさん一度は経験されたことがあるのではないでしょうか。
パスワードの入力ミスを防ぐために非常に有効な手段の一つと言えます。

それぞれ違うパスワードを入力した状態で「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![confirmed](//images.ctfassets.net/2kcyx6q7ww5g/7l7WeaQRD0Y2FJ4D4iS4AV/2984a2df0b34ec31c392245b7fc60d7e/confirmed.jpg)

### 「unique」で入力された内容が一意（オンリーワン）の値に限定するバリデーション

大体のサービスでは同じユーザーIDのアカウントは作れないですよね。
つまり「unique」のバリデーションが使われる機会は多いということが言えます。

すでに登録されているユーザーネームと同じユーザーネームを入力した状態で「登録」をクリックしてもエラーとなり、リクエストが受け付けられないようになります。

![unique](//images.ctfassets.net/2kcyx6q7ww5g/2Hy0KottBmYep6UL2AZoPR/87a3fbb88fcdcc22eb84b75785c84257/unique.jpg)

以上、今回の記事ではLaravelで使うValidationの応用編の7つを紹介しました。

Laravelのバリデーション基礎9選と併せてご活用ください！

参考→[Laravel バリデーションの基礎9選をマスターしよう！](https://implist.dev/entries/laravel-basic-validation)

Laravel バリデーションの応用7選をマスターしよう！

WEB制作に欠かせない要素として「画像（写真やイラスト）」がありますね。
トップイメージの他に、
- 商品
- メンバーの写真
- 背景イラスト
など１つのWEBサイトには数多くの画像が配置されます。

本記事では、
- 画像の配置
- サイズ調整
- トリミング
- マスク
- 編集（色彩調整）
- 書き出し
- 画像に関する便利なプラグイン

をご紹介します。

これまでに解説した「フレームの使い方」「テキストスタイルの設定」に加えて、今回の画像操作をマスターすれば、FigmaでオーソドックスなWEBサイトがデザインできるようになるでしょう！

[【Figma】フレームの使い方マスター編〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)

[【Figma】テキストスタイルの使い方〜設定・登録・解除方法〜](https://implist.dev/entries/figma-text-style-setting-register-delete)

### Figma 画像の配置
Fimaの画像は、図形の「塗り」として配置されます。__つまり、Figmaにおける画像の配置は、「図形を画像で塗りつぶす」という操作を意味します。__

ではさっそく、下図のようなレイアウトに対して、長方形部分に画像を配置してみましょう。
![画像配置例](//images.ctfassets.net/2kcyx6q7ww5g/2HzQesIiNXlcV9qW1Ew69d/b9bd438136188ab43fec552c759b0ebe/_______________.png)
※画像はフリー素材を用いています（pixabayより）

1. ツールバーより、「画像/動画を配置」クリック（画像ファイル選択画面に移動）
    - ※この操作のショートカット：Shift+Command+K
2. フォルダから画像を選択し、「開く」をクリック
3. 塗りつぶしたい図形をクリック
![画像を配置する](//images.ctfassets.net/2kcyx6q7ww5g/1EeP6pnRwNPdmNGrnBuxCY/8209564aedbf2db8b722fa45d4d60c5c/_____________________.png)

#### ドラッグ＆ドロップによる画像の配置
Figmaのキャンバスに画像を配置する方法としては、ご自身のPCのフォルダから直接ドラッグ＆ドロップするやり方もあります。

この場合も、画像は「元の画像サイズの図形（長方形など）が画像で塗りつぶされている」ものとして処理されています。
![ドラッグ&ドロップによる画像の配置](//images.ctfassets.net/2kcyx6q7ww5g/5ZyoNcdzrYMrELrQwYF3ng/212e2afd1043ce5c77597e955c9f9039/_____________________________________________________________.png)

#### 画像の差し替え
いったん図形に画像を配置したあとでも、上記の配置と同じ方法で画像を差し替えられます。

1. 「Shift+Command+K」で画像の呼び出し
2. 画像を選択し、「開く」をクリック
3. 差し替えたい画像が入った図形をクリック

なお、Figmaでは画像を「削除する」という操作はなく、（もともと「画像で塗りつぶされているだけ」なので）画像を消したい場合は、別の「色」で塗り替えるという操作をします。

1. 消したい画像をダブルクリック
2. メニューが開くので「画像」をクリック
3. 塗りの選択肢が表示されるので、「単色」を選び適当な色をあてる
![画像の削除](//images.ctfassets.net/2kcyx6q7ww5g/29Xqoti91nzoilR1iIeLmj/64298195bf8d1157fc43daa5d0e590f5/_______________.png)

### Figma 画像のサイズ調整
画像が配置されている図形も、通常の図形のサイズ調整と同じように大きさの変更ができます。

1. サイズを変更したい図形（画像）をクリックして選択
2. 辺にカーソルを合わせる（矢印が現れる）
3. 矢印をドラッグして、図形（画像）を縦・横に拡大/縮小

なお、選択した図形の四隅に現れる点にカーソルを合わせると、斜めの矢印が現れるので、これをドラッグすることで全体のサイズを変えられます。この時、Shiftキーを押しながらドラッグすると、図形の縦横比を変えずに全体を拡大/縮小できます。
![画像のサイズ変更](//images.ctfassets.net/2kcyx6q7ww5g/2ZWio8MeWaaHxqUjJaaDpQ/7713b525c5e1156dee48f487be84f3df/___________________________.png)

### Figma 画像のトリミング
図形に画像を配置すると、ツールバーに自動的に「トリミング」アイコンが加わります。
（見当たらない場合は、画像をクリックして”選択された状態”にしてみましょう。）
![トリミングモードにする](//images.ctfassets.net/2kcyx6q7ww5g/6vguf4AiQgjNLkIpTcHSlr/edfe0e779383c140007a190ff326fa55/_______________________________________.png)

画像をトリミングする際は、まず目的の画像をクリックで選択してから、ツールバーの「トリミング」をクリックします。すると、画像がトリミングモードになりますので、矢印（カーソルを合わせると出現します）をドラッグして画像をトリミングします。

十字の矢印が出ているときにドラッグすると、（トリミング範囲でなく）画像それ自体を移動させられます。
![画像のトリミング](//images.ctfassets.net/2kcyx6q7ww5g/3AIbp2HBaR9pXGjbUe6uWu/dd44ac6cf4805ddf7f7adecaa0e1b537/___________________________.png)

トリミング範囲を確定するには、画像外の任意の場所（どこでもOK）をクリックするかEnterキーを押します。

なお、切り取られた場所は完全に削除されたわけではないので、もう一度画像を選択してトリミングアイコンをクリックすれば、再度トリミング範囲を設定できます。

### Figma 画像のマスク
まずは、「画像を図形でマスクする」とはどういうことかイメージしましょう。

「画像を図形でマスクする」と、画像のうち図形の範囲以外の部分が隠れます。ですので、画像を図形でくり抜いたように見えます（実際は、カットされたわけではなく、カバーされて見えなくなっただけです）。
![マスクのイメージ](//images.ctfassets.net/2kcyx6q7ww5g/1smppC5w0nFIWY2enQyf1e/6b5ba2827f4323793bc181ae12029cf1/___________________________.png)

では、Figmaにおいて「画像を図形でマスクする」方法を見ていきましょう。

1. 画像を配置
2. マスクに使う図形を、画像の残したい場所に設置
3. 図形を画像の下に配置
4. マスクに使う図形と画像の両方を選択
    - shiftキーを押しながら、画像レイヤーと図形レイヤーを順番にクリック
5. ツールバーの「マスクとして使用」をクリック
![画像のマスク1](//images.ctfassets.net/2kcyx6q7ww5g/4Y4aVjQ5Agp9QatOEXTvoK/80ad8948c3974e825cb56a1b774b15f3/__________________1.png)
![画像のマスク2](//images.ctfassets.net/2kcyx6q7ww5g/HNePgmZw6Ts96OAlJyI85/52eb2e9db806b0679ded42d258c720ef/__________________2.png)

マスクを解除するときは、「マスクに使った図形のレイヤー」を選択肢、もう一度ツールバーの「マスク」をクリックします。__※マスクは「切り抜き」ではないので元の図形（画像）も保存されています。__

マスク後に画像を移動する場合、画像をドラッグすると（マスク用の図形は動かずに）画像のみが動いてしまいます。ですので、__マスクに用いた図形と画像はグループ化しておくことがおすすめです。__

これまで解説してきたように、画像の一部のみを使いたい場合には、「図形を画像で塗りつぶしてから、トリミングする」、もしくは「画像を図形でマスクする」方法が選べます。それぞれ練習して、使いやすい方を用いましょう！

### Figma画像の色調補正
続いて、画像の色調補正の仕方について解説します。

画像をダブルクリックすると、画像に関するメニューが開きます。メニューには以下の項目があり、それぞれに調節バーが付いています。
- 露出
- コントラスト
- サイド
- 温度
- 濃淡
- ハイライト
- シャドウ
![画像メニュー](//images.ctfassets.net/2kcyx6q7ww5g/1abMuRpr7SQU9uTA96hxEo/3d5a268c2c8e9ec178132636238ff045/__________________.png)

それぞれの効果をざっくり解説すると、以下ようになります。
![色調補正](//images.ctfassets.net/2kcyx6q7ww5g/7qsAqEnn4wRVgZxJIX2tF4/6dc4c8aae7f3f58e21fe2af402680043/____________.png)

「露出」という言葉がわかりづらいかもしれませんが、これは（一眼レフなどの）カメラで写真を撮る時に、レンズに取り込まれる光の量を調節するイメージです。つまり、露出を多くするとは「光量が多い像にする」ということです。

例えば画像全体を暗くして白文字を入れようとした場合、「部分的な光によって白文字が映えない」ということがあります。そんなときは、それぞれの調節バーをうまく組み合わせて、光が全体の暗さに馴染むように、うまく調節していきましょう。
![光量調整例](//images.ctfassets.net/2kcyx6q7ww5g/3AZaMOnJTrgVIss2lI25FM/6621475b30ff6038796424d32292ae09/_______________.png)

#### 画像の「タイル」で配置する
画像のメニューの一つに、「タイル」というものがあります。これは、CSSでいうところのrepeat（リピート）と同じ意味です。

このように、背景全体に模様を繰り返し使いたい時に便利です。
![画像をタイルで配置](//images.ctfassets.net/2kcyx6q7ww5g/4b2V6aSaL1tiAfGB8Pgj8H/de2fa3a44ecf0e32d34aaf7f875ebda1/______________________________.png)

### Figma 画像の書き出し
ここでは、Figmaでの制作物をJPEGやPNGとして書き出す方法について解説します。

1. 書き出したいレイヤー（またはフレーム、図形）を選択
2. サイズを設定（0.5倍、2倍…など）
3. 拡張子（JPEG, PNG, SVG, PDF）を設定
4. 「エクスポート」ボタンをクリック

なお、エクスポートの際、「重なり合うレイヤーを無視する」にチェックが入っていると選択した画像のみが書き出され、チェックを外すと画像に重なる他の図形なども一緒に書き出されます。
![画像の書き出し](//images.ctfassets.net/2kcyx6q7ww5g/3oDayWVQnYnjFLcIPkCEmo/5da04a5f78450f4d52a36ad15fccfd94/_____________________.png)

以下ような制作物で、PNGで書き出す場合、背景を透過させる場合は「塗り」の欄の「エクスポートに含める」のチェックを外しましょう。

![画像の書き出し 背景の透過](//images.ctfassets.net/2kcyx6q7ww5g/3QNiiPRMpxHveyQ1hJ6JV5/9d06b12680996c71f27768043d778cba/_____________________________________.png)

### Figma 画像に関する便利なプラグイン
最後に、画像に関する便利なプラグインをご紹介します。

#### Unsplash
こちらは商用利用可能なフリーの素材サイトです。
（利用範囲については、利用規定をお読みください）

初めて利用する場合は、以下のように呼び出します。
__「メニュー」→「プラグイン」→「プラグインをさらに検索」→「Unsplash と入力」して検索　→「実行」をクリック__
![プラグインの設定](//images.ctfassets.net/2kcyx6q7ww5g/4jGENvTfiy4v0f3H5l4AQ1/55c39867e0b2db215cc176a8c518b7f9/______________________________.png)
一度使用すると「最近使ったプラグイン」から再度利用することができます。

図形を挿入・選択した状態で、「プラグイン」からUnsplashを呼び出し、気に入った画像をクリックするだけで、その図形が画像で塗り潰されます。
![Unsplashからの画像の挿入](//images.ctfassets.net/2kcyx6q7ww5g/6fVWvhLVLkVleY31IJyRft/913ea9500f837115e85ab45bdeb1396c/Unsplash________________________.png)

#### Blobs
「Blobs」というプラグインを用いると、ふにゃふにゃの図形を作成できます。

上下のバーで、「ふにゃふにゃ具合」を調整します。「Insert（挿入）」をクリックすると、キャンパス上に図形が挿入されます。
![Blobsの使用例](//images.ctfassets.net/2kcyx6q7ww5g/3Sx80L7OjxNYhOfj8vZNYU/15c346a3849c236f7f6c17fe1598c296/Blobs____________.png)

このふにゃふにゃの図形と画像を組み合わせることで、個性的なデザインが楽しめます（通常の「図形」に画像を挿入するのと同じやり方でOKです）。

### おわりに
今回解説した画像の配置とその編集と、前記事の「テキストの編集」「レイヤー」をマスターすれば、簡単なWEBデザインはできるようになります。

今後、細かい技やプラグインも活用して、様々なデザインが実装できるようになっていきましょう！

Figma 画像配置・トリミング・色調整・書き出しをマスター！

今回はVue 3.0の基礎的な内容を学んでいきます。
基礎的内容ですが、Vueを使っていく上でめちゃくちゃ重要な要素となっているので、しっかり抑えておきましょう。

今回はリアクティブな状態とその操作について詳しく学んでいきます。Vueのディレクティブというものについても少し触れますが、ディレクティブは次の記事でより詳しく解説・紹介していきます。

### Vueにおけるリアクティブな状態とは？

まずはVueを使うにあたって非常に重要な「リアクティブな状態」について抑えていきます。

Vueでリアクティブな状態というのは「あるデータ」が変化した時「それに関連するデータ」も合わせて変化（反応）することを意味します。

[(Vueの公式サイトではスプレッドシートの例を用いて説明](https://ja.vuejs.org/guide/extras/reactivity-in-depth.html#what-is-reactivity)しているので、ここでもスプレッドシートで説明します。

以下のような表を用意しました。

![スクリーンショット 2023-05-18 14.23.08](//images.ctfassets.net/2kcyx6q7ww5g/44htJS9l4TQBNVSA4zyLhj/f2732fb87251a65b7239281c0567e9f2/____________________________2023-05-18_14.23.08.png)

各収入金額を表にまとめたものです(個人開発者として理想的な収入体系ですね)

- 本業収入
- 副業収入
- 個人開発収入

この時、それぞれの収入の合計を算出したいとします。

以下のように3つの収入を足し合わせれば算出できます。合計収入は__それぞれの収入を参照__しているといいます。

![vuereactive](//images.ctfassets.net/2kcyx6q7ww5g/5j633OiHONwCKXuVNKp54V/efde6d52b6d3d69146f315cff5c35b97/vuereactive.gif)

Vueの言葉をかりて上記の内容を説明すると、

__本業、副業、個人開発のそれぞれの収入はリアクティブな状態（値）となっていて、それぞれ変化することで合計収入がそれに応じて変化する__

といった感じです。

以下のようにそれぞれの収入を変化させると「合計収入」もそれに応じて変化します。

![vuereactive2](//images.ctfassets.net/2kcyx6q7ww5g/56tRFt1dTdvOFGFoSLO1Rl/348a62c7096a9e8e18b8ddd979d594e1/vuereactive2.gif)

通常JavaScriptの変数で定義した値を、参照したところで参照元の値が変わったとしても、参照先は変化しません。

Vueの機能を使って、参照元をリアクティブな状態（リアクティブな値）にすることで、参照先がそれに応じて変化します。

ちなみに参照先を変更したところで、参照先には影響しません。これは参照先が参照元に依存しているだけであって、その逆の依存はないからですね。

なので先程の収入の例でいうと、
合計収入を変更したからといって「本業、副業、個人開発」の収入には変化を及ぼさないということです。
考えてみれば直感的で当たり前の話かもしれませんが、Vueでリアクティブな状態を扱う上では非常に重要な考え方となるので、理解できない場合はしっかり抑えておきましょう。

またこの考え方はVueだけではなく、他のフロントエンドフレームワークでも使われていることが多いです。リアクティブな状態というのはどういうものなのかを抑えておけば、他のフレームワークを使うときも理解が早まると思います。

### Vue 3.0でリアクティブな状態を扱うには？フォーム操作（データバインディング）
リアクティブな状態について理解できたところで、具体的にVue 3.0ではどのように記述していくのかを見ていきましょう。

#### Vue 3.0のreactiveとrefでリアクティブ化する
JavaScriptにおいて、通常変数の定義はconstやletで行いますよね？

Vueにおいてそのような変数はリアクティブではありません。

Vue 3.0でリアクティブな状態として変数を定義するには以下の2つの方法があります。

- reactive
- ref

これらはそれぞれVueが提供している関数で、値をこの関数で定義することでリアクティブ化されます。

それぞれでリアクティブ化して、表示してみます。

reactiveを使った場合

App.vue

```js
<script setup>
import { reactive } from 'vue';

const data = reactive({
  name: "sample",
})
// sampleとlogが出力される
console.log(data.name)
</script>
<template>
  {{ data.name }}
</template>
```

refを使った場合

```js
<script setup>
import { ref } from 'vue';

const data = ref({
  name: "sample"
})

// scriptタグないで値にアクセスする場合は .valueを付ける必要がある。templateタグ内では .valueは不要
// sampleとlogが出力される
console.log(data.value.name)
</script>
<template>
  {{ data.name }}
</template>
```

書き方と性質に違いがあるのですが、今回はreactiveかrefを使えばVue内でリアクティブ化出来るんだなーということだけ覚えておきましょう。

ちなみに、reactiveはプリミティブ値（文字列、数値だけとか）を持てなかったり、オブジェクトを分割代入したらリアクティビティが失われたりします。refではプリミティブ値も持てるし、分割代入してもリアクティビティは失われないという違いがあります。

この辺の違いや仕組みなどは公式サイトに詳しく記載されています。

[■https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html)

[■https://ja.vuejs.org/guide/extras/reactivity-in-depth.html](https://ja.vuejs.org/guide/extras/reactivity-in-depth.html)

[■https://ja.vuejs.org/api/reactivity-core.html](https://ja.vuejs.org/api/reactivity-core.html)

#### リアクティブな値でフォーム操作を行う（データバインディング）

どちらでもいいんですが、今回はreactive関数のみを使い説明していきます。実際にコードを書きながら慣れていってください

以下のように、入力フォームに入力した名前をリアルタイムで表示していく簡単な機能を作りました。

```js
<script setup>
import { reactive } from 'vue';

const data = reactive({
  name: "", // nameの初期値は空にしておく
})
</script>

<template>
  <div>
    <input type="text" v-model="data.name" />
  </div>
  <div>name: {{ data.name }}</div>
</template>
```

実際に以下のように動きます。リアルタイムで文字が出力されていますね。

![vue input test v-model](//images.ctfassets.net/2kcyx6q7ww5g/7vOyK71geIVan2prSKshmD/82bce3a2f2c89efef2b4bf26bd60e9ed/vueinput.gif)

リアクティブな値（今回でいうとdata.name）をinputタグと紐付けることで、このようにリアルタイムで文字が表示されていきます。入力したらそれに反応して出力されている。つまりリアクティブに動作していますね。

`リアクティブな値をinputタグと紐付ける`と言いましたが、これはv-modelで実現します。他のフォームタグに関してもv-modelで紐づけていくことが可能です。

この紐づけを「`データバインディング`」といい、`data.name`はinputタグにバインディングしていると言ったりします。
この辺の用語は聞き馴染みがないかもしれないですが、開発していたらよく出てくるので抑えておきましょう。

### リアクティブな値とデータバインディングを使ってちょっとした機能を作る

入力した文字をただ出力するだけだとあまり面白くないので、もう少し凝ったことをしてみましょう。

`名前の登録フォームと名前リスト`を作っていきます。

名前を入力して、登録ボタンを押したら名前のリストに追加されていき、名前ごとの削除ボタンを押したらリストから削除されるといった感じです。

完成イメージ↓
![vue-input-name-list](//images.ctfassets.net/2kcyx6q7ww5g/6bDotheNJJhZSxLOl9SvOO/d4150230c529243edf5e384462a1854c/vue-name-list.gif)

まずコード全体をお見せします。
```js
<script setup>
import { reactive } from 'vue';

// ①
const data = reactive({
  inputName: "",
  nameList: []
})

// ③
const addName = () => {
  data.nameList.push(data.inputName)
  data.inputName = "" // リストに名前が追加されたら入力フォームを初期化する
}
// ⑤
const deleteName = (targetName) => {
  data.nameList = data.nameList.filter(name => name !== targetName)
}

</script>

<template>
  <div>
    <input type="text" v-model="data.inputName" />
	
    <button @click="addName">登録</button>
  </div>
  <ul>
	
    <li v-for="name in data.nameList">
      {{ name }} <button @click="deleteName(name)">削除</button>
    </li>
  </ul>
</template>
```

いくつかポイントを上げて説明してきます。

- ① reactiveのオブジェクト内で名前入力とリストデータを保持
- ② @clickを使ってボタンが押された時に動く関数を指定
- ③ reactiveなnameListに値を追加、名前入力を初期化
- ④ v-forを使って名前のリストを一つずつ表示
- ⑤ 削除対象の名前以外をフィルタリングして、名前リストを上書き

vueの内容とjsの内容が混在しているので、事細かく示してみました。一つずつ見ていきましょう

#### ① reactiveのオブジェクト内で名前入力とリストデータを保持

今回はreactive関数内にオブジェクトを定義し、名前自体と名前のリストのデータを保持するようにしてみました。

```js
const data = reactive({
  inputName: "",
  nameList: []
})
```

もちろんそれぞれ分けて以下のようにしてもいいんですが、同じ機能として扱うデータなので今回はまとめました。

```js
const inputName = reactive({
  name: "",
})

const nameList = reactive({
  list: []
})
```

これはちょっと冗長なので、できるだけ機能や意味のかたまりでまとめておくのをおすすめします。

#### ② @clickを使ってボタンが押された時に動く関数を指定
これは@clickなどはディレクティブと呼ばれ、また次の記事で説明しますが、
HTMLのタグに対してVueが色々な操作を加えるものになります。

この@clickは`〇〇が押された時`ということを表し、中にJSのの関数を定義することでその関数が実行されるようになります

今回はbuttonタグにつけていますが、buttonタグじゃなくても動作します

```js
<div @click="() => { 
  // 何かしらの処理を実行
  console.log('hello vue 3.0!')
}">click</div>
```
#### ③ reactiveなnameListに値を追加、名前入力を初期化
②の@clickが実行されて、addNameという関数を定義しているので、それが実行されます。
data.nameListに入力されている名前を追加するという処理を書いています。

またnameListにinputNameを追加したあとでもinputNameに入力された文字は残ってしまうので、

`data.inputName = ""`

このようにして初期化しておきました。
ユーザーからすると、リスト追加されているのにフォームに残っていたら使い勝手が悪いですからね。

#### ④ v-forを使って名前のリストを一つずつ表示
v-forも@clickの仲間でディレクティブです。
このv-forは配列（今回はnameList）の中身を1つ1つ取り出していくものです。

nameListには文字列の名前が複数はいっているので、それらをすべて`<li>タグ`で囲まれるように出力していきます。

#### ⑤ 削除対象の名前以外をフィルタリングして、名前リストを上書き
最後に削除ですね。

削除も登録同様、@clickを押されたら削除を処理を行う関数を呼び出しているだけです。

deleteNameという関数では引数に「v-forで繰り返された特定のname」をとっています。

仮にbobの削除ボタンを押したとすると、deleteName("bob")となり、

以下が実行されます
```js
// targetNameはbob
data.nameList = data.nameList.filter(name => name !== targetName)
```

この記述は純粋なJSなので、よくわからない方はJSの配列操作について勉強すると良いです。

[■JavaScriptのメソッド(forEach,map,filter)の違い](https://qiita.com/yasu2450_tech/items/884faf1064dec163aa52)

JSの配列操作は非常に重要で使い勝手も可読性も高いので、しっかり覚えておきましょう。for文とかif文とかで頑張らないことをオススメします（[■循環的複雑度がまして、バグの混在を含む可能性が上がっていくので](https://qiita.com/yut_arrows/items/16749e02313109071338)）

Vue 3.0の基本 リアクティブな状態とディレクティブを学ぶ

2年間Webエンジニアとして副業をやってみた

Github Codespacesはクラウド上で開発環境、クラウドIDEを提供するサービスです。

月60時間程度は無料で使えます。

[https://github.co.jp/features/codespaces
](https://github.co.jp/features/codespaces)

Githubのアカウントさえあれば、クラウドの開発環境にアクセスでき、ブラウザ上（PC上でも）でIDE（VSCode）を使って開発がすぐに始められます。

今回はVue3の環境構築を構築していきます。

### GithubでCodespacesを起動する

まずはGithubにアクセスして、Codespacesにアクセスします。

[https://github.com/
](https://github.com/)

![1](//images.ctfassets.net/2kcyx6q7ww5g/4Q7LUkw8Pbpd32aCLrDMyh/1fcad6458b164cb7a38253bdff5618b5/1.png)

今回は既存のリポジトリは使わずに、VueのインストールもCodespaces上で行うのでBlankのテンプレートを選択します。

![2](//images.ctfassets.net/2kcyx6q7ww5g/6JHFGnvpvvRWyNbv36Ywy/63069fbe6931b65bc8c5f8a9de681ebb/2.png)

数秒ほどでブラウザ上でVSCodeが起動します。よく見慣れた画面ですね。

ターミナルでコマンド実行もでき、デフォルトでPHPやNode、Ruby、Pythonなどいろいろなプログラミング言語が使用可能になっています。

![3](//images.ctfassets.net/2kcyx6q7ww5g/7B6J4k1GGI7MJlyYsB4ejk/5f5d0c5740cb7357ab13616b56fec7f4/3.png)

ターミナル上でVueをインストールしていきます。

```
npm init vue@latest .
```

「.」とすることで、リポジトリ直下にvueをインストールできます。

vueプロジェクトがインストール出来たら、npm packageをインストールしておきます
```
npm install
```

vueをこの状態で起動しても、ブラウザからアクセス出来ないのでviteの設定を変えていきます。

vite.config.jsを開いて、

```
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // ここを追加
  server: {
    host: true,
  }
})
```

この状態で、vueを起動します。

```
npm run dev
```

ターミナル上の http://localhost:5173 をクリックすると別タブでVueアプリケーションの画面が開きます。

今回は右下に出てきた、すべての転送されたポートを表示から、同一画面上にVueの画面を開いていきます。

![3.1](//images.ctfassets.net/2kcyx6q7ww5g/2adNhdJxege4AsYdFm8rVK/a4f744379c567aabf9f70777800a5f31/3.1.png)

ローカルアドレスの右側のボタンを押すと、

![4](//images.ctfassets.net/2kcyx6q7ww5g/2j2yIJ9MkO2hqZcJFRBWLD/49be8cffac55aeb862ab0872c7d4d6e6/4.png)

このようにVueの画面が表示されます。エディタとVueの画面を見ながら開発できます。

![5](//images.ctfassets.net/2kcyx6q7ww5g/1NOQ8TD7M4nLrzSzQRcYZz/fc0d0ead601129010b7005dd4c5f5dcc/5.png)

実際にコードを編集すると、画面リロードなしで反映されます。ｈｍｒも効いていますね。

![6](//images.ctfassets.net/2kcyx6q7ww5g/2mNMG3EThdau0b42I8S2bO/71dc5a3d6ed62bcb1f6753fce65101bc/6.png)

### Gitリポジトリを作成してコミットする

現段階ではCodespaces上でVueのアプリケーションを実行しているだけで、Gitのリポジトリは作成されていません。

この開発環境を削除すると、コードも消えてしまうのでGitリポジトリ化してコードをコミットしていきましょう。

左メニューよりGitを選択して、Publish to Githubを押します。

![7 github](//images.ctfassets.net/2kcyx6q7ww5g/4MtMlFqQHFTS6zY0GGqKq6/4955d0516a5cce0dcebda334dbffa832/7_github.png)

適当にリポジトリ名をつけて、private repositoryで作っておきます。

![8](//images.ctfassets.net/2kcyx6q7ww5g/3A2CY2cXPwmIZ7srRFra3Z/25a018f84b9196a4ff00529329e4ba18/8.png)

以下のようにメッセージが出てきたら、リポジトリ作成完了です。

![9](//images.ctfassets.net/2kcyx6q7ww5g/49xvSW9VdbfeBp2kAdBqWj/36eb6075ffe62f2b2d03fc9840b1a593/9.png)

### CodespacesをローカルPCのVSCodeで使う

ローカルPCのVSCodeでもCodespacesにアクセスできるので、そちらも使っていきましょう。
使い方は簡単で、先程作成したcodespaces選択して

![10 local](//images.ctfassets.net/2kcyx6q7ww5g/6r35NXXC1np3UYmmWlRTL3/1c45f55ef87a015eb44a3bf9da1a5730/10_local.png)

「Open in Visual Studio Code」を開きましょう。

![11](//images.ctfassets.net/2kcyx6q7ww5g/3LhZX2OHdpTUbX2PRuGNaO/c4fb1229ad49b16060bee7ae663c7224/11.png)

このように開けます。リモート上で実行するときと同様にターミナルを開いて、

```
npm run dev
```

を実行して「[http://localhost:5173](http://localhost:5173)」にアクセスできます。

![12](//images.ctfassets.net/2kcyx6q7ww5g/75i7oOhuRZQlJ8zCuUqzS5/fbbf3d518fb332e8b290e0a0980094ee/12.png)

### GitHub Codespaces 料金・無料枠の確認する

GitHub Codespacesは月60時間程度無料で使えるのですが、正確には1ヶ月あたり120コアが無料枠ととなります。

Blankのcodespaceを開くと、最小の2コアの環境が起動されます。

つまり2コアを毎時消費するので、120コア使えるということは60時間使えるということです。最小が2コアで2コア単位でスペックを強化していくことができます。

vueの開発では2コアで、今のところ十分です。

#### 使用率の確認
どのくらい月の無料枠を消費しているかを確認してみましょう。

Settingsを開いて、

![13 bill](//images.ctfassets.net/2kcyx6q7ww5g/6bwF72qtn0G19iwn5Rjpyx/40ef0ee347493898fa4d96076e857847/13_bill.png)

Billing and plansのPlans and useageを選択します。

![14](//images.ctfassets.net/2kcyx6q7ww5g/1jRf3oaZA4nMVxJigkIbkQ/d0b2dd68f530f5575fc7b2bd976654a7/14.png)

Codespacesの欄にUseage hoursとStorageがあります。

これが無料枠の消費状況です。ストレージにも容量制限がありますが、15GBもあるのでそうそう超えることは無いでしょう。

![15](//images.ctfassets.net/2kcyx6q7ww5g/7xfXalZZZGFn0k39Md0dsk/f27475fbb4c75246d8b026b7ee17ecbe/15.png)

今回は、CodespacesでVueの開発環境を構築してみましたが、かなりサクサク動作して起動までも高速でとても開発しやすいなといった印象です。

### VSCodeのプラグインをデフォルトでインストールするようにする

codespacesでプロジェクトを開いたとき、VSCodeのプラグインは何もインストールされていない状態です。

VSCodeからインストールするべき、プラグインの提案をしてくれるんですが都度インストールするのも手間なので、起動時にインストールされるように設定しておきましょう。

プロジェクト直下に

```
devcontainer/devcontainer.js
```

とファイルを作成して、extensionsにインストールしたいプラグインを入力しておきます。

```json
{
    "extensions": [
        "Vue.volar"
    ]
}
```

この状態をリポジトリにコミットしておくと、次回から起動するときにVue.volarがインストールされます。

ちなみにこのプラグインはVueの開発をサポートするプラグインなので入れておきましょう。


Github Codespacesで「Vue3」のクラウド開発環境を構築する

ここがすごいぞ「TablePlus」超便利な機能を一挙紹介！

本記事では、Figmaにおけるテキストスタイルの設定や編集、そして、スタイルの登録・適用・解除方法について解説していきます。

ところで、「見やすいwebサイト」ってどのようなサイトだと思いますか？

レイアウトのテクニックは数あれど、やはり「タイトルや本文それぞれのフォントやテキストスタイルが揃っていること」は基本中の基本であるといえるでしょう。とはいえ、それぞれのパートを書くたびにスタイルを入力するのは手間がかかりますね…。
![レイアウトの良い例＆悪い例](//images.ctfassets.net/2kcyx6q7ww5g/4h1QRPxvpiMPbQTuD0tJhw/d2c437657f952d6584540b98f75ca885/_______________________________________.png)

Figmaでは、こういった「テキストスタイル」を登録し、名前を付けて管理する機能があるのです！

「タイトル」や「本文」に、あらかじめ登録したスタイルを呼び出して適用するだけなので、いちいちスタイルを入力する時間を短縮できるほか、入力ミスを防止するメリットもあります。本記事で「テキストスタイル」の使い方をばっちりマスターして、効率よくサイトをデザインしましょう！

記事を読みながらFigmaを操作する場合は、準備として「新規ファイル」を作成し、適当な「フレーム」を作成しておいてください。

【関連記事】  
ファイルの作成について：[Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】](https://implist.dev/entries/figma-account-and-file-management-for-beginner)  
フレームについて：[【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)

### Figma テキストスタイルの設定方法
まずは、テキストスタイルの設定方法からみていきましょう。

ツールバーから「テキストツール（Tのアイコン）」を選択し、文字を入力してみましょう。そして、その文字列を選択した状態で、画面右の「テキスト」からスタイルを設定します。
![Figma テキストスタイルメニュー](//images.ctfassets.net/2kcyx6q7ww5g/17joD0PPJP198BF4vER7HM/64f8ee0f2f440182ba0bffe9c1d92e8e/Figma________________________________________.png)

適用できるテキストのスタイルうち、まずはデフォルトで表示されているものについて解説します。①フォント、⑦テキストボックスの調整については、以下に図で補足しました。
![Figma テキストスタイル編集](//images.ctfassets.net/2kcyx6q7ww5g/7I0zR8nEVopG9tRptLreul/79811bcfecdb5163bed6a6847d22744d/Figma__________________________________.png)

①フォント：表示されているフォントにカーソルを合わせるとボタンが現れ、これをクリックするとフォントメニューが開きます。ここから好みのフォントを選択・変更できます。

②太さ（ウェイト）：文字の太さを設定します。フォントによっては選択肢がない場合もあります。ウェイトは、「W0, W1, W2…」「Thin, Regular, Bold…」など、フォントの種類によって表記が異なります。

__斜体が適用できるフォントは、上記に加えて「Italic」が選択できます。逆に言うと、「Italic」がないフォントは斜体にできません。__

③文字サイズ、④行間、⑤文字間隔、⑥段落間隔：それぞれ、直接数値を入力することで調整ができます。なお、文字サイズは選択肢からサイズを選ぶこともできます（フォントと同様、カーソルを合わせるとボタンが現れ、クリックするとメニューが開きます）。

⑦テキストボックスの調整：文字を入力したときのテキストボックスの動きを設定します。
- 幅の自動調整：テキストボックスは、文字数に応じた幅に自動調整されます
- 高さの自動調整：テキストボックスは、文字数に応じた高さに自動調整されます
- 固定サイズ：テキストボックスの幅・高さを固定します
    - ※文字が超過した場合はボックス外に溢れていきます  
    - ※「詳細設定」の「サイズ変更」から、はみ出した文字を切り取る設定にもできます

⑧、⑨テキストの配置：
⑧では、テキストボックスに対するテキストの配置を「左揃え/中央揃え/右揃え」にできます。
⑨では、テキストボックスに対するテキストの配置を「上/中央/下揃え」にできます。

さらに、「テキスト」メニュー右下の「・・・」ボタンをクリックすると、詳細な設定をすることができます。
![Figmaテキストスタイル編集詳細](//images.ctfassets.net/2kcyx6q7ww5g/Enph2hcZUj7LkXIYGN0GR/35d373e9570d32a2f548285b99df4707/Figma_______________________________________.png)

下線や取り消し線、段落インデントの他、リストスタイルを適用したいときもここで設定できます。適用したいスタイルにカーソルを合わせるとプレビューが表示されるので、ここから確認できます。

### Figma テキストスタイルの登録方法
使用したいテキストスタイル（フォント、文字サイズ、太さ…など）が決まったら、これを登録していきましょう。例として、「H2タイトル」に使用されているスタイルを登録してみます。

1. テキストを選択します。
2. 「テキスト」メニューの右上のアイコン（点が４つ）をクリックします。
3. 「テキストスタイル」と題された小さなボックスが開くので、この右上の「＋」をクリックします
    - ※するとさらに、「新しいテキストのスタイルを作成」と題されたボックスが開きます
5. 選択されたテキストのスタイルに名前をつけます。また、その下の「説明」欄に、このスタイルをどんなシチュエーションで使うのかといったメモを残すことができます。
    - ※「説明」は入力しなくてもスタイル登録できます
6. 「スタイルの作成」をクリックすると、スタイルが登録されます。
![Figmaテキストスタイル登録](//images.ctfassets.net/2kcyx6q7ww5g/76c54dQWDjvovIH6IaMgP9/071fa3460e1986d8b7efd1009b23f142/Figma______________________________.png)

### Figma テキストスタイルの適用方法
テキストスタイルの登録ができたら、次はそれを適用してみましょう。例として、２つ目の「H2タイトル」に、先ほど登録した「H2タイトルのスタイル」を適用してみましょう。

1. スタイルを適用させたいテキストを選択します。
2. 「テキスト」メニューの右上のアイコン（点が４つ）をクリックします。
    - ※登録したテキストスタイルが、選択肢として現れるようになっています
3. 「テキストスタイル」から、「H2タイトル（あらかじめ登録し、自身で名前を付けたもの）」を選択します。

これで、２つ目の「H2タイトル」にも、1つ目の「H2タイトル」と同じスタイルが適用されました。
![Figmaテキストスタイルの適用](//images.ctfassets.net/2kcyx6q7ww5g/1MNVUa6uIdH6IWi6vZP1ds/769974c481eeda198c2229adc41640ac/Figma_________________________________.png)

#### テキストスタイルの解除
ここでは、スタイルの適用を解除し、再度、個別のスタイルを設定したい場合について解説します。  （一部のスタイルは、設定を解除しなくても個別のスタイル設定ができます。）

登録したテキストスタイルを適用している場合、画面右の「テキストメニュー」には登録したスタイル名（今回は「H2タイトル」）が表示されています。このメニューにカーソルを合わせると、右上に「解除」のアイコンが表示されるので、これをクリックするとスタイルを解除できます。

__「解除」のアイコンはカーソルを合わせないと現れないのでご注意ください。__
![Fimaテキストスタイルの解除](//images.ctfassets.net/2kcyx6q7ww5g/51XA3yh940I7g2ZHLNoql1/115608aaa05db51c838b8a8bf2e84afc/Fima_________________________________.png)

### Figma 登録したテキストスタイルの変更方法
一度登録したテキストスタイルの内容を変更したい場合は、以下の方法で行います。

テキストスタイルが適用されている文字を選択し、そのタイトル（今回は「H2タイトル」）をクリックすると、スタイルのメニューが現れます（自分が登録したテキストスタイルが選択肢に現れます）。  なお、ここで、他の登録スタイル（例えば「H1タイトル」）を選択して変更・適用することもできます。

変更を加えたいスタイルにカーソルを合わせると、右端に設定アイコンが現れます。この設定アイコンをクリックすると、『Figma テキストスタイルの設定方法』で見た「テキストスタイルを編集」する小画面が現れ、編集ができるようになります。

試しに「H2タイトル」のサイズを変更してみましょう。
![Figmaテキストスタイルの変更](//images.ctfassets.net/2kcyx6q7ww5g/6vjevftAT2sb8LLsmORsUx/9032a1f468236163dee904baaaa16a9f/Figma_________________________________.png)

…2つの「H2タイトル」のサイズが同時に変わりましたね。このように、登録されたスタイルの内容を変更すると、それが適用されているテキスト全てに変更が適用されます。

なお、キャンバスのなにもないところをクリックすることで、「ローカルスタイル」を呼び出し、ここからテキストスタイルの設定を変更することもできます。

「ローカルスタイル」には、「テキスト」「色」「エフェクト」「グリッド」があり、それぞれにスタイルを登録することができます。
![Figmaテキストスタイル変更２](//images.ctfassets.net/2kcyx6q7ww5g/3VKmxwTc4knhfAmmO3nOuO/c14b63fed6f7c1fa2a74f450f5d129d4/Figma_________________________________.png)

__登録したスタイルを削除するには、ローカルスタイルでスタイルを選択し「delete」を押します。（誤って削除した場合は「Command+z」で「1つ前に戻る」を実行しましょう）__

### Figma 「テキストスタイル」として登録できないこと
ここでは、「テキストスタイル」として登録できそうでできないものをご紹介します。

#### 文字色
文字色自体は自由に設定できますが、これは「塗り」から設定します。

色は「色スタイル」として、テキストスタイルと同じ要領で登録・適用することができます。しかし、この色は「テキストスタイル」としてフォントなどとまとめて一括登録することはできません（「テキストスタイル」とは別に、「色スタイル」として登録・適用します）。

なお、登録した「色スタイル」は、図形など文字以外の要素にも適用することができます。
![Figma色スタイル](//images.ctfassets.net/2kcyx6q7ww5g/6HnDNciMbAqLKRBqSAuTcI/daf9abf37a9dc80b81fd0d572c48f543/Figma_______________.png)

#### エフェクト（ドロップシャドウなど）
文字につけるドロップシャドウなどのエフェクトについても、「色スタイル」と同様です。「テキストスタイル」に含めて一括で設定することができませんが、「エフェクトスタイル」として登録して適用することができます。

#### 文字下線（アンダーライン）の色を変更する
「テキストスタイル（詳しい設定）」では、テキストに「下線」を引くことができます（これは「テキストスタイル」として登録できます）。しかし、この下線の色は黒しかなく、色の変更ができません。よって黒以外の色でスタイルを登録することはできません。

もし、テキストに黒以外の下線を付けたい場合は、文字をフレームで囲い（要素を選択してCommand+Option+G）、このフレームに対して枠線の設定をするとよいでしょう（※枠線の「下」のみ表示にして、「線のスタイル」で色を変えます）。
![Figma文字に色付き下線を引く](//images.ctfassets.net/2kcyx6q7ww5g/3nJNIVoABcpqst2BhQLkRc/70d443bae099b4eb8559a57bea5ce838/Figma_________________________________.png)
ただし、この方法は複数行にまたがる文章には使えないため、タイトルなど短い文字列に使いましょう。

#### 文字背景色
テキストボックスには背景色が設定できないため、文字に背景色をつけることができません。

文章の背景に色を付けたい場合も、色付き下線の場合と同様に、文字をフレームで囲って、そのフレームに対して「塗り」の設定をするとよいでしょう。

### おわりに
Figmaのスタイル設定では、デフォルト機能ではできないことも、フレームなどと組み合わせたり、プラグインを活用したりすることでできるようになる場合があります。それらについても、今後ご紹介していきたいと思います。


【Figma】テキストスタイルの使い方 〜設定・登録・解除方法〜 徹底解説！

M1/M2のMacbookで2台のモニターを繋げて、デュアルディスプレイ化する方法を解説します。

MシリーズのMacbookでは単純にアダプタを繋ぐだけだと、2台のモニターに接続することができません。

1台のモニターであれば問題なくつながるのですが、2台目を繋ごうとしても映し出されません。残念な仕様ですね...。

デュアルディスプレイ化するためには、

- 専用機器(アダプタやドッキングステーション)を購入
- ドライバをMacbookにインストール

この2つを行う必要があります。この専用機器を購入する必要があって、面倒ですし、これが地味に高いんですよね。

では解説していきます。

### 専用機器を購入

M系のMacbookでは通常2台以上のモニターを繋ぐことができません。従来のIntel Macとは違ったハードウェアアーキテクチャを持っているためです。

そこで「DisplayLink」という技術をつかてって2台目を繋いでいきます。

DisplayLink対応の専用アダプタを使うことで2台繋ぐことができます。

沢山DisplayLinkに対応した製品があるのですが、実査に自分が使用しているものや、レビュー等でMシリーズでの使用が確認できているものを紹介します。価格はバラバラですが、高いものだと色々つなげて便利なこともあるので、検討してみてください。

#### お手頃価格のBasicestのアダプタ（7,000円）
こちらは、以前自分がM1 Macbookを使っていたときに使用していたアダプタです。

[Basicest USB 3.0](https://amzn.to/42laa2x)

M2で試したことは無いのですが、DisplayLinkに対応しているものならM1/M2つながるはずなので、問題ないかとは思われます。

自分が買った当時は4,000円台だったのですが、円安等の影響もあったせいかかなり値上がりしてます。

ちなみにこの製品とは異なりますが、おそらく以下が一番最安値の商品です（M1で使用できるとコメントはありましたが、耐久性に問題があるかもとのことでした）

[WAVLINK Wavlink USB 3.0](https://amzn.to/3FCclVU)

上記は2つとも端子がUSB3.0になるので、type-cとの変換アダプタが必要になります。

####  WAVLINKのドッキングステーション（20,000円）

wavlinkが出しているドッキングステーションというものがあります。

[WAVLINK USB-C Ultra 5Kユニバーサルドッキングステーションデュアル4Kドッキングステーション
](https://amzn.to/3lnR8rI)

ドッキングステーションというのは、様々なケーブルをまとめて1本のケーブルだけをPCに接続すれば良いようにするものです。

これでモニターも充電もオーディオだってつなげちゃいます。

60Wの充電が可能になります。ちなみにM2 MacBook Airのデフォルトの充電器は67Wです。とりわけ充電には問題ないかなといった感じです。　

製品自体はM1 MacBook対応と記載されていて、コメント欄ではM2でも問題なく使えたと記載がされています。

私自身はこの製品は持っていないですが、ドッキングステーションの中では安めだと思いますし、トリプルモニターも実現可能とのことです。

ただ3ヶ月で故障した、初期不良があったなどコメントも見受けられました。1年間保証はあるようなので、安心ではありますね。

電源ボタンもあるので充電され続けるということも避けられます。

#### みんな大好きAnkerの「Anker 563ドッキングステーション」
最後はあの有名なAnkerのドッキングステーションです。

[Anker 563 USB-C ドッキングステーション](https://amzn.to/3TpdjdN)

こちらは自分も所有しているものなのですが、見た目もかっこよくて性能も申し分無いです。

特徴をざっとまとめると以下のような感じです。

- トリプルディスプレイまで可能
- 30Wと100W充電可能
- ON/OFFの電源ボタン
- M1/M2での動作確認済み

写真もとってみました。

大きさは、

**長さ × 幅 × 高さ = 17cm × 8cm × 2.4cm**

このような感じで、ドッキングステーションとしては割とコンパクトです。

![IMG 2325](//images.ctfassets.net/2kcyx6q7ww5g/6N9oP9Y6q1QBHFNiQ0Wqdp/c05ade20c39f71575988bd4e2d5160d3/IMG_2325.jpg)

重さも300gと軽めですね。

ACアダプタはかなり大きめで重厚感があり、本体と同じくらいおおきです。

![IMG 2329](//images.ctfassets.net/2kcyx6q7ww5g/3PyhL2OFx4tGEemtueSmam/a54185e253feff5e1cc86f6bab1969ae/IMG_2329.jpg)

正面はこんな感じで、左から

- USB-A 2.0 × 2
- USB-A 3.1 Gen 1
    - 30WでiPhoneとか充電できます
- USB-C 3.1 Gen 1
- オーディオ
- ★電源ボタン
    - 使用しないときはここをOFFにして、不要な過充電を防げます

**自分が繋いでる使ってる箇所は★にしています**

![a front](//images.ctfassets.net/2kcyx6q7ww5g/68TOP6W0e7W7GqpZpiLANW/eec044543aaed790105d7b5b7acccf34/a_front.png)

背面は左から

- ★PCと接続する箇所
    - 100W充電できちゃいます（すごい）
- ★HDMI
    - 4K
- ★HDMI
    - 2K
- ディスプレイポート
- LANポート
- ★ACアダプタポート

![a back](//images.ctfassets.net/2kcyx6q7ww5g/PWD41zEcwFjkdAXUdLhwl/46ce2a518c8566b89142e69727274335/a_back.png)

ACアダプタやモニター2台、PCとの接続をした場合は以下のような配線になりました（上記の★の箇所）。今回はHDMIでつないでますが、ディスプレイポートでも接続可能です。ただしディスプレイポートは1つだけです。

![IMG 2330](//images.ctfassets.net/2kcyx6q7ww5g/2sxEhJlfpokjfLGyFrvy1i/506a85ec8588a1f55b4095c834c4e7a8/IMG_2330.jpg)

裏側にはゴム製グリップがついていて、滑りにくくなってます。

![a reverse](//images.ctfassets.net/2kcyx6q7ww5g/6Utx8jriEi2Rv46fYYeku9/66e794bd0b7f6791b66303184925340f/a_reverse.png)

金額は30,000円と高額ですが、使用感・見た目共にとても満足しています。

### ドライバをMacBookにインストール

機器を手に入れたらドライバをMacBookにインストールしていきます。

[https://www.synaptics.com/products/displaylink-graphics/downloads/macos](https://www.synaptics.com/products/displaylink-graphics/downloads/macos)

ここで、ドライバ（DisplayLink Manager）がダウンロードしてダウンロードしていきます。

![スクリーンショット 2023-03-19 19.27.26](//images.ctfassets.net/2kcyx6q7ww5g/2CdaQurei21QSeL5v28rMr/cf214148bfc9373a477c65ff7a63c1b5/____________________________2023-03-19_19.27.26.png)

pkgファイルがダウンロード出来るので、展開してインストールしていけば設定完了です。

MacBook側の設定でプライバシーとセキュリティの画面収録で「DisplayLink Manager」に権限を与える必要があるので、そちらも事前に求められなかった場合は設定しておきましょう。

最終的にこのように接続ができました！遅延もなくサクサク動いています。

![dual](//images.ctfassets.net/2kcyx6q7ww5g/2kmuMLH6T4LoV5404lHJj7/c5cbd6ae1f897b237c492e1d335546b8/IMG_2332.jpg)

### 片方のディスプレイしか映らなくなった場合
片方のディスプレイが映らなくなることがあるかもしれませんが、DisplayLink Managerが起動していないことが多いです。

Mac再起動時とか起動時にDisplayLink Managerが停止するので、自動起動になっていないと片方のディスプレイが付きません。

LaunchpadからLinkManagerを起動して、

![lancer](//images.ctfassets.net/2kcyx6q7ww5g/5TZBROG9n2Oz7rzLHmCZbL/6eccb487140869f880c34d7d2d05ee09/lancer.png)

起動している状態で画面上部のLinkManagerの設定から「Launch automatically after login」にチェックを入れておきましょう。

これでMacBook起動時に自動的にLinkManagerが起動します。

![linkmanager-enable](//images.ctfassets.net/2kcyx6q7ww5g/4PWJvzDP5hOHYXxwOBwGd2/72363565ee3be60363aa36bc5bb88adb/linkmanager-enable.png)

ディスプレイポートを使用することで、トリプルディスプレイも実現できるようです。

M1/M2 MacBookにモニター2台を繋ぐ！デュアルディスプレイ化方法 Anker 563も紹介

めちゃくちゃ使い勝手の良い__DBクライアントツール「TablePlus」__の使い方について解説していきます。
ここ3年くらい使ってるんですが、デザイン性も操作性も機能性もよくてオススメです。
ショートカット操作が前提で操作していくので、それを知らないとちょっと苦戦するかもしれません。

今回は基本的な使い方、操作方法について解説していますので、最後まで見ていってください。
TablePlusのオススメ機能や好きなところも沢山あるのですが、それはまた別の機会に。

また、今後もTablePlusの便利な機能・最新機能を取り上げて行きますので、「[Implist](https://implist.dev)」をブックマークお願いします！

それでは、使い方解説していきます。

### DBへの接続
今回はMacOSでRDB（今回はMySQL）への接続を前提に話を進めていきます。

TablePlusを開くとこのような画面が表示されます。右側のエリアで右クリック->New->Connections...を押します。
![スクリーンショット 2023-03-17 1.27.44](//images.ctfassets.net/2kcyx6q7ww5g/6uH3b3zQFDaGxGLv22Phs0/043b8f5df7e49c82ac1fbd483d5b22ca/____________________________2023-03-17_1.27.44.png)

次にどのようなDBに接続するかを選択します。今回はMySQLに接続したいので、MySQLを選択してCreateを押します。
![スクリーンショット 2023-03-17 1.28.02](//images.ctfassets.net/2kcyx6q7ww5g/3lSDo2nmzZtVFAyq6yCfER/2b0e1504da7294a2e49a94b43b3ec8f9/____________________________2023-03-17_1.28.02.png)

次にDBへの接続情報が聞かれます。
![スクリーンショット 2023-03-17 1.28.30](//images.ctfassets.net/2kcyx6q7ww5g/3RTNVL6953GiujiFlL4YXr/7adc7c6298ea280c373f7f139bbf1bce/____________________________2023-03-17_1.28.30.png)

Nameは適当に「MyConnection」とかにして、UserやPasswordを入力していきます。
HostやPortの設定もありますが、これはデフォルトのままで良いです。変更しているときだけ変えましょう。

右下の「Test」を押して、以下画像のように緑色になれば接続成功です。
![スクリーンショット 2023-03-17 1.40.28](//images.ctfassets.net/2kcyx6q7ww5g/GN9y1gcH5WvAbiY1zypq5/1c5dff19176ade1ca190a66fd3aae66c/____________________________2023-03-17_1.40.28.png)

実際にConnectより接続することができます。
![スクリーンショット 2023-03-17 1.41.32](//images.ctfassets.net/2kcyx6q7ww5g/29aACD1LWQsNxxYlHlb7lw/b84cb1d8634f457fd29844011c148e69/____________________________2023-03-17_1.41.32.png)

### データベースを作る
接続はできましたが、現状データベースがないので、上のメニューのDBっぽいアイコンを押して、DBを作っていきます。

Newボタンがあるのでそちらを押します。
![スクリーンショット 2023-03-17 1.41.44](//images.ctfassets.net/2kcyx6q7ww5g/2F4wx9F9ENJvRwR1FAWhbW/94460d3e7adbf306c52745de02a5cc6c/____________________________2023-03-17_1.41.44.png)

適当に「implist_db」とデータベースの名前を入れて、EncodingとCollationは画像のように設定しました。なんでもいいですが、絵文字とか特殊文字とかを使いたければmb4を指定しときましょう。?こんなやつを入れたいとき。
![スクリーンショット 2023-03-17 1.42.07](//images.ctfassets.net/2kcyx6q7ww5g/2TGWEjNubdYaSwmmXUIMRQ/a4ed2e877cbd03b11a3b3fef3cf269e9/____________________________2023-03-17_1.42.07.png)

データベースが作成できたので、選択してOpenを押します。
![スクリーンショット 2023-03-17 1.42.16](//images.ctfassets.net/2kcyx6q7ww5g/2aSw151AqdPCuOFy5adOMh/f694d7a471246c3f96d1a621467a62f3/____________________________2023-03-17_1.42.16.png)

上部中央に接続DB情報が表示されるのですが、ちゃんと「implist_db」となっていますね。
![スクリーンショット 2023-03-17 1.42.39](//images.ctfassets.net/2kcyx6q7ww5g/2zd8sTM9qlCV7vE3NT9GGN/20baa60ee8af31ae57fd37a21df2ec77/____________________________2023-03-17_1.42.39.png)

### テーブルを作成する
まだテーブルもないので、クエリ発行して作成します。

上のメニューのDBっぽいアイコンの右隣の「SQL」を押してください。ここがSQLを直接記述できるところになります。
補完（AutoComplete）も高速に効きますし、サクサク動きます。

以下のようなCreate文を実行してきます。
```sql
CREATE TABLE `user2` (
	`id`         int NOT NULL AUTO_INCREMENT COMMENT 'ユーザーID',
	`name`       varchar(32) NOT NULL COMMENT '名前',
	`age`        int NOT NULL COMMENT '年齢',
	`created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '作成日時',
	`updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新日時',
	PRIMARY KEY (`id`)
);
```
実行するには、クエリ上にカーソルをおいて**Cmd+Enter**です。selectやupdateなどの他のクエリも同様に実行できます。
![スクリーンショット 2023-03-17 1.43.11](//images.ctfassets.net/2kcyx6q7ww5g/32yftWvPH2Qbv4B7K1V3U4/9ae64d590c339c528f3413cf512ffe1e/____________________________2023-03-17_1.43.11.png)

クエリが実行できたら、画面下のログに「Query 1 OK: 0 rows affected」このように表示されます。ちなみに実行したクエリの履歴は左メニュー上部のHistoryより確認できます。

左メニューのTablesを押して**Cmd+r**でリロードします。するとuserテーブルが作成されていることが分かります。こんな感じTablePlusではショートカットを多用します。
![スクリーンショット 2023-03-17 1.45.03](//images.ctfassets.net/2kcyx6q7ww5g/Xcr0aQRZZlHXiP0mdfvta/a1b92f7be6a3166bcfaf4e0759172bef/____________________________2023-03-17_1.45.03.png)

usersテーブルをクリックすると、テーブル内のデータが表形式で表示されます。
まだデータがないので、空ですね。

### データの追加
データを追加していきます。TablePlus上でのデータの追加はとても簡単です。

userテーブルを選択すると空の表が表示されますが、それの行を選択して各カラムの値を入れていくことができます。

idと作成、更新日時は自動的に入るようにcreate文書いているので、nameとageだけ入力しました。

すると、画像の用に追加したデータが緑色になっています。この状態だと、まだデータは追加されておらず、「追加しようとしているのは、これだよ」というふうに教えてくれます。左のuserテーブルは茶色になって、「このテーブルのデータに対して変更が加えられようとしているよ」と教えてくれます。
![スクリーンショット 2023-03-17 1.45.29](//images.ctfassets.net/2kcyx6q7ww5g/1gOOkWiNI8miOcCq7oHWs8/8f64c8626e21dd49c731075135a4943d/____________________________2023-03-17_1.45.29.png)

この状態で**Cmd+s**実行すると、以下のように色が消えデータが追加されているのが分かります。
この状態でselect文を発行したら該当のデータが取得できるようになっており、ちゃんとデータ追加されたことが確認できます。
![スクリーンショット 2023-03-17 1.45.49](//images.ctfassets.net/2kcyx6q7ww5g/EudrRCVoX0CsAAp4B7LFG/05f4e7885ec775f20686f876565bbf9c/____________________________2023-03-17_1.45.49.png)

一気にたくさんデータを追加することもできます。1行目をCmd+cでコピーしてCmd+vで貼り付けを3回行いました（idはAutoIncrementなので消しておきました）

名前と、年齢を少し変えてCmd+sを押すと一気にデータを追加できます。普段からショートカット使ってるなら直感的で非常に分かりやすい操作です。
![スクリーンショット 2023-03-17 1.46.35](//images.ctfassets.net/2kcyx6q7ww5g/798hldroGvj9NwUGgc1plb/18506f5900b2dba1f0fc0236c2547686/____________________________2023-03-17_1.46.35.png)

### データの更新
先程一番最初に追加したデータの一部をTablePlus上で更新してみます。update文を書くのは面倒ですが、TablePlusではとても簡単にデータ更新できます（大量変換はクエリ書きましょう）。

直感的に変えたいデータを変更するだけですね。名前だけをアルファベットに変えてみました。
すると追加のときとは変わって、変更箇所が茶色になりました。

追加と変更で色が分けられているのは分かり安くて良いですね。追加同様**Cmd+s**で更新が完了します。
![スクリーンショット 2023-03-17 1.47.02](//images.ctfassets.net/2kcyx6q7ww5g/4k75o8laMC03PAT9HdaO6e/2fe3c55b4c93f1c5ca1f7981cd89c9c1/____________________________2023-03-17_1.47.02.png)

### データの削除
次はデータの削除です。もう分かるかもしれませんが、削除したいデータを選択してdeleteキーを押すだけですね。

削除は赤色になります。これも**Cmd+s**で削除が実行されます。
![スクリーンショット 2023-03-17 1.47.20](//images.ctfassets.net/2kcyx6q7ww5g/6yUhUPYSGzqlTQGHevDK9m/c7ded353f461c611ce15a5ab0ba8caa5/____________________________2023-03-17_1.47.20.png)

以下のように2,3が削除されます。
![スクリーンショット 2023-03-17 1.47.23](//images.ctfassets.net/2kcyx6q7ww5g/2LJCSpjeeGzn9thdHB5wZD/c600e02a1ebdc243ed9ff0d240de517f/____________________________2023-03-17_1.47.23.png)

このようにTablePlusはGUIでの操作がショートカットを使っており直感的なのが特徴です。

簡単な操作であればTablePlus上の操作で事足りるでしょう。

### 直接クエリを書く
最初にcreate文を発行したとき同様に、SQL記述のエリアを使って、データの取得をしてみます。

![スクリーンショット 2023-03-17 1.48.01](//images.ctfassets.net/2kcyx6q7ww5g/3Ya6oC0ZBioQV4RH9cFL3H/5b7f8fab944472f7b2bc6a2e383d0496/____________________________2023-03-17_1.48.01.png)

この状態でクエリにカーソルを当てて**Cmd+enter**を押すと、以下のように表データとしてデータが取得できます。

ここでも先程同様、追加・更新・削除が可能です。

![スクリーンショット 2023-03-17 1.48.06](//images.ctfassets.net/2kcyx6q7ww5g/1FG5rxoLJu1xJHS8aoPaYP/bdd2b942ae65f3032f507df0fdc58788/____________________________2023-03-17_1.48.06.png)

長めのクエリを書いていたらコードフォーマットしたくなると思いますが、TablePlusでは**Cmd+i**でキレイにしてくれます。

![スクリーンショット 2023-03-17 1.48.54](//images.ctfassets.net/2kcyx6q7ww5g/69rWaSn3tCij8yaQH66vWC/8c9ac992e1cd02624cd80adf6ca9602e/____________________________2023-03-17_1.48.54.png)

以下のようになります。このクエリは短いですが、何行もの調査用のクエリとかを書いているとこのフォーマットはとても便利に使えます。

![スクリーンショット 2023-03-17 1.48.59](//images.ctfassets.net/2kcyx6q7ww5g/2MW2DQZOHsoBlJiqVrwtWe/d13ea52d90a0d9376efa6ab632f09ea1/____________________________2023-03-17_1.48.59.png)

今回はTablePlusについて基本的な使い方を見てきました。

今回紹介した事以外に沢山良い機能があるので、また別の機会に紹介できればと思います。

TablePlusはUIも良くて使い勝手も良いので、一度ダウンロードして使ってみてください。

公式サイト: https://tableplus.com/

※ちなみに無料版ではタブが2つまでしか開けません。
（タブはSQL記述エリアやテーブルクリックしたときに開かれます）

【TablePlusの使い方】DB接続してデータ操作をやってみる

この記事ではWindowsでWSL2とUbuntuを使って、Docker環境を構築する方法を解説します。

無事に環境構築が完了してDockerをインストールできれば、Windowsの環境を壊すことなく
PHPをインストールしたり、PHP代表的なフレームワークであるLaravelなど起動したりすることができます。

余談ですがLaravelではDockerを利用した、Sailという機能があり、MySQLやRedisなどの複数のミドルウェア追加し、Laravelとシームレスに連携することができます。
また、Sailはメールサーバーの構築やLaravel環境のセットアップ・起動がとても簡単になるので、開発者にとっては大変便利なツールです。

尚、Macユーザの場合の環境構築は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70 "Laravel9+Sail（Docker）で環境構築してみた")をご参照ください。

Windowsユーザの場合は、Dockerの起動方法とLaravelの構築方法は上のMacユーザ向けと同じなのですが、
その前の環境構築が少し複雑であるため、つまづきがちです。

そこで今回はWindowsユーザ向けの環境構築について解説していきます。

Laravelについては、Laravel9.xの超入門シリーズとして[こちら](https://implist.dev/series/laravel-beginner-introduction "PHPのMVCフレームワーク 「Laravel 9.x 」超入門　セットアップから基本構文まで")にまとめていますので、ご参照ください。

今回の対象環境は以下の通りです。

- Windows11
- PHP 8.1.13
- Laravel9

### 環境構築

手順は下記のとおりです。

1. Ubuntuをダウンロード
2. コントロールパネルから「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れる
3. x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロード
4. ダウンロードしたデータをインストール
5. Ubuntuを開いてユーザ名とパスワードを入力
6. Docker Desktopをダウンロード
7. Docker Desktopの初期設定
8. Windows Powershellでlinux環境を起動

以下順番に解説します。

#### 1.Ubuntuをダウンロード

まずはUbuntuをダウンロードします。

![【laravel9-sail-docker-windows】①ubuntuダウンロード](//images.ctfassets.net/2kcyx6q7ww5g/19Cll39UQH0vZ5ogvrks7y/05007661989d6b0cb7c826dfcd5db8f7/___laravel9-sail-docker-windows______ubuntu__________________.png)

Microsoft Storeで「ubuntu」と検索し、Ubuntuをダウンロードします。
※今回はUbuntu20.04.5 LTSをダウンロードしました。

#### 2.コントロールパネルから「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れる

次にコントロールパネル→プログラム→Windowsの機能の有効化または無効化、の順番に進みます。
![【laravel9-sail-docker-windows】②-1コントロールパネルのプログラム](//images.ctfassets.net/2kcyx6q7ww5g/7xRDFoUUdhHcphdxTa2Rvr/dc3f23ea4e9d8c775afc1114d8ed9bd0/___laravel9-sail-docker-windows______-1_____________________________________________.png)

「Windowsの機能の有効化または無効化」の画面で、「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れ、OKをクリックします。
![【laravel9-sail-docker-windows】②-3【チェック】linux用Windowsサブシステム](//images.ctfassets.net/2kcyx6q7ww5g/5yCMYeP7Wq4usBN9tRgjFV/53b7739db70687d8f2c5b9a0efd240b4/___laravel9-sail-docker-windows______-3__________________linux___Windows__________________.png)

![【laravel9-sail-docker-windows】②-4【チェック】仮想マシンプラットフォーム](//images.ctfassets.net/2kcyx6q7ww5g/7w3S6sXygrKZimqey8tjOi/340e2265040d51de334e846bd8f1efbe/___laravel9-sail-docker-windows______-4_________________________________________________________.png)

設定変更後、再起動する必要があるのでいったん再起動を行います。

![【laravel9-sail-docker-windows】②-5コントロールパネル変更後](//images.ctfassets.net/2kcyx6q7ww5g/2pPbKjvYzxXYaQOK0R1i4L/c4b35d3b6de5f6869946fee6654b189f/___laravel9-sail-docker-windows______-5____________________________________.png)

#### 3.x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロード

次に[こちら](https://aka.ms/wsl2kernel "https://aka.ms/wsl2kernelへのリンク")にアクセスしてx64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをクリックしてダウンロードします。

![【laravel9-sail-docker-windows】③-1ubuntuカーネル](//images.ctfassets.net/2kcyx6q7ww5g/1Ho39H2Q2b6NPSGnrvjuPZ/10d7b538840daefe6526cc583a6e8070/___laravel9-sail-docker-windows______-1ubuntu____________.png)

#### 4.ダウンロードしたデータをインストール

次に3.でダウンロードしたデータをインストールします。
ダウンロードしたデータを実行してNext→Finishの順番に進みます。

![【laravel9-sail-docker-windows】③-2ubuntuカーネル初期設定1](//images.ctfassets.net/2kcyx6q7ww5g/4YRYl3ECx539a7dDJnTDVV/84deac62bb4c87201e5405d357297a00/___laravel9-sail-docker-windows______-2ubuntu________________________1.png)

![【laravel9-sail-docker-windows】③-3ubuntuカーネル初期設定2](//images.ctfassets.net/2kcyx6q7ww5g/7oDZu3jfkl0iNPsNpqtU9H/caa0a6bfebf415ad28c387b9d1d07ec2/___laravel9-sail-docker-windows______-3ubuntu________________________2.png)

#### 5.Ubuntuを開いてユーザ名とパスワードを入力

次にUbuntuを開いて、Ubuntu上で使うユーザ名とパスワードを入力します。
操作によってはこのユーザ名とパスワードの入力を求められることがあるので、必ずメモしておきましょう。

パスワードを設定する際は、パスワードを入力しても表示されませんのでご注意ください。
表示されていないだけで、入力はできているので、間違いなく確実に入力するようにしてください。

#### 6.Docker Desktopをダウンロード

次にhttps://www.docker.com/products/docker-desktop にアクセスしてDocker Desktopをダウンロードします。

![【laravel9-sail-docker-windows】⑤-1docker](//images.ctfassets.net/2kcyx6q7ww5g/35JL1CEHD5OKXQPlYWDqBi/ce79c901448d53ad8c3297340becb032/___laravel9-sail-docker-windows______-1docker.png)

ダウンロードしたデータを実行し初期設定を行います。
ショートカットをデスクトップに作るために「Add shortcut to desktop」にチェックを入れてOkをクリックします。

![【laravel9-sail-docker-windows】⑤-2dockerインストール1](//images.ctfassets.net/2kcyx6q7ww5g/5BMtjXe7lKxalOcdOOeu2q/6dd3472aa9405388d0925c39e91fca70/___laravel9-sail-docker-windows______-2docker__________________1.png)

インストール後に再起動を行うとインストールが完了します。

![【laravel9-sail-docker-windows】⑤-3dockerインストール2](//images.ctfassets.net/2kcyx6q7ww5g/7yKOs77t4Lv11Lens58v8G/9e75b8f0fe0f85f62641dc8f0191b24d/___laravel9-sail-docker-windows______-3docker__________________2.png)

#### 7.Docker Desktopの初期設定

次にデスクトップに作成したショートカットからDocker Desktopを起動します。

ホーム画面右上の歯車のマークをクリックし、設定画面に進みます。

![【laravel9-sail-docker-windows】⑤-4docker home](//images.ctfassets.net/2kcyx6q7ww5g/2qM3KNR3MMzHEBD6WdAMij/bd2d5e7cdfb210ece9bbc142a3227618/___laravel9-sail-docker-windows______-4docker_home.png)

下の画像の①Resources→②WSL Integrationの順に進みます。
③「Enable integration with my default WSL distro」にチェックを入れます。
④「Ubuntu-20.04」左のボタンをクリックしてonの状態にします。

![【laravel9-sail-docker-windows】⑤-5docker setting](//images.ctfassets.net/2kcyx6q7ww5g/4bew2pqDDYSIiEZ7bV12DW/1ea70aa2a9ebfffae8a6a5713e382309/___laravel9-sail-docker-windows______-5docker_setting.png)

⑤「Apply & restart」をクリックし、再起動してDocker Desktopの初期設定は完了です。

#### 8.Windows Powershellでlinux環境を起動

次にlinux環境を起動します。

Windowsボタン→検索するには、ここに入力しますをクリックして、「powershell」と入力するとWindows PowerShellアプリが表示され、それをクリックします。

![【laravel9-sail-docker-windows】⑧-1linux環境を起動](//images.ctfassets.net/2kcyx6q7ww5g/6kGALOi1ijFzg303mERziB/80daeacc49c3b582b6292d6bdb42892c/___laravel9-sail-docker-windows______-1linux_______________.png)

上の画像のように「wsl -d Ubuntu-20.04」と入力してエンターキーを押します。

![laravel9-sail-docker-windows -2linux](//images.ctfassets.net/2kcyx6q7ww5g/3kmdYa0FeiO4GT6S6iQxSC/9103b9ef1a3f5b81ebcf62432768aa18/___laravel9-sail-docker-windows______-2linux_______________.png)

新たに表示された行の文字が緑色と青色になれば起動できている状態です。

### LaravelのSailを使ってDocker起動確認

Dockerが起動することを確認するため、Dockerfileを作成して起動してもいいのですが、
せっかくなので冒頭に説明した、「PHPのフレームワークであるLaravel」をインストールして起動してみましょう。
LaravelにはSailというツールがあり、これを使って様々なDockerコンテナを起動することができます。

結構簡単に複数コンテナ起動できます。

具体的なインストール起動方法は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#起動方法 "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

#### DB接続

DB接続は[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#db接続 "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

#### よく使うコマンドまとめ

よく使うコマンドまとめは[こちら](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70#よく使うコマンドまとめ "Laravel9+Sail（Docker）で環境構築してみた")で解説していますのでご参照ください。

Windowsを使っていて環境構築がうまくいかず困っている方は、参考にして構築してみてください！

Windowsで「WSL2+Ubuntu」を使ってDocker環境構築

本記事では、Figmaでデザインをしていく上で必須の「フレーム」の使い方について解説していきます。「フレーム」は、Figmaの肝（キモ）ともいえる機能ですので、しっかり学んで使いこなしてくださいね！

__ONE POINT 〜フレームって何？〜__

Figmaの「フレーム」を理解するには、次の２つのイメージをもっておくとよいでしょう。ひとつめは「（photoshopなどでいうところの）アートボード」の役割、もうひとつは「フレックスボックスの親要素」のような役割です。

※フレックスボックスとは、webページのレイアウトを調整するためのCSSの機能で、要素の配置を「縦並び、横並び、中央寄せ…」などに指定することができます。Figmaのフレームでは、「オートレイアウト」という機能を用いることで、フレックスボックスのような「要素の自動整列」が可能です。

こちらが実際にフレームを使って作ったWEBサイトのイメージです。各ページ黒枠で囲った部分がフレームです（HOMEのみわかりやすいよう赤枠にしてあります）。
![Figmaフレームイメージ](//images.ctfassets.net/2kcyx6q7ww5g/2UeitsQxn1GIzgSo4FVqxc/276cffbfca08d6a5f9f77e749437a50c/____________________________2023-03-12_21.24.45.png)
アートボードのようにページ全体のサイズを決めるフレームの他、各セクションの親ボックスとして、または複数の子要素をグルーピングするときの親ボックスとして使用します（※「グループ」との違いは後述します）。特に、子要素を一定の規則（縦or横or中央揃え、均等配置など）に従って配置したいときに使います。

### Figmaのフレーム　〜アートボードとしての使い方〜
まずは、「デザインファイルを新規作成」からキャンバスに移動しましょう。

この辺りがよくわからない方は、こちらの記事をどうぞ！
[Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】](https://implist.dev/entries/figma-account-and-file-management-for-beginner)

フレームを呼び出すには、ツールバーの「フレーム」を選択します。「フレーム」が選択されていると、画面右のメニューにフレームの選択肢が現れますので、ここからデザインの外枠となるスクリーンサイズを選びます。

このとき、「スマホ」「タブレット」「デスクトップ」…などのデバイス名を選択すると、さらに「iPhone14, iPhone14Pro…」などといった細かい選択肢が展開されます。PCやスマホだけでなく「用紙（A4, A5…）」などからも選択できますよ！
![Figmaフレーム呼び出し](//images.ctfassets.net/2kcyx6q7ww5g/25gRwADJcnquDA6Akgka38/077e3ad293f60d87d304088d104f79f4/Figma___________________________.png)

こういったフレームは、ひとつのキャンバスにいくつでも作成することができます。また、フレームを削除するときは、削除したいフレームが選択された状態で（選択されているフレームは青枠で表示されます）「delete」キーを押します。

#### フレームに名前つける
作成したフレームには、名前を付けることができます。キャンバス上またはレイヤーパネルで、デフォルトのフレーム名をダブルクリックすると、文字を入力できるようになります。「HOME」「ABOUT」「CONTACT」…など、名前をつけてコンテンツを整理しましょう。
![Figmaフレームに名前をつける](//images.ctfassets.net/2kcyx6q7ww5g/GRxDDPgrD64BgVgnzVD9R/8052716af5d98d7fed0490fa22fbe06d/Figma_________________________________.png)

#### フレームのサイズ変更
フレームのサイズ変更にはいくつかの方法があります。

その１「フレーム」の選択肢から変更
サイズ変更したいフレームを選択し、画面右の「デザイン」タブの「フレーム」から、先程のようなフレームの選択肢を呼び出します。この中から変更したいサイズをクリックすればOKです。
![Figmaフレームサイズを変更](//images.ctfassets.net/2kcyx6q7ww5g/6hSdzSANpYuu8oKAo92CPF/9ddb763f209f40b9baae0c0a736bd8a0/Figma_________________________________.png)

その２「フレーム」の数値から変更
サイズを変更したいフレームを選択し、画面右のW（wide=幅）、H（Hight=高さ）の数値を入力します。

その３「フレーム」をドラッグして変更
フレームの各辺（上・下・左・右）にカーソルを合わせると、矢印（「⇔」）が現れます。この状態で、その辺を引っ張る（ドラッグする）と、その方向にフレームが拡大or縮小します。
![Figmaオートレイアウト サイズ調整](//images.ctfassets.net/2kcyx6q7ww5g/2TCP8ncEBC2RaRExyYOEMN/ef937e9eb6d0d6b270569641c5872713/Figma___________________________________________.png)

デザインをしていてフレームの長さが足りなくなってしまった場合は、「その２」または「その３」を活用しましょう！

### Figmaのフレーム　〜オートレイアウトの使い方〜
Figmaのフレームには、アートボードのようなサイト全体のサイズを定義する使い方の他に、ある子要素に対する親要素（親ボックス）としての使い方があります。※フレームの中にフレームを入れる（ネストする）こともできます。

フレームが本領を発揮するのは、ある要素の「親ボックス」として「オートレイアウト」を適用するときだといえます。

…というわけで早速、オートレイアウトとはどのような機能か見てみましょう！

まず、適当なサイズのフレームを用意し、中に要素（今回は図形３つ）を加えます。そして、３つの図形の親ボックスであるフレームを選択し、画面右の「オートレイアウト」をクリックしてみましょう。

適当に並べた３つの図形が一瞬で整列しましたね！…同時に、「オートレイアウト」のメニューが現れました。ここでレイアウトの詳しい設定をしていきます。
![Figmaオートレイアウト](//images.ctfassets.net/2kcyx6q7ww5g/71hReg5Ex3ZsCLe6h1EhqT/97fe97039a0a6e2479a02461d3831ea1/Figma________________________.png)
※オートレイアウトは「中の要素をどのように並べるか」を決めるためのものです。ですので、設定したいときは、並べられる側の子要素ではなく、それらの親要素を選択しましょう。

#### オートレイアウト　〜縦並べ・横並べの設定〜
中の要素を縦に並べたい時は「オートレイアウトメニュー」で「↓」アイコンを選択します。また、横に並べたい時は「➞」アイコンを選択します。
![Figmaオートレイアウト 縦横並び替え](//images.ctfassets.net/2kcyx6q7ww5g/2p6vjL2m0GGMDcksRtyiFu/18f12a00ad5d7648b78f024663eb1975/Figma______________________________________________.png)

#### オートレイアウト　〜要素の配置の設定〜
「オートレイアウトメニュー」内のパネルでは、親ボックスのどの位置に子要素を配置するかを設定します。以下に、例として「中央」および「中央上」を設定した場合を示しました。
![Figmaオートレイアウト要素の配置](//images.ctfassets.net/2kcyx6q7ww5g/uitZolVh2KYZba0goxd8i/99dd710b2704ecb885056133af7df074/Figma_______________________________________.png)

#### オートレイアウト　〜要素間の間隔の設定〜
次は、要素間の間隔を設定してみましょう。これには、「オートレイアウトメニュー」内の要素間隔を表す数値を入力する方法と、キャンバス上で矢印をドラッグすることで間隔を伸縮させる方法があります。

また、「オートレイアウトメニュー」内の「・・・」アイコンからさらに詳細メニューを展開し、要素を「詰めて配置」するか「間隔を空けて配置」するかを選択できます。
![Figmaオートレイアウト 要素間の間隔の設定](//images.ctfassets.net/2kcyx6q7ww5g/6KdHkTRBouTyYtYBf3mSwI/c6918cb19eca11023aa41d681de9ec10/Figma____________________________________________________.png)

#### オートレイアウト　〜パディングの設定〜
「オートレイアウトメニュー」から、水平方向（「上下」）および垂直方向（「左右」）のパディングを調整することができます。なお、「上」「下」または「左」「右」のパディングを個別に設定したい場合は、「四隅が切れた四角形アイコン」から個別設定ができます。

パディングは、キャンバス上でパディング部分をドラッグすることで伸縮させることもできます。
![Figmaオートレイアウト パディングの設定](//images.ctfassets.net/2kcyx6q7ww5g/6M40nQUkxvXeQWvxz38ykR/30abb53cf65108902932520dcfece847/Figma__________________________________________________________.png)
__パディングを設定する際、「フレームメニュー」の「コンテンツをハグ」を選んでおくと、設定したパディングに合わせて親ボックスのサイズが自動調整されます。便利な機能ですのでぜひ覚えておきましょう__

#### オートレイアウト削除（解除）
オートレイアウトを削除（解除）したいときは、「オートレイアウトメニュー」の「−（マイナス）」アイコンをクリックしましょう。オートレイアウトが解除されると、子要素を再び個別に選択・移動できるようになります。
![Figmaオートレイアウト削除（解除）](//images.ctfassets.net/2kcyx6q7ww5g/5eetChYFd9PgEAnymJdES9/9d1a4c5d1881e8fb8ad864bbff5ad2e9/Figma__________________________________________.png)

### Figma フレームとグループの違い
「フレーム」と似た機能に「グループ」があります。グループもフレームも、包含する複数の子要素をまとめて移動させたり、まとめて表示/非表示の切り替えができる便利な機能です。

そして、グループとフレームは相互に変換可能です。

今、この状態でグループをフレームに変更しても、一見何も変化が起こりません。…では、グループとフレームは何が違うのでしょうか？
![Figmaフレームとグループの違い](//images.ctfassets.net/2kcyx6q7ww5g/3dpmzSfK0X31ox1TXALM5z/e815a4418868af185a8ef1712e6f12f1/Figma__________________________________________.png)

__ONE POINT　〜グループ化の方法〜__
グループ化したい要素を選択し（「Shift」キーを押しながら要素をクリックしていくことで、複数選択ができます）、「Command＋G」でグループ化できます。あるいは、「右クリック➞選択範囲のグループ化」でもOKです。

#### フレームの特徴
フレームの最大の特徴は、先程述べたような「オートレイアウト」が適用できることです。ただのグループには、これが適用できません。

また、フレームはグループと違って、それそのものが一つの要素です。つまり、フレームは単体（子要素を含まない状態）でも存在できます。

そして、中に子要素がある場合は、それらの「親ボックス」として機能します。親ボックスであるフレームには背景色もつけられますし、パディングなどの設定もできます。

#### グループの特徴
グループは、ただ単に要素をまとめたものです。

よって、フレームと違い「グループ」が単体で存在することはできません。そして、フレームのように背景色やパディングなどを設定することもできません。

この章の冒頭のように「グループからフレーム」に切り替えたときは見た目の変化がありませんでしたが、__「フレームからグループ」に切り替えると、背景色やパディングの設定は消えてしまいますので、注意しましょう__

また、フレームとグループでは「まとめて拡大/縮小」したときの子要素の動きも異なります。__フレームでは、親要素のフレームを拡大/縮小しても、フレームそのものがサイズ変更されるだけですが、グループでは中の子要素も連動してサイズ変更されることにも注意が必要です。__
![Figmaフレームとグループ_サイズ変更時の子要素の動き](//images.ctfassets.net/2kcyx6q7ww5g/7H6KQ9CwfTvanZmiSNlEND/8fc31caa7a3952570e46739d4adf8638/____________________________2023-03-11_18.40.25.png)

【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜

Laravelのマルチログインを図解しながら実装

本記事では、Figmaホーム画面から行うアカウントの管理（追加・切り替え・削除）と、ファイルの管理について詳しく解説していきます。

アカウントが登録されると表示されるこちらのホーム画面…このシンプルすぎる(?)画面に慣れるまでは、「何がどこにあるか」ちょっと戸惑うところですね。
![Figmaホーム画面](//images.ctfassets.net/2kcyx6q7ww5g/5tB3dMGWg0zuQK3AD3HW1f/a06482b94ea8e2f892710091db91809a/Figma_______________.png)

毎回ログインするとこの画面が現れるので、本記事を読んで使い方をマスターしてしまいましょう！

…ところで、Figmaのアカウントはお持ちでしょうか？まだの方は、こちらの記事で丁寧に解説しております。ぜひ、参考にしてくださいね(^^)

[『Figmaアカウント作成と初期設定を丁寧に解説！』](https://implist.dev/entries/figma-how-to-create-account-initial-setting)

__ONE POINT__

画面中央の一番目立つところに配置されているのは、FigJamのテンプレートです。FigJamをしばらく使用する予定がない場合は、右上のバツ印から非表示にしておきましょう。

![FIgJamテンプレート紹介](//images.ctfassets.net/2kcyx6q7ww5g/3f4edGjXwM68wBm5Pjqg4S/71de4990a56c46f5ba559546d2ad3ff2/FIgJam___________________________.png)

なお、FigJamのテンプレート一覧は、「FigJamファイルを新規作成」→「（画面左）その他のテンプレート」から呼び出せます。

### Figma複数アカウント管理（追加・切り替え・削除）
Figmaでは、複数のアカウントを持つことが可能です。ここでは、複数のアカウントを持つ場合のアカウント管理方法について解説します。

#### Figmaアカウントの追加
アカウントを追加するには、以下の順にクリックします。

1. 「アカウントアイコン（ホーム画面右上）」
2. 「アカウントを切り替える」
3. 「アカウントの追加」

すると、アカウント登録画面が現れますので、こちらから新たなアカウントを追加できます。

![Figma アカウントの追加](//images.ctfassets.net/2kcyx6q7ww5g/8oOjJFbbGISOMJuLLSSur/fbba36ba3d22e65f5c869938afcd4c0e/Figma_________________________.png)

#### Figmaアカウントの切り替え
アカウントの切り替えには、２つの方法があります。

一つ目は、先ほどの「アカウントの追加」と同じ画面左上のアカウントアイコンから行う方法です。

1. 「アカウントアイコン（ホーム画面右上）」をクリック
2. 「アカウントを切り替える」をクリック

登録中のメールアドレスを選択すると、アカウントが切り替わります。
なお「チェックマーク」が入っているメールアドレスが、現在使用中のアカウントです。

![Fimga アカウント切り替え](//images.ctfassets.net/2kcyx6q7ww5g/duo9Sp4G7xOiyjM6GR6Ld/3c9b3525de8e52a6a2d09df019bf8a8a/Fimga____________________________.png)

二つ目は、画面左上のアカウント情報から切り替えを行う方法です。

画面左上の「ログイン名・メールアドレス」をクリックすると、プルダウンメニューが開き、登録済のメールアドレスとアカウント名が表示されます。切り替えたいアカウントをクリックすると、アカウントが切り替わります。

なお、こちらも「チェックマーク」が入っているアカウント名が、現在ログイン中のアカウントです。

#### Figmaアカウントの削除
Figmaアカウントの削除は、以下の方法で行います。

1. （アカウントが複数ある場合）削除したいアカウントに切り替える
2.  ホーム画面右上の「アカウントアイコン」から「設定」をクリック
3. 設定メニューを一番下までスクロールする
4. 「アカウント削除」をクリック
5. 案内にしたがってアカウントを削除する

![Figma アカウント 設定](//images.ctfassets.net/2kcyx6q7ww5g/3K1lpXrKOgg2HXhvOMDRmg/8839328fb0bbcafac4ffff2ff019eee1/Figma_______________________.png)

![Figma アカウント削除1](//images.ctfassets.net/2kcyx6q7ww5g/4EqkPhMHj7xXC5iimfn372/28d8c294da8b634a1f594700f5d5000c/Figma______________________1.png)

「アカウントを削除」の文字をクリックすると、すぐにFigmaアカウントが削除されるわけではありません。次の画面の入力欄に、「自分のアカウントを削除する」と入力の上で「アカウントを削除」ボタンをクリックすると、アカウントが削除されます。

![Figma アカウント削除2](//images.ctfassets.net/2kcyx6q7ww5g/3CKplcFpRfitRhQwmjKmrd/806e577bd2c40099df7bd4891288d370/Figma______________________2.png)

### Figmaのファイル管理
Figmaの無料プランでアカウントを作成した際、「下書きは無制限、ファイルは３つまで」という表記に、ちょっと混乱しませんでしたか？…これは、「下書き用ファイルは無制限、プロジェクト内のファイルは３つまで」という意味です。

__ONE POINTファイルとは?__ 

Figmaのファイルには「デザインファイル」と「FigJamファイル」の２種類があり、デザインファイルではワイヤーフレームやWEBデザインが、FigJamファイルではオンラインホワイトボードを用いたブレインストーミングなどができます。

![Figma ファイル説明](//images.ctfassets.net/2kcyx6q7ww5g/4odqVKExk35f1VJhPGX76u/8168446addb3dff458e14c0063e52bcb/Figma___________________.png)

WordやPowerPointに例えると、「名前を付けて保存」できるひとまとまりがファイルです。

このファイルをFigma内のどこに作成するかが、料金プランの制約にかかわってくるのです。

「下書き（フォルダのようなもの）」内に作成するファイル（無制限に作れる）は、自分が編集者として管理する時に使います（閲覧者を招待することはできます）。

一方、チームで制作（編集・閲覧）を行う場合は、このファイルを「プロジェクト」に移行する必要があります。この「チームのプロジェクト」内のフォルダ数については、契約したプランによって制限がかかります。

以下より、Figmaにおけるファイルの作成方法や管理について詳しくみていきましょう！

#### Figmaの下書きファイル
ホーム画面で「下書き」が選択されている状態で、以下の破線枠内に表示されているのが下書きファイル（ドラフトともいう）です。

アカウントを作ったばかりでも、デフォルトでワイヤーフレームなどいくつかのファイルが用意されています。

__この中には、無料プランでいくつでもファイルを生成することができます。__

![figma ファイル](//images.ctfassets.net/2kcyx6q7ww5g/3Zi6cE1w8s15xxSxolJ5b8/045dec637cf38670fd93d405700395bd/figma_____________.png)

※「すべてのファイル」にはFigmaファイルもFigJamファイルも入っています

試しに、「下書き」内のファイルをひとつクリックしてみましょう（こちらは、デフォルトで用意されているワイヤーフレームです）。

このように、「ファイル」にはWEBサイトひとつ分のデザインが格納されています。なお、ひとつのファイルには複数の「ページ」を設けることが可能です。

![Figma ワイヤーフレーム](//images.ctfassets.net/2kcyx6q7ww5g/6HXncgD87ImnvCLkyygVai/fa112b513c628dcb93cf3d01f643a1b9/Figma_________________________.png)

なお、ホーム画面に戻るには、画面左上の「Figmaアイコン」→「ファイルに戻る」を選択します（デスクトップアプリの場合は「ホームボタン」）。

#### Figma下書きファイルの新規作成
下書きファイルを新規作成するには、「下書き」が選択されている状態で、「figmaでデザイン」もしくは「FigJamファイルの新規作成」をクリックします。

![Figma ファイルの新規作成](//images.ctfassets.net/2kcyx6q7ww5g/13jHFO3t3r50Qb58URa7Wm/156b5349614e3c35bf3372ed3713d13a/Figma____________________________.png)

「新規作成」すると、自動的にファイルがひとつ生成されます。

保存はオートセーブですので、特別な操作をする必要はありません。「新規作成」した後にホーム画面に戻ると、今作成したファイルが、「すべてのファイル」に追加されているはずです。

#### チームのプロジェクト
では次に、ホーム画面から「下書き」ではなく「チームのプロジェクト」を選択してみましょう。すると、メイン画面の表示が切り替わりましたね。これが「チームのプロジェクト」のページです。

ここでも同じように、「Figmaのデザイン」「FigJamのホワイトボード」のファイルが作成できます。そして、チームのメンバー全員に、ファイルへのアクセス権があります。

![Figma チームのプロジェクト](//images.ctfassets.net/2kcyx6q7ww5g/7qR1wQXvVSEreEfIc8Oq79/0b88fb1649cb8c48f41a6a0966057583/Figma_____________________________________.png)

__ただし、スターター（無料）プランでは、作成できるプロジェクト数は１つまで、Figmaデザインファイル３つまで、FigJamファイル3つまでとなっています。__

### Figmaホーム画面のカスタマイズ
最後に、ホーム画面のカスタマイズ方法について解説します。これは、「下書き」「チームのプロジェクト」共通の操作です。

#### ファイル表示をカスタマイズ
ファイルが増えてきたときは、「すべてのファイル」を「デザインファイル」または「FigJamファイル」に切り替えることができます。

こうすることで、「デザインファイルのみ表示」または「FigJamファイルのみ表示」として、目的のファイルを見つけやすくなります。

![FIgma ファイル表示選択](//images.ctfassets.net/2kcyx6q7ww5g/1vQBso9IvSoc5MnX1EEQja/c109a9af8fe906608aa60f982a291176/FIgma_________________________.png)

ファイルにカーソルを合わせると「星印」が現れるので、これをクリックすることで「ファイルのお気に入り登録」ができます。すぐに見つけたいファイルは「お気に入り」に入れておきましょう。

![お気に入り登録](//images.ctfassets.net/2kcyx6q7ww5g/4nVmuvcG7bUIdMKDN3r7os/2f9bba039b1ef898be49fee80e5e4226/_____________________.png)

また、ファイルの並び順を「アルファベット順」や「作成日順」に並び替えることができます。

![Figma ファイル並び順](//images.ctfassets.net/2kcyx6q7ww5g/7BoulkWtDwVM4qVPyCN26m/9c1e10eb07c0cd4bcf1278981c1fab80/Figma_________________________.png)

さらに、ファイルの表示の仕方を、「大型アイコン」から「文字表記」に切り替えることができます。

![figma 表示切り替え](//images.ctfassets.net/2kcyx6q7ww5g/3VKfREbvNLKZDSR54GazVK/408a8ff20205dc838c435f2b263af9d4/figma___________________.png)

#### Figma画面をダークモードにする
Figmaホーム画面右上の「アカウントアイコン」から、「テーマ」を選ぶと作業画面をダークモードにすることができます。

![Figma ダークモード](//images.ctfassets.net/2kcyx6q7ww5g/3lWMgYD09WjeIJAWsXnnYn/c7bb927fec7926ea4be507ffad31db7c/Figma_________________________.png)

今回は、以上です。快適な環境で、Figmaライフを楽しみましょう！

Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】

みなさんChatGPT使ってますか？

自分は日々めちゃくちゃ使ってます。

よくわからないバグを聞いたり、コードをちょっと書いてもらったり、サーバーの設定について聞いたりとChatGPTに至れり尽くせりな毎日を送っています。

2023年2月現在、ChatGPTの話題で日本全国、世界中で盛り上がりを見せていますね
2023年1月にはアクティブユーザーが1億を突破し、間違いなく今最も熱い技術の1つです。

ChatGPTは「超高性能な対話型AI」で、ありとあらゆる話題について回答してくれます。

今まで人は何かを知りたいとき、Googleで検索したり、本を読んだりしていましたが、ChatGPTに聞くだけで、望みの回答が帰ってくる、そんな夢のような世界に突入しつつあります。

この技術のおかげて、必要なくなる業務がたくさん今後出てきそうです。自分もエンジニアですが、初めてChatGPTを使ったときは「エンジニアいらなくなるんじゃね？」って思っちゃいました。

ChatGPTはOpenAIというAI研究組織によって開発され、あのMicrosoftから巨額の投資を3回も受けています。またそれだけではなく、今後何年間に渡り数千億円規模の投資を行うと発表しているようです。

[https://www.watch.impress.co.jp/docs/news/1472714.html
](https://www.watch.impress.co.jp/docs/news/1472714.html)

そんなChatGPTに対抗してGoogleが「Bard」という会話型AIを発表しました。
今回は、そんなChatGPTとBardについて、違いや将来性について話していきます。

### ChatGPTとBardの違い
残念ながら、この記事執筆時点（2023/2/12）現在ではBardは正式リリースされておらず、一部のテストユーザーにのみ公開されている状態です。

なので、BardについてはGoogleが発表している情報や、こうなっていくだろうという予測を元に違いを見ていきます。Bardがリリースされた際に、また正確な情報を配信していきます。

#### 創業企業の違い
![ceo-g0f0801f09 640](//images.ctfassets.net/2kcyx6q7ww5g/4q3h0iaP5hpQRSlROcJbxV/c57d8e44772dca9de5dd053565fd58f6/ceo-g0f0801f09_640.jpg)

まずは創業企業や創業者等の違いです。

ChatGPTは非営利法人OpenAI IncのAI研究所OpenAIによって開発されました。

複数人の共同創業になりますが、その中にはあの有名なイーロン・マスクも含まれています。
また、現在は冒頭に言ったMicrosoftが多額の出資をしていたり、OpenAI株の49％をマイクロソフト保有していたりします。

一方BardはGoogleのものですね。Googleはラリーペイジが創業したものの、現在のSEOはスンダー・ピチャイとなっています。

スンダー・ピチャイがBardをChatGPTの対抗馬として、2023年2月に発表しました。現段階では試験版で一部のテストユーザーのみが使っているようです。

Googleは言わずとしれた大IT企業ですが、OpenAIもバックにMicrosoftがついているので、

Google vs Microsoftという構図になっていますね。

非常に面白い戦いになりそうです。

#### 学習データの鮮度の違い
![chart-g5603cff60 640](//images.ctfassets.net/2kcyx6q7ww5g/1Ylm7Tt7vq0ALtlMSp55xW/830072d6b68c423254e533f7b48d5321/chart-g5603cff60_640.jpg)
ChatGPTは2021年12月末までのデータを学習に使っており、それ以降のデータが存在しないため直近の話題には対応できていません。

2022年に起こった出来事や、対抗馬であるBardのことも知らないということになります。

試しにChatGPTにBardについて聞いてみましたが、以下のような回答となりました。

![スクリーンショット 2023-02-12 23.05.42](//images.ctfassets.net/2kcyx6q7ww5g/6sGaQ7lnmIgHH7lGGUrDXz/861dbb913f4a57a0df2cd05f59964f52/____________________________2023-02-12_23.05.42.png)

一方Bardに関しては、搭載されている対規模言語モデルのLaMDAで2023年1月までのデータが学習されていると言われています。

なので鮮度的に言うとBardのほうが良いと言えるでしょう。

ただ、ChatGPTもBardも今後学習は続けていくはずので、その差はほとんど無くなっていくことが予測されます。

#### 正確性の違い
![puzzle-ge224c44ce 640](//images.ctfassets.net/2kcyx6q7ww5g/1XivFHB8SDJJgE2GrAIANs/16e79cd23096ec4d2d5f3bd29c4e3384/puzzle-ge224c44ce_640.jpg)
これらの対話型AIは過去のデータ大量に学習しており、非常たくさんの情報が入っているのですが、必ずしも正確で正しい回答が帰ってくるとは限りません。

ChatGPTは元から、

「間違った回答となる可能性がある」ということを名言しており、自身のTwitterで重要な決定で頼るべきではないと言っています。

[https://twitter.com/sama/status/1601731295792414720
](https://twitter.com/sama/status/1601731295792414720)

正確性などについては、今後もたくさんやるべきことがあるという風に考えているようです。

実際に的はずれな回答となる場合もちらほらあり、しっかりと回答に対して正しいか間違っているか判断出来る能力が必要になります。

ただ、厄介なことに、それっぽく回答してくるので判断を鈍らされる人が出てきても不思議ではないでしょう。

Bardはというと、正確であるかというとそうでもありません。

実際に公開プレビューの際に、間違った回答をしてしまい、Googleの時価総額が15兆円ほど下落したというニュースもありました。

正確性の違いに関しては、現時点ではどちらが優れている劣っているは無いようです。

両者ともに自信たっぷりに誤ったことを言ってくる場合があるので、やはり鵜呑みにしないことが重要です。

ChatGPTの話ですが、回答に対して間違っていることを指摘したら、
律儀に誤って違う回答をしてくれるので可愛らしいところも持ち合わせています。

その回答も違うことがあったりするんですけどね...。

と入っても回答の文章としては、かなりの正確性で全く違和感がない文章です。もしChatGPTを使ってない方がいたら、ぜひ使ってみてください。驚愕すると思います。

#### 派生サービスの違い
現在ChatGPTはMicrosoftの検索エンジンであるBingに試験登載されています。ただ、現時点で任意の検索は出来ず、サンプルの検索が出来るだけになっています。

![スクリーンショット 2023-02-12 23.35.28](//images.ctfassets.net/2kcyx6q7ww5g/3DCQz4SKimeh7dXSSZb0mh/b4e57a8e5dd193253bc82f6fe3b2dc78/____________________________2023-02-12_23.35.28.png)

上記のサンプル質問をしてみると、以下画像のような回答が得られました。画面右側です。

![スクリーンショット 2023-02-12 23.35.56](//images.ctfassets.net/2kcyx6q7ww5g/1Sa0a1Ug35z4966j2LOwDG/6a2c30747fbe4710e392a663e03e461b/____________________________2023-02-12_23.35.56.png)

BingにはGPT-4が採用されているらしく、高速に動作するとのことです。
現在一般では使えないですが、試験的に使用可能になるらしく、bing検索から「順番待ちリストに参加」することで、参加申請ができるようです。

参考: https://app-story.net/bing-waiting-list-application/

OpenAIが自ら作っているわけではないですが、いろいろな企業もChatGPTを活用したサービスを開発、発表しています。

- 記事内容を生成するサービス
- 回答生成チャットサービス
- 議事録生成サービス

Bardでは、

Bingと同様にGoogle検索にBardを活用すると発表しています。
発表では以下のような例がでてました

「星を探すのに、適切な星座は？」

こういう曖昧な検索をしたとします。何を持って適切というのかは検索をした人によって違いますよね。何を持って探すのかにも依存します。

これをBardを使った検索であれば、以下のように形をもとにしたり、輝きを元にしたりしてその人にあった提案をしてくれます。

![スクリーンショット 2023-02-13 0.07.26](//images.ctfassets.net/2kcyx6q7ww5g/z6QVUOjy4QjeTdkktibK6/1b75ba75eedfd55e912a733d3344d692/____________________________2023-02-13_0.07.26.png)

そうすれば、検索者は「そういう観点があるなら、自分はこっちを重要視するな」という風にAIと対話しながら検索結果にたどり着くことが出来ます。これは便利そうですね

また、Googleは様々なプラットフォーム保持しているのでそれらと連携していくようです。

Youtubeの動画を使ったり、Google画像でたくさんの画像をもとにBardと連携したり、
GoogleMapを使ってより制度の高い、ルート情報を検索したりしていくようです。

![youtube-ge6fcb851d 640](//images.ctfassets.net/2kcyx6q7ww5g/3Qc4dLvDTGS86B4RKG23GY/9b408f2293bf3e252fd829b2cf5536f3/youtube-ge6fcb851d_640.jpg)

Bard発表の資料で以下のようなスライドがありました

![スクリーンショット 2023-02-13 1.28.25](//images.ctfassets.net/2kcyx6q7ww5g/5fY8b8BnbgZJIDh1l05BoO/c67365a6d937836e4037fc9764ad7d72/____________________________2023-02-13_1.28.25.png)

「見えるものは、すべて検索出来る」とったような意味です。それを体現するように発表では、カメラを起動して見えている風景からどいう建物なのか、場所なのかを把握することが出来ていました（動画から場所特定されるのは怖いですが...）。

また、画像からそれの色違いのものを探したりなどもしていました。テキストとあらゆるメディアが連携してくようなイメージですね。

テキストでうまく表現できないけど、検索できない場合にこれらの技術は非常に役立ってくるでしょう。画像や、動画、音声を組み合わせ、従来のテキストに知らばれない検索が可能になります。

ChatGPTは現在とても盛り上がっていますが、知らない人も多いのも事実です。自分たちのようなエンジニアであればホットな話題なので職場などではChatGPTめちゃくちゃ使っているんですが、ITとあまり関わりがない業界であれば知らない人も多くいます。

この点Googleはプラットフォームが充実しており、多種多様な年代、業種、属性の人が利用してます。
Google検索は息をするかのようにみんな使ってますし、YoutubeもYoutuberのおかげで若者を中心に非常に利用されているプラットフォームです。

これらの成熟したプラットフォームにBardが組み込まれたら、

「なんか知らないけど、すごい便利機能がついた！」ってなって、ChatGPTに到達するまでにGoogleで満足する人が増えそうな印象です。

![business-g3be069b1c 640](//images.ctfassets.net/2kcyx6q7ww5g/YOFOLJw0jXqv4ctL85Ahh/259d8eb71be52d823fb244255b208219/business-g3be069b1c_640.png)

もちろんChatGPTにはMicrosoftが付いてるので、Windowsというプラットフォーム上でなにかしてきそうではありますが（Bingは知名度はそこまで無いですが、すでに導入しかけていますしね）

#### サービスが稼働するクラウドベンダーの違い
最後になりますが、クラウドベンダーについて見ていきましょう。

現在サーバーのクラウド界で、大きなシェアを誇る企業が3つあります。

その3大クラウドベンダーが以下です

- シェア1位: AWS(Amazon)
- シェア2位: Azure(Microsoft)
- シェア3位: GCP(Google)

![bou](//images.ctfassets.net/2kcyx6q7ww5g/78gRLmxsEQOMhblhxhN9QR/2282dc2c1199537dfdae2666c386315e/bou.jpg)

ChatGPTはMicrosoftに多額の出資を受けており完全なるバックアップ体制が取られています。
つまりMicrosoftが保有するシェア2位のAzureのインフラが味方になるということです。

これはかなり期待が持てそうですね。

またAzureはシェアがかなり拡大しており、3位のGCPには大差をつけており1位のAWSに迫る勢いです。

![ore](//images.ctfassets.net/2kcyx6q7ww5g/2AMxvDdwvU1IfacGh43yCr/a48d8cca0db136728ef61ba82a6cc6d7/ore.jpg)

BardはというとGoogleなのでGCPですね。シェアは成長しているようですが、成長気味ではあるもののAzureほどではないです。

シェアが拡大しているからと言って、AIの性能が向上するかと言われればそんなことは無いと思いますが、一つの違いとして紹介しました。

### ChatGPTやBardなどの対話型AIの将来性について
ここまでChatGPTとBardについて見てきましたが、将来性についてはどうでしょうか？

![woman-g5fd5cb6b7 640](//images.ctfassets.net/2kcyx6q7ww5g/CffIIyPbRWqD5dHbo4Mh0/0ad975fca04a2fc049d622b2a3e98442/woman-g5fd5cb6b7_640.jpg)

どちらも超大企業がついているということで、今後成長するAIであるのは間違いないですが、どちらかというとBardが今後の覇権争いには優勢になるのではないかと思われます。

現時点ではChatGPTが独占状態ですが、なんといっても天下のGoogleなので様々あるプラットフォームを活用してBardをはやらせるか、Bardと認識させずに便利なものという位置づけでGoogle自体をブラッシュアップしていくのではないかなと思われます。

両者が良い感じて競争することで、技術が更に発展し今後より良いものが使えるのは非常に楽しみですね。

エンジニアである自分も普段からChatGPTを使ってますし、周りのエンジニアやスタートアップ企業なども目をつけている分野なので、今後ますます期待が出来ます。

ただし、正しくないことをそれっぽく行ってくるとろこがあるので、それを見極める能力が必要になります。

鵜呑みにするのだけは避けましょう。上手に利用すると生産性やクリエイティビティが向上するので、どんどん使っていきたい技術ですね。

Bardが一般公開されたら、また細かい点の紹介など行っていきます。

Implistではエンジニアとして「個人開発」や「副業」を行うための知識やコツ、スキルアップに役立つ情報を配信しています。

[Implistとは？エンジニアスキルを学習し個人開発・副業を楽しむ！
](https://implist.dev/entries/about-implist)

また今回みたいにトレンド技術の比較やおもしろ技術の紹介なども行っていきます。ブックマークや応援をよろしくお願いいたします！

覇権争い勃発！「Bard」と「ChatGPT」の違いと将来性について

Laravelではたくさんの認証の仕組みがあるのですが、その中でも一番スタンダードでユーザー登録機能やログイン機能がデフォルトでついている「Breeze」というものを使って、認証機能を作っていきます。

こちらが公式ドキュメントです▶[Laravel Breeze スターターキットドキュメント](https://readouble.com/laravel/9.x/ja/starter-kits.html)

Breezeを使うことで、認証に必要なルーティングやコントローラー、ビューなどが自動生成され、自分で実装する必要がありません。

もちろんカスタマイズすることも出来るので、認証時にあれこれチェックしたいなどあれば手を加えてみても面白いですよ。

Laravelをまだインストールしていない方は以下を参考にインストールしておいてください。

[Laravel9+Sail（Docker）で環境構築してみた](https://readouble.com/laravel/9.x/ja/starter-kits.html)

インストール時にデフォルトで作成されているユーザーモデルや、userテーブルなどを使用しようするので、初期状態が一番操作しやすいと思います。

### Breezeのインストール

まずはsail up。

sail upしてLaravelやMySQLなどのDockerコンテナを起動しておきましょう。

```
./vendor/bin/sail up 
```

バージョンが古いとBreezeのインストール後うまく機能しない場合がるので、composer updateを行って起きます（たまにバージョンのコンフリクトで怒られます）。

docker compose経由でコンテナ内のコマンドを実行しています。先に紹介した記事で環境構築した方は、以下の様にコンテナ内のコマンドを実行できます。

composer updateします。
```
docker compose exec laravel.test composer update
```
**docker compose exec laravel.test**をエイリアスと定義しておくとコマンド実行時便利です。

breezeのライブラリインストール
```
docker compose exec laravel.test composer require laravel/breeze --dev
```

breezeのセットアップ
```
docker compose exec laravel.test php artisan breeze:install
```
このコマンドを実行すると色々とインタラクティブで聞かれます。

![スクリーンショット 2023-02-11 23.10.17](//images.ctfassets.net/2kcyx6q7ww5g/3K429R0mbbTYT9UMXIoNmJ/514bd092ec3b11891fd7660d204df89d/____________________________2023-02-11_23.10.17.png)

今回はBladeで画面を作成していきたいので、最初の質問は0を指定します。

2番目の質問はダークモードにするかきかれています。かっこいいのでダークモードを選択するべくyesを入力します。

3はテストのツールに聞かれているんですが、これは今回どうでもよいのでnoとしておきましょう。

インストールが完了すると以下のように、ファイルがたくさん追加編集されているのが分かります（git statusです）。

![スクリーンショット 2023-02-11 23.13.34 1](//images.ctfassets.net/2kcyx6q7ww5g/7JQfil4mBYiSjWdFqTvs9u/aac99d9afbef28cf4c051ee9733fa2e0/____________________________2023-02-11_23.13.34_1.png)

追加編集されたファイルを眺めると、ルーティングが変更されていたり、ビューのbladeファイルが沢山追加されています。これで画面が構成されているようです。

また、デザイン周りで言えばtailwindが追加されています。エンジニアに人気のtailwindを入れてくれているのは結構嬉しいですね。

Tailwindはについては以下が参考になりますよ。

[■Tailwind環境をシンプルに構築](https://tech-lab.sios.jp/archives/31667)

テーブル作成
```
docker compose exec laravel.test php artisan migrate
```
データに関してはBreezeで追加されたものはありません。Laravelインストール時にデフォルトで入っているユーザーテーブルを使って登録やログインが可能です。楽ですね。

すでにあるアプリケーションにBreezeを入れようとした時、ルーティングのキャッシュが残っている可能性があるので、以下実行しておくと良いです。
```
docker compose exec laravel.test php artisan route:clear
```

あと少しです。tailwindはnpmを使ってビルドして上げる必要があるので、以下を実行しましょう。
```
docker compose exec laravel.test npm install
docker compose exec laravel.test npm run dev
```

これでtailwindがビルドされていい感じのデザインになります。tailwindビルドしなくてもログイン機能等に機能的な問題はないのですが、デザイン0の質素な画面になるのでモチベーションが下がります。

これで準備は全部おわりなので、「[http://localhost:80](http://localhost)」にアクセスしましょう。

すると右上にRegisterというリンクが出来ています。これを押すと

![スクリーンショット 2023-02-11 23.28.59](//images.ctfassets.net/2kcyx6q7ww5g/4EyOzeoUWAFvhfQZWbdhc5/8fe6c660c171a00ed9a1a3df8439d3f7/____________________________2023-02-11_23.28.59.png)

ユーザー登録画面に遷移します。ここで必要な情報を適当に入力して、REGISTERを押します。

![スクリーンショット 2023-02-11 23.23.37](//images.ctfassets.net/2kcyx6q7ww5g/44eEpBcPb6MS6AXSrP2YBt/87ef5ee9c03e5182e4bed12fb390332c/____________________________2023-02-11_23.23.37.png)

登録が完了したら以下のような画面になります。
これでユーザー登録が完了して、ログインもしている状態になります。

右上を見るとtestというユーザー名が表示されているので、ログインしていることが分かります。右上のtestを押すとログアウトボタンが出てくるので、ログアウトしてみてください。

![スクリーンショット 2023-02-11 23.23.44](//images.ctfassets.net/2kcyx6q7ww5g/51LlLTsWA2KdFnZ0Da9MCp/8f39b82102bc62c1f71d37b032b11312/____________________________2023-02-11_23.23.44.png)

またTOPに戻るので、右上のLog inを押して、ログインページに遷移します。

先程登録したメールアドレス、パスワードを入力してログイン出来ることを確認しましょう。

![スクリーンショット 2023-02-11 23.24.01](//images.ctfassets.net/2kcyx6q7ww5g/ub77b1r1UftpODa3lwKbq/20b76c3717f242e9c9e25d5c113501a2/____________________________2023-02-11_23.24.01.png)

これでユーザー登録、ログイン機能の実装ができました。

実装といっても、勝手にコードは生成されるので、コードとしては何ひとつ記述していません。

次からログイン画面を変更してみたり、ログイン中のユーザー情報を取得して、他のデータと紐付けたりして、よりアプリケーションっぽいものを作っていきます。

認証機能が使えるようになったら、様々なアプリケーションが作れるようになるので、開発の幅がぐっと広がります！


Laravel Breezeで「ユーザー登録・ログイン」認証機能を作る！

本記事ではFigmaのアカウント作成と初期設定について解説していきます。
まずは、こちらの公式サイトにアクセスしましょう。

日本語版　[https://www.figma.com/ja/](https://www.figma.com/ja/)（※日本語版は2022年にリリースされました！）

英語版　　[https://www.figma.com/](https://www.figma.com/ja/)

### Figmaアカウントの作成
Figma公式サイトにアクセスすると、次のようなページが現れます。アカウントを作成するには、「Figmaを無料で体験する」または「サインアップ」のどちらかをクリックしましょう（どちらのボタンをクリックしても、同じページに遷移します）。
![figma_サインアップ](//images.ctfassets.net/2kcyx6q7ww5g/64Eech2YM1QHWkJNiApi0c/ddeaa85c85ea1e0eb6d7ede7fe9a3c3d/figma______________________.png)

次の画面では、「Googleで続行」または「メールアドレス＆パスワード」の設定でアカウントが作成されます。
![Figma_アカウント登録](//images.ctfassets.net/2kcyx6q7ww5g/7IyibY2EF9USnl7AcIaEd/5739a9c255f290af496065cce04a0747/____________________________2023-02-09_0.02.13.png)

__「Googleで続行」場合__

「Googleで続行」をクリックします。アカウント（gmailアドレス）が複数ある場合は、それらの選択肢が現れますので、いずれか1つを選びましょう。アカウントを選択すると、そのgoogleアカウントでfigmaにログインすることになります。

__「メールアドレス＆パスワード」の場合__

メールアドレスとパスワードを入力します（パスワード確認用の入力欄はありませんので慎重に入力しましょう）。すると登録したメールアドレスにメールが届きますので、「メールを確認する」ボタンをクリックします。
![Figma_メールアドレスを確認する](//images.ctfassets.net/2kcyx6q7ww5g/5TlCwgPFHl7AiTCCwWdkDw/7b71175a299a37f05d1f0e3c5ccf5a9e/____________________________2023-02-09_0.02.45.png)

※元が海外のサイトなので、たまに日本語に違和感を覚えることもありますが特に心配入りません。

「Googleアカウント」もしくは「メールアドレス＆パスワード」を登録すると、次の画面に遷移します。入力欄を埋め、チェックボックスを確認しましょう。
![Figma_自分の情報の入力](//images.ctfassets.net/2kcyx6q7ww5g/5ZSAjWopAsWNSSz1uPvfe1/6ac4cbc5f2c162f00b0bffb161db614e/____________________________2023-02-09_0.04.02.png)

1. 名前の入力　※あとから変更できます
2. 「どのような仕事ですか？」に選択肢で回答
3. 「figmaの使用目的」に選択肢で回答
4. メールによる「お知らせ」を受け取るかどうかに回答（受け取りたくない場合はチェックを外す）。

全てに回答し、「アカウントを作成」をクリックすれば完了です。
※選択肢の順番は画像と異なる場合もありますが、選択肢の内容は同じです。

アカウントを作成するとすぐに画面が移動し、初期設定を求められます。矢継ぎ早に選択肢が出てくるので少々戸惑うかもしれませんが、焦らず読み進めてくださいね(^^;)。

### Figma初期設定
アカウントを作成するとすぐに、以下の画面が現れ、「チーム名」を入力するよう求められます。
![Figma_チーム名を決める](//images.ctfassets.net/2kcyx6q7ww5g/ucmYiDtxxRlraNEKC6yBk/aad92dd517f976afd81bc2eafc2464e8/____________________________2023-02-09_0.14.16.png)

特に共同で製作するメンバーがいない場合は、「後で」をクリックしましょう。チームおよびチーム名は後でも決められますし、変更もできます（後で決める方法は、追って解説します）。

次は、「チームのプランを選んでください」と表示されます。この料金プランも、後で変更できますので、とりあえず無料の「スタータープラン」を選択しておきましょう。
![Figma_チームのプラン](//images.ctfassets.net/2kcyx6q7ww5g/34wsFhruHrtaCwumhDGOAQ/16712eb6d2e9443c6c3c40d35bb60e7b/____________________________2023-02-09_0.14.26.png)

プランの選択が終わると、「まずどちらの作業を行いますか？」と訊かれます。どちらを選択しても、「Figma↔︎FigJam」は簡単に行き来できますので心配ありません。
![Figma_まずどちらの作業を行いますか？](//images.ctfassets.net/2kcyx6q7ww5g/4WJWq5fwB6UCkxeNfT3cgI/74f4275db4f5886aa13f11d47f5dd9d9/____________________________2023-02-09_0.14.33.png)

迷ったらとりあえず「テンプレートを使用しない」でOKです。ちなみに、「テンプレートを使用しない」を選択すると、ホーム画面に移動します。
![Figma_ホーム画面](//images.ctfassets.net/2kcyx6q7ww5g/1daxVI0CtrZCpqZfj3zzuQ/68522ca81ebd63a50b3c40da6994bb24/____________________________2023-02-09_0.14.50.png)

…とはいえ、一応、両方の選択肢を見ておきましょう。

__「Figmaでデザイン」を選択した場合__

「Figmaでデザイン」を選択した場合は、さらにテンプレートの選択を求められます。
![Figma_Figmaでデザイン_テンプレート選択](//images.ctfassets.net/2kcyx6q7ww5g/6JcjMNerF0PxZXXvq5Zfw8/a270b75647acc9eccd933768e2549580/____________________________2023-02-09_0.14.39.png)

「iPhone」や「デスクトップ」といった選択肢のうちどれかしらを選ぶと、選んだサイズの「フレーム」（キャンバス、アートボード的なもの）を自動で用意してくれます。これも、後でいくらでも好きなサイズの「フレーム」を作ったり変更したりできますので、悩んで決める必要はありません。
![Figma_Figmaでデザイン_iPhone4フレーム](//images.ctfassets.net/2kcyx6q7ww5g/3R5OQB8WtD4rj7CfIkuth8/6c45984f3393643e1cfbb5351874390b/____________________________2023-02-09_0.15.02.png)

__「FigJamのホワイトボード」を選択した場合__

「FigJamのホワイトボード」を選択すると、ホワイトボード画面が現れます。この画面で、アイディアや工程表の整理・共有など、様々なことができます。
![Figma_Figamでデザイン](//images.ctfassets.net/2kcyx6q7ww5g/BrvChVIEC0xdWsZkLf9oR/7e9764918040ac582c79e26603849cbe/____________________________2023-02-09_0.15.11.png)

なお、「Figmaでデザイン」と「FigJamのホワイトボード」を行き来するには、まず左上のFigmaアイコンをクリックして「ファイルに戻る」でホーム画面に行き、そこから「デザインファイルを新規作成」or「FigJamファイルを新規作成」を選択しましょう。
![Figma_デザインとホワイトボードの行き来](//images.ctfassets.net/2kcyx6q7ww5g/6LDjlCIsQtYiDdTZVAymJs/ada60888e1f98761638e1e1083f4a324/____________________________2023-02-09_0.15.19.png)

※デスクトップアプリをお使いの場合は、「ホームアイコン」からホーム画面に移動します。

### デスクトップアプリのダウンロード
Figmaはブラウザで使用できるツールですが、デスクトップアプリもあります。
こちらの公式サイトからダウンロードしましょう。
https://www.figma.com/downloads/

![Figma_デスクトップアプリ](//images.ctfassets.net/2kcyx6q7ww5g/3i2jO9y32JD8qjoHIEANj5/93ec1d6ef653cb9c42d12727a1c26ea1/____________________________2023-02-09_22.33.48.png)

デスクトップアプリは、Mac用とWindows用があります。お使いのPCに合わせてダウンロードしましょう。ダウンロードは、「Desktop app for macOS（またはWindows）」をクリックするとすぐに始まります。

ONE POINT

デスクトップアプリでFigmaを開いている場合、Figmaのホーム画面へ戻る方法は「ホームアイコン」のクリックです（Figmaアイコン➞「ホームへ戻る」ではない）。
![Figma_デスクトップアプリ_ホームへ](//images.ctfassets.net/2kcyx6q7ww5g/3d2RSf4MXH83y28rwZIZiF/932b9e83cb97782faa13e93e43bd96af/____________________________2023-02-09_22.47.09.png)

### 初期設定の変更
ここまで、初期設定を行う中で、「後で変更可能だから」と言う理由で飛ばしたり、適当に入力した部分もありましたね。この章では、それら「後回し」にした部分をゆっくり決めていきましょう。

#### 名前・言語の設定
名前（表示名）や言語は、以下の方法で設定します。

1. ホーム画面右上のアカウントアイコンをクリックする
2. 「設定」をクリックする
3. 「名前の変更」から名前を、「言語の変更」から言語を設定する

![Figma_名前・言語の設定](//images.ctfassets.net/2kcyx6q7ww5g/1pDlqY4pYmV6BkTH0UnbCP/2e16736fb0bc932d59481b32f25c9a3a/____________________________2023-02-09_23.48.52_3.png)

おまけ情報

設定画面の「名前」・「言語」の下に「テーマ」があります。「テーマ」では、画面の「ライトモード」or「ダークモード」が選択できます。

#### プランの設定
プラン（料金）を変更する場合は、ホーム画面左の「プランを表示」をクリックしてください。プラン表とアップグレードへの案内が表示されます。
![Figma_プランの設定](//images.ctfassets.net/2kcyx6q7ww5g/72pKUL60q0EnrX7zbtHUZF/2ab265b9cd261e7a223504d3792db5d4/____________________________2023-02-10_0.03.41_2.png)

#### チーム名の設定
チームに関する設定を行うには、ホーム画面左に表示されているチーム名をクリックしましょう。チーム名をクリックすると、チームに関する設定画面が開きます。

※画像の例では「Team Implist」というチーム名になっています。最初にチーム名を設定しないと、「◯○（名前）’s team」といった表示なっています。 

この設定画面には、「プロジェクト」「メンバー」「設定」という表示があります。このうち「設定」を選択すると以下のように表示されます。

![Figma_チームの編集](//images.ctfassets.net/2kcyx6q7ww5g/3Z8pq7SFrtc6rkN4xhLhNm/c062f2c38923cc1cbbb19e3524f81fb5/____________________________2023-02-10_0.15.00.png)

一番上の「チーム名を変更」から、チーム名を変更できます。メンバーが増えたりしたときには、もっと込み入った設定もできますが、それらは追って解説していきます。

それでは、初期設定お疲れ様でした！
次回から、いよいよFigmaのデザインツールを使っていきましょう！

Figmaアカウント作成と初期設定を丁寧に解説！

※DockerはLaravelのインストールとMySQLの起動にのみ使用します。**DockerでLaravelは起動させず、クライアントOS上で起動**させます。Docker内でLaravelを起動させるとマウント等の関係で、動作が重くなるのでお使いのMacやWindows上でPHPをインストールしてLaravelを起動させてください。

ここではLaravel8.0とMySQL8.0の環境構築をDockerを使って行っていきます。

※Laravel9の環境構築は以下を参考にしてください  
「[Laravel9+Sail（Docker）で環境構築してみた](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70)」

構築の流れとしては以下です。

1. composerのコンテナを用意して、Laravelのインストール
2. MySQLのDockerでの起動
3. LaravelとMySQLの連携

ディレクトリ構成も以下に示します。

```
.  
├── container  
│   └── mysql  
│       ├── Dockerfile  
│       ├── conf.d  
│       │   └── mysql.cnf  
│       └── init.d  
│           └── user.sql  
├── docker-compose.yml  
└── myApp　・・・Laravelプロジェクト  
   └── ・・・以下省略
```

この構成をみながらファイルを作成していってください。

### composerのコンテナを用意して、Laravelのインストール

#### composerのコンテナを用意する

docker-composeを使ってcomposerのコンテナを用意します。  
バージョンは2.0.8を指定します。常に最新版を使いたい場合は**image: composer:latest**のように記述しましょう。

**docker-compose.yml**  

```
version: "3"  
services:  
  composer:  
  image: composer:2.0.8  
  volumes:  
    - ${PATH_TO_COMPOSER_JSON:-./}:/app
```

volumesのマウントの設定でどのディレクトリのcomposer.jsonを読むかしていしています。ディレクトリを変更したい場合は、.envの**PATH_TO_COMPOSER_JSON**のパスを記述してください。

**.env**  

```
PATH_TO_COMPOSER_JSON=./
```

この2ファイルを作り終えたら、composerが使用できるか確認します。

```
$ docker-compose run composer composer -V
```

対象のイメージをダウンロードして、コンテナ內部のcomposerコマンドでバージョンを表示しています。以下のように表示されるかと思います。

```
Creating sample_composer_run ... done  
Composer version 2.0.12 2021-04-01 10:14:59
```

#### Laravelのインストール

以下コマンドでLaravelをインストールしていきます。

```
docker-compose run composer composer create-project --prefer-dist laravel/laravel=8.0 myApp
```

結構インストールするのに時間がかかるので気長に待ちましょう。  
インストールが完了すると、docker-compose.ymlがあるディレクトリにmyAppというLaravelのプロジェクト（ディレクトリ）が配置されます。

もし他のパス（一つ上や特定のディレクトリ配下等）にプロジェクトを配置したい場合は.envのPATH_TO_COMPOSER_JSONを変更してください。

続いてmyAppディレクトリに移動し、Laravelを起動しましょう

```
php artisan serve
```

※Laravel8はPHP7.3.0以上でしか動作しないので、インストールまたはアップデートしてください。

http://localhost:8000にアクセスするとLaravelの初期画面が確認出来ると思います。

![](https://img.implist.dev/production/entry/body/Yo2y9tPlV694PXgXr2WFQ34s2I3s0pJ2XJ5IN52B.png)

### MySQLのDockerでの起動

MySQLをDockerで起動させるために、先程のdocker-compose.ymlを以下のように書き換えてください。composerのセクションは同じです

**docker-compose.yml**

```yaml
version: "3"  
services:  

mysql:  
   build:  
     context: ./container/mysql  
     dockerfile: Dockerfile  
   environment:  
     MYSQL_DATABASE: ${DB_NAME:-myapp}  
     MYSQL_USER: user  
     MYSQL_PASSWORD: user!  
     MYSQL_ROOT_PASSWORD: root!  
     TZ: "Asia/Tokyo"  
   ports:  
     - ${MYSQL_PORT:-3306}:3306  
   volumes:  
     - mysql-data-store:/var/lib/mysql  
     - ./mysql/logs:/var/log/mysql  
     - ./container/mysql/init.d:/docker-entrypoint-initdb.d  
     - ./container/mysql/conf.d:/etc/mysql/conf.d  

composer:  
   image: composer:2.0.8  
   volumes:  
     - ${PATH_TO_COMPOSER_JSON:-./}:/app  

volumes:  
 mysql-data-store:
```

また.envも以下のように書き変えましょう

```
MYSQL_PORT=3306  
MYSQL_DATABASE=myapp  
MYSQL_USER=user  
MYSQL_PASSWORD=user!  
MYSQL_ROOT_PASSWORD=root!  
PATH_TO_COMPOSER_JSON=./
```

次はMySQLのDockerfileを作成します

**Dockerfile**  

```
FROM mysql:8.0.16  
LABEL maintainer "ucan"  

COPY conf.d/mysql.cnf /etc/mysql/conf.d/mysql.cnf  
RUN set -eux && \  
 mkdir /var/lib/mysql-files
```

COPYの行で以下のファイルをDockerコンテナ内にコピーしています。  

mysql.cnfはMySQLの設定を記述したものです。

**mysql.cnf**  

```
[mysql]  
default-character-set = utf8mb4  

[mysqld]  
character-set-server = utf8mb4  
collation-server = utf8mb4_bin
```

# caching_sha2_password to mysql_native_password  

```
default-authentication-plugin = mysql_native_password

# Error Log  
log-error = /var/log/mysql/mysql-error.log  

# Slow Query Log  
slow_query_log = 1  
slow_query_log_file = /var/log/mysql/mysql-slow.log  
long_query_time = 5.0  
log_queries_not_using_indexes = 0  

# General Log  
general_log = 1  
general_log_file = /var/log/mysql/mysql-query.log  

[client]  
default-character-set = utf8mb4
```

以下は初期データです。userテーブルとそのデータをMySQL起動時にインサートします。

**user.sql** 

```sql
CREATE TABLE `user` (  
 `user_id` BIGINT unsigned NOT NULL AUTO_INCREMENT COMMENT 'user id',  
 `name` VARCHAR(20) NOT NULL COMMENT 'user name',  
 `email` VARCHAR(256) NOT NULL COMMENT 'user email',  
 `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,  
 `updated_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,  
 PRIMARY KEY (`user_id`),  
 UNIQUE (`email`)  
);  

INSERT INTO `user` (`name`, `email`) VALUES ('testname', 'test@example.com');
```

この状態でdocker-compose upをするとMySQLが立ち上がるのが確認できます。

### LaravelとMySQLの連携

LaravelとMySQLが用意できたので、いよいよこれらを連携させていきます。  
とはいっても簡単で、myApp/.envを書き換えます。

DBの接続情報を今回作成したMySQLの設定通りに書き換えます。**※docker-composeの.envではないので注意してください**

**myApp/.env**  

```
DB_DATABASE=myapp  
DB_USERNAME=user  
DB_PASSWORD=user!
```

#### 他の設定  

次にmyApp直下でLaravelのtinkerを呼び出します。

```
php artisan tinker
```

これでLaravelの機能がコマンドラインから使えるようになるので、DBに接続できているか確認します。

```
>>> DB::select('select 1');
```

この結果以下のように表示されれば成功です。

```
=> [  
    {#3345  
      +"1": 1,  
    },  
  ]  
>>>
```

お疲れさまでした、これでLaravel+MySQLで開発することができます。


Laravel8.0+MySQL8.0の環境をDockerでインストールして起動する

高速Webサイトをいろいろな技術を組み合わせながら作れるという「Astro」使ってますか？
https://astro.build/

2023年1月末にAstro2.0がリリースされて、さらなる盛り上がりを見せています。

Astroは極限までJavaScriptを排除することで、Webサイトの高速化を行っています。
ゼロJSをAstroは謳っており、完全にJSを排除したサイトがデフォルトで構築できるようになっています。

また、ReactやVue、Svelteなど様々な技術を混在させてサイトを構築していくことができ、慣れ親しんだ技術を使って高速なWebサイトが構築可能です。
Astro独自の機能や配信の最適化（エッジ最適化）など、いろいろ良い機能、環境が揃っています。

### 阿部寛のホームページを超えてゆけ
[阿部寛のホームページ](http://abehiroshi.la.coocan.jp/)は言わずとしれた、超高速サイトですね。
こちらはコンテンツの殆どがHTMLで構成され、jsのコードは多少あるもののCSSすらもなく高速で表示されます。

まあ、高速化を目指してこのような構成にした訳では無いと思いますが、
Astroを使えば、このように高速なサイトを作成することが可能になります。
デザイン自体はCSSやTailwindも使えるのでイケてる感じに出来るかは自分次第です。

もう「阿部寛のホームページ」については話しません。
気になってたまらないという方は、阿部寛のホームページのさらなる高速化を目指した人もいるようなので見てみると面白いですよ。
https://nlab.itmedia.co.jp/nl/articles/2207/19/news170.html

### Astroはコンテンツにフォーカス
AstroはWebサイトを作成するもので、コンテンツにフォーカスしています。
つまりブログや記事メディアなど、いろいろな機能が盛り込まれたWebサービスを作る目的では作られていません。

出来ないこともないですが、サイトのコンテンツを重要視しています。
なので、そのコンテンツの表示を出来る限り高速に表示出来るような仕組みが整えられています。

最初にも話しましたが、Astroにはいろいろな機能や環境が揃っていますが、細かい話になるので、それは別の機会に紹介します。

ここでは、Astroをさくっとセットアップして表示ローカル環境で表示してみるというところまでを行っていきます。

### Astroインストール

今回はnpmでAstroをインストールしていきます。

```
npm create astro@latest
```

色々聞かれますが、とりあえずrecommendedのものを選択していけばいいです。

![astro install](//images.ctfassets.net/2kcyx6q7ww5g/4wXNQEskKaXL1LCH5Ai4aU/d74f9a4beba8834bb761dd57728f97e5/____________________________2023-02-02_14.39.24.png)

今回はastro-sample-appという名前でAstroプロジェクトを作成してみました。

では実際に起動してみましょう

```
cd astro-sample-app/
npm run dev
```

![astro npm run dev](//images.ctfassets.net/2kcyx6q7ww5g/JjgNsylPYqNd1PKvxaz8o/0f87c043e1c899d94996e81b4184ae0d/____________________________2023-02-02_14.41.32.png)

3000ポートで起動するので、

[http://localhost:3000/　](http://localhost:3000/)　にアクセスしてみましょう。

![astro top page](//images.ctfassets.net/2kcyx6q7ww5g/6LkrcjC0MVznt5IxEoOX3Q/8b36271368fefa6874d862cfbd4f0175/____________________________2023-02-02_14.42.41.png)

このように表示されれば成功です。

```
code .
```
vscodeとかで開いて、コード変種していきましょう。
また細かいページの作り方やReact、Vueなどの入れ方、Tailwindの入れ方は次回移行触れていきます。

Astroで作る「高速Webサイト」阿部寛のホームページを超えてゆけ

さて今回は「DNSの仕組み」を図を用いて解説して、DNSによって名前解決というものが行われている様子を見ていきます。

この記事の対象読者は、

「サイトを公開したいけど、DNSとかよくわからない」  
「ドメインを登録してくれるものってのはなんとなく分かるけど、どういう仕組みなのか分からない」

という「初心者向けDNS解説記事」となってます。ざっくりとDNSの仕組み・全体像を掴んで行きましょう。

### DNSは何をするものか？

DNSは一言でいうと**「ドメイン」と「IPアドレス」を対応付けるためのもの**です。

ドメインをブラウザに入力してサイトにアクセスできるのは、**ドメインとIPアドレスの対応をDNSが持っていて**、**DNSがドメインに対応するIPを返し**、その**IPアドレスが示すサーバにアクセス**しているからです。  
DNSがドメインからIPアドレスを返すことを「名前解決」と呼んだりします。

ドメイン、IPアドレスというのは、  
https://www.example.com/ このExampleサイトを例に取ると、

* ドメインは「www.example.com」
* IPアドレスは「93.184.216.3」

になり、この2つの対応付けがDNSにて行われています。  
DNSは「Domain Name System」の略で、ドメイン名をIPアドレスと対応付けるためのものになります。

![](https://img.implist.dev/production/entry/body/oNWbYBKLW2rg8exd1fDC2GQ2JdO4rEvwwNfQMcHU.png)

仕組みとしては、DNSでドメインとIPアドレスの対応表みたいなものを持っていて、DNSに対してドメインのIPアドレスは何？聞くと対応表に記述されているIPアドレスを返してくれるといった具合です。  
この対応表は「DNSレコード」と呼ばれていて、上の図のように複数登録できたりします。詳しくは次の記事で説明します。

ここで、DNSがそもそもなぜ必要になるのかも簡単に触れておくと、  
「**IPアドレスは数字の羅列で覚えづらいけど、ドメインなら覚えやすい**」からです。  
これが一番の理由です。

![](https://img.implist.dev/production/entry/body/tib0k0L1uhn5VTlACQqx8jyUPDq5eptNWgzjri1j.png)

人間がみて、IPのような数字の羅列を覚えるより、意味のある英単語をつなげた「ドメイン名」の方が覚えやすいですよね。  
IPと比較して覚えやすいというだけなので、普通覚えたりはしないと思いますが、ドメインを見ただけで「ああこういうサイトなんだろうな」とかは、なんとなく分かると思います。

### 登場人物の整理

「DNS」での登場人物を紹介します。

* リゾルバ  
   * ドメインのIPアドレスを知りたいと思っている人（名前解決したい）  
   * 下図ではPC・ブラウザなどがリゾルバとなります
* DNS  
   * 名前解決をしてくれるもの  
   * ドメインとIPアドレスの対応表を持っていて、リゾルバからの要求に答える  
   * リゾルバから「このドメインのIPアドレスおしえて」とくると、対応表をみてIPアドレスを返す
* Webサイト（サーバ）  
   * 本当にアクセスしたい対象  
   * 下図では、Webサイトになる  
   * IPアドレスをDNSに教えてもらうことによって、IPアドレスでアクセスすることができる

![](https://img.implist.dev/production/entry/body/RfLs4e1DxPSVMUovkaYuFLuNbilPm7JwWvIJzvSm.png)

DNS界隈ではもっとたくさんの用語が出てきて、理解しづらいですがひとまずこの3つだけを覚えておけばOKです。この3つがあると認識した上で、名前解決の流れを見ていきましょう。

### ドメインをブラウザのURLに入力して、サイトにアクセスするまでの流れ(名前解決)を図解

何かしらのサイトにアクセスするとき、ブラウザのURLバーにドメイン名を打ち込むとアクセスできますよね。ここではサイトが表示されるまでの流れを図解します。  
（大抵の場合は検索エンジンからサイトを見つけてアクセスすると思いますが、結果一緒なので言及しません）

![](https://img.implist.dev/production/entry/body/xM8HrEk3ypW5cb6MPidSPmXAaLatv4tAJKeFACB1.png)

どういう流れでサイトが表示されているのか、図解すると以下のような感じになります。

![](https://img.implist.dev/production/entry/body/MPC2ebomn4zynUCNoOwsbRzmNOMDDED1bYXO11tH.png)

ステップは大きく分けて4つあります。一つずつ説明します。  
**名前解決と呼ばれているのは①②**の話です。

#### ① www.example.comのIPを要求

まずはブラウザからwww.example.comというサイトにアクセスしようとします。  
ここで行われるのは、DNSに対して「www.example.com」のIPアドレスは何にになるのか？というのを尋ねる（要求）することです。

これは普段私達が意識することはありません。まずはドメインのIPをDNSに要求するんだな、ということだけ覚えておきましょう。

#### ② **93.184.216.3を返す**

IPの要求をDNSに行ったら、DNSはIPを返そうとします。  
どうやってIPを返すかというと、DNSは先に説明した対応表を見に行きます（レコード）。この対応表に「www.example.com」は「93.184.216.3」というIPというのが書かれています。  
（もし書かれていなかったら、別のDNSを見に行ったりするのですが複雑になるのでそこは割愛します）

そしてそのIPが返されます。これが名前解決です。

#### ③ **93.184.216.3にアクセス**

いよいよ目的のサイトのIPがゲットできたので、そのIPのサーバにアクセスします。

このサーバではWebサーバが稼働しているはずなので、そのWebサーバがサイト情報を返してきます。

#### ④ サイト情報を返す

ここでようやくサーバからサイトの情報が返され、ブラウザでサイトが表示されます。

普段私たちから見ると、サイトにアクセスした途端サイトが表示されていますが、裏ではDNSにアクセスしたり、ドメインからIPを見つけ出したりなどいろいろなことが行われていることが分かります。

この例は簡易的な例であり、①②ですぐにIPを返しているように見えますが、この間では様々なDNSを介してIPを取得しようと試みています。  
若干複雑になるので、気になる方は以下を参照ください。

<https://domainname.jp/report/dns/#resolution>

今回は、DNSの仕組み・名前解決の流れをみてきましたが、これを理解した上でDNSの設定をしてみるとかなり理解が深まると思います。  
なので、次回は実際にドメインとIPアドレスを紐付けてDNSに登録するというのをやってみましょう。

その際にレジストラやAレコードなどまた聞き馴染みのない用語がでてきますが、それらも図解しながらしっかりと解説していきます。
