フルタイムで働いているエンジニアの方向けの「副業の探し方」を解説します。
私自身もフルタイムで働きながら、多いときは3案件の副業を抱え開発をしてきました。

おそらく正社員でエンジニアをしていて、エンジニアとしての副業をしてみたいと思う方は、以下のような副業での働き方をしたいと思っているのではないでしょうか？

- 平日夜か土日に数時間だけ開発をする
- 時間が確保出来たときのみ開発する
    - 必ずしないといけないという縛りはなく、開発をしないという週もあるといい
- 新しい技術や流行っている技術が使える副業先で開発する
- 月に5〜10万円くらい欲しい

浅い考えにも見えますが、双方が互いに納得していれば問題ないかと思いますし、このような案件がないわけではないです。
一度副業を始めてしまえば継続して発注してもらえますし、関係が良好ならどんどん新しい技術に触れたり報酬を上げたり自由な働き方も出来うるかもしれません。

エンジニア副業といっても様々な働き方があったり、探し方があったりするので、余すことなく解説していければと思います。

以前、「[Webエンジニアとして副業をやってみた](https://implist.dev/entries/try-engineer-sidejob)」という記事も書いてるので、こちらもマインド的な参考にはなると思うので、一度見てみてください。

## エンジニア 副業の探し方

副業の探し方に関しては大きく2つあると思っています。

1. 能動的な探し方
2. 受動的な探し方

能動的な探し方では、自分自身が働きかけ副業案件を獲得する方法です。これはすぐに理想の副業先が見つかる可能性が高いですが、体力をそこそこ消耗してしまいます。

受動的な探し方では、体力の消耗は少ないですが理想の副業先が見つからなかったり、そもそも案件が獲得できなかったりします。

私はこれの両方を実践していますが、受動的な方法で足場を固め、能動的な方法で確実性を狙いに行く戦略を取っています。

それぞれの探し方を深堀りしてみましょう。

### 能動的な副業の探し方

自分から企業や個人にアプローチする方法です。現役のエンジニアであれば相手の反応は良く、そこそこ話を聞いてもらえます。

具体的な方法を解説します。

#### 副業案件サイトを使う

何はともあれ、副業を募集している企業がいるであろうサイトを使うのが早いです。

ここで自身の経歴や何が出来るかを記載しておき、自ら積極的に応募します。

ただ同じような思考のエンジニアは沢山いる激戦区となるので、応募文の差別化や自身のスキルがいかに貴重であるかをアピールしないと企業に届きません。

いくつか対象のサイトを記載しておきます。タイミングや時期などもあるので、いくつか登録し定期的にチェックして応募するのが良いでしょう。

- +++ITPROPARTNERS_TEXT+++
    - 業界最大級のエンジニア案件サイトです
    - 副業で検索して100件ほどの案件がありました
    - フリーランス向け案件も多く、副業案件は早く埋まってしまう可能性があるので、定期的に覗きに行くことをおすすめします
    - エージェントによる面談もあるので、副業案件についても相談すると良いです
- +++CROWDWORKS_TEXT+++
    - 副業特化のサイトなこともあり数多くの副業案件があります
    - 土日週末OKで検索したところ1,000件程の案件があります
- +++POTEPAN_TEXT+++
    - 案件数は他と比べて少ないですが、週2,3勤務の案件があります
- +++LEVTECH_TEXT+++
    - 案件数はものすごくあります
    - 副業向け案件もあるにはありますが、フリーランス系が主なので、巡り合わせが必要なところが多いです
    - こちらもITプロパートナーズ同様、エージェントに相談してみるのが良いでしょう
- +++CROWDWORKS_TEXT+++
    - これはクラウドソーシングですね
    - 企業個人問わず案件を掲載しエンジニアを募集しています
    - エンジニアとして実績があれば、それを的確に伝えられれば案件獲得は容易な方です
    - 1案件に対して20〜50ほどの応募があるので、クライアント側の目にとまりしっかりとアピールできることが必須になります

#### 知人からの企業紹介や案件紹介

周りのエンジニアで副業をしている人に聞くというのが結構最短距離だったりします。

ただ会社だと聞きづらいこともあるので、エンジニアの勉強会や懇親会に参加したりなどして副業をしているか？などを聞くのがいいかもしれません。

私のおすすめは人脈を広げるという方法です。

勉強会でももちろん広がりますが、おすすめはビジネスマッチングです。

- +++YENTA_TEXT+++
    - 無料で1日あたり10人ランダムでマッチング可能で興味がある人をスワイプしていくだけ
    - お互いマッチングすればメッセージのやり取りをしたり、情報交換をWebミーティングで行ったり出来ます
    - エンジニアだけではなく企業経営層やスタートアップの方などもいるので、副業につながりやすいです
- +++YOUTRUST_TEXT+++
    - 友達の友達からつながる斬新なSNSです
    - 信頼度も高いですし、これから何かをしたいと前向きな方や企業が多く登録しているイメージです
    - こちらもyenta同様つながった後は、メッセージのやり取りや、Webミーティングなどしていく流れになります
    - エンジニアであれば勝手に友達申請が飛んでくるので受け身でも充分副業に繋がる可能性があります

#### XなどのSNSを活用した案件獲得

X等のSNSにて自ら企業や個人事業主の方に対して、打診していくのも良いです。

手当たり次第にコンタクトを取るのは迷惑なので、なにかをシステム化したいと思っていそうな人やエンジニアを求めていそうな人・企業にアプローチしましょう。

注意点としてはXはやはり素性が知れない人も多いので、案件を獲得出来たとしても契約をきちんと交わしたり、言った言わないがないようにきちんとテキストにして記録しておくことが重要です。

こちらが真摯にメッセージを送れば、半数くらいの方は誠実に返してくれる印象です。

私自身もいくつか仕事につながった経験があります。

### 受動的な副業の探し方

受動的なので探し方というよりは、クライアントに自分を探してもらいます。

能動的なものでどんどん自らアプローチして、受動的に自然と依頼が入ってくるようになることを目指します。

クライアント行動ありきなので、長い目で見ないといけないですが、一度この対応をしておくと自動的に副業の仕事が貰えるような仕組みとなるためおすすめです。

#### クラウドソーシング

副業案サイトでクラウドワークスを紹介しましたが、クラウドソーシングは受動的な副業探しにも重宝します。

その理由としては、自身の技術スタックや実績・経歴をプロフィールとして公開出来るからです。

能動的に副業案件を取りに行く一方で、スキルを登録しておくことでクライアント側から声がかかることがあります。

エンジニアであれば、以下のような内容で声がかけられることが多いです。

- システム開発の依頼
- 技術記事執筆の依頼
- エンジニア講師の依頼

プロフィールには以下を盛り込むようにして、なるべく他者と差別化を図りましょう。

- 使用できる言語やFW
- 今までの実績としてどういうサービスを携わったことがあるか
- 0から作ることが多いのか、既存サービスの改修・追加機能開発をするのが多いのか
- 自身がどのような思い出エンジニア・開発を行っているのか

以下の2サイトは両方とも国内最大級のクラウドソーシングサイトになります。

- +++LANCERS_TEXT+++
    - ランク制度があり、受注取っていくとランクがあがり、よりクライアント注意を引きやすい
- +++CROWDWORKS_TEXT+++
    - 手数料がランサーズよりは安い
    - クライアントからのメッセージはクラウドワークスの方が来やすいイメージ

どちらか1つを登録するというよりは、1つ登録出来てしまえば使い回せるので、両方登録しておくと良いです。

### スキルシェアサービスの活用

これは自身のスキルを打っていくというコンセプトのものです。

自身のスキルを出品するという形でクライアントに購入してもらう感じです。

例えば、

「私は〇〇の開発経験があり、同様のサービスを〇〇円〜作ります」

といった具合に出品していきます。

いくつも出品できるので、様々な切り口でクライアントにアピール出来ます。

ただ「〇〇サービス作ります」といっていきなり購入してくれるクライアントはほぼいないので、おすすめとしては以下のようなアプローチです。

- 〇〇サービスの構築・開発相談を受けます
    - 30分程度で話を聞いたり、メッセージだけのやり取りをして、アドバイスをするという出品
    - このアドバイスがクライアントに響き互いに信頼関係が出来てくれば、実際に依頼してくれます
- 〇〇の作り方教えます
    - 最近はクライアント自身が開発するといったケースも増えているので、詰まっているクライアントに対して技術を教えていきます
    - クライアントは技術初心者であることが多いので、教えているうちに、ここを作ってほしいと依頼を受けることもあります

受動的な副業の探し方では、クラウドソーシングよりスキルシェアサービスの方が購入まで繋がり安いイメージです。

ただクラウドソーシングよりは単価が下がってしまう場合が多いので、両方登録しておき自身にあった仕事を選んでいくのが良いでしょう。

代表的なスキルシェアサービスだと以下2つです。

- +++TIMETICKET_TEXT+++
    - 時間単位でスキルを販売していきます
    - 1時間や30分など、時間単位でクライアントに購入してもらう形式なので技術を教えたり相談に乗ったりというのが主になります
- +++COCONALA_TEXT+++
    - スキルやサービスを成果物単位で販売します
    - タイムチケットのように時間売りもできますし、〇〇を作ってその対価をもらうという販売も可能です



「エンジニア副業」の探し方ガイド

## **デザインの４原則とは？**

デザインの４原則とは、「近接」「整列」「反復」「対比」の４つからなります。デザインを作成する際に知っておくと便利な基本の要素です。特にWebデザインにおいては非常に重要な要素で、まず最初に学ぶべきスキルと言えます。


また、これらの原則を押さえておくと、デザインの作成時はもちろん、改善などをする際の目安になりとても便利です。また、日常生活（仕事の書類やSNSへの投稿、プライベートでのメモまで！）でも役立ちますよ！


前編では、まずこちらの４原則について詳しく説明していきます。


### **近接**

「近接」は、**デザインの要素を近く配置すること**を指します。

近接を使用することで、関連する要素をグループ化し、それらの関係を明確にすることができます。テキストや画像などが近接して配置されると、それらが関連していることがわかりやすくなります。


![figma1-1.png](https://img.implist.dev/uploads/2024/00/figma1_1_c155db7ce3.png)


近接には、物理的なものと、視覚的なものがあります。


**物理的な近接**


![figma1-2.png](https://img.implist.dev/uploads/2024/00/figma1_2_8ae1c658a1.png)


要素を実際に隣接させるような配置のことです。間の空白を無くしたり、狭くしたりします。主に空間を利用した近接です。

**視覚的な近接**


![figma1-3.png](https://img.implist.dev/uploads/2024/00/figma1_3_9f9504afc0.png)


視覚的に同じグループをつくり、要素を配置します。色やスタイルを揃え、同じ視覚的な特徴をつけてグループ化する近接です。

**物理的な近接**と**視覚的な近接**を上手く組み合わせましょう！

近接は、デザインの要素が関連性を持ち、グループ化された情報を提供するための重要な原則です！デザインのわかりやすさを向上させることができます。


### **整列**

「整列」は、デザインの要素を水平または垂直方向に、一直線に揃えることを指します。


![figma1-4.png](https://img.implist.dev/uploads/2024/00/figma1_4_2208dce75c.png)


デザイン内の文章（要素）が整列することで、階層が明確化され、ユーザーに情報が入っていきやすくなります。左揃え、右揃え、中央揃え、両端揃えなど、さまざまな方法があります。



* **左揃え**は普段、目にする文章と同じようなスタート位置で要素が並びます。分かりやすく読みやすい文を作るのに適しています。
* **中央揃え**は、真ん中に視線を集めることができます。タイトルやサブタイトルだけに使用したり、短い文の時に使うといいでしょう。
* **右揃え**は、写真を目立たせたい時、オシャレ感を出したい時など、凝ったかっこいいデザインを作りたい時などに役立ちます。

整列は、デザインをまとまった見た目にするための基本的な原則です！デザインの品質を向上させることができます。


### **反復**

反復は、デザイン内でスタイル、色、フォント、レイアウトなどのデザイン要素を複数の場所で繰り返すことを指します。


![figma1-5.png](https://img.implist.dev/uploads/2024/00/figma1_5_04ebf7c9c7.png)


同じデザイン要素を反復で再度利用することで、視覚的な結びつきが強くなり、ユーザーの注意を引き付けます。また、統一感と一貫性が出てくるので、情報が理解しやすくなります。

プレゼンテーションスライドでも、各スライドで同じデザインテンプレートが使用される事が多いですよね。こちらもデザインの反復をすることで視覚的な一貫性が保たれています。

Webデザインですと、例えばウェブサイトのヘッダーとフッターは、同じ色やレイアウトのデザイン要素を反復しています。


![figma1-6.png](https://img.implist.dev/uploads/2024/00/figma1_6_a666070a30.png)


反復は、デザインの一貫性を確保し、ユーザーエクスペリエンスを向上させるための重要な原則です。適切に使用することで、デザインの魅力と効果を高めることができます。


### **対比**

「強弱」や「コントラスト」とも言われます。対比は、デザインにおいて要素同士の違いや対照を強調することです。


![figma1-7.png](https://img.implist.dev/uploads/2024/00/figma1_7_cc1b3df221.png)


メリハリをつけることで視覚的な興味を引き付け、重要な情報を強調する重要な要素です！色、サイズ、形状、テクスチャなどの要素を使って、要素間の対比を作り出します。

たとえば、色の対比を利用すると、背景と要素の色を対照的にすることで、要素を目立たせることができます。


![figma1-8.png](https://img.implist.dev/uploads/2024/00/figma1_8_86ea461cff.png)


また、サイズの対比を使用すると、大きな要素と小さな要素の間にバランスを生み出すことができます。これにより、視覚的な階層が形成され、重要な情報が強調されます。


![figma1-9.png](https://img.implist.dev/uploads/2024/00/figma1_9_2c8c116562.png)


対比は、デザイン内の重要な要素を強調し、インパクトを出せる重要な原則です！適切に使用することで、デザインの視認性と効果を高めることができます。

今回は以上です。それぞれの基本を適切に使用し効果を上げ、より良いデザインになるように活かしていきましょう！

次の記事では、Figmaでこれらの4原則を活かす方法を見ていきます。

Webデザイン4原則 近接・整列・反復・対比を学ぼう！

前回まではFigmaで使える便利なショートカットキーについてを2記事に分けてご紹介してきました。

今回の記事では第3弾として、デザイン制作で役に立つショートカットをご紹介します。

是非参考にしていただければ嬉しいです！。


## 表示の切り替え

まず、**画面表示の切り替え**を行うショートカットキーです。

デザイン制作をする際に、画面左右等にパネル表示がされているかと思いますが、 \
そのパネル内の表示をワンタッチで切り替えるショートカットをご紹介します。

![Figma記事3 (1).jpg](https://img.implist.dev/uploads/2024/00/Figma_3_1_09895fa9ac.jpg)




### UIの表示/非表示の切替

このショートカットキーで表示される検索窓から、メニューやコマンド、プラグインなど、Figmaの機能を検索し、実行することができます。

![ユーザー.png](https://img.implist.dev/uploads/2024/00/_c57471f544.png)



### レイヤーパネル・アセットパネルの表示/非表示の切替	

画面左のレイヤーを一覧で表示するレイヤーパネルと、作成したコンポーネントを表示するアセットパネルをワンアクションで切り替えることができます。

![aset.png](https://img.implist.dev/uploads/2024/00/aset_658f1c77e0.png)


### デザインパネル・プロトタイプパネルの表示/非表示の切替

こちらは、画面右側のデザインパネルとプロトタイプパネルを切り替えることができるショートカットキーです。

![パネル.png](https://img.implist.dev/uploads/2024/00/_302c67d69f.png)





## テキストの編集

次にテキストの編集についてです。

テキストを太字や斜体に編集したり、文字のサイズや太さの変更も、実はショートカットキーが使えます！

デザインパネルから編集したい内容を探す手間が省けるので、作業効率も一気に加速しますね！

![テキスト.jpg](https://img.implist.dev/uploads/2024/00/_d384742979.jpg)








## その他の便利機能

最後にその他の便利なショートカットをジャンル別に紹介します。

Figmaにはたくさんのショートカットがありますが、ご自身がよく使用する操作のショートカットから積極的に覚えて、ぜひ作業時に使ってみてくださいね！


### 選択関係のショートカット
![全て選択.jpg](https://img.implist.dev/uploads/2024/00/_f47786f70a.jpg)





### プロパティのコピー

選択したシェイプの色や線、書体などのプロパティ（スタイル）をコピー＆ペーストするショートカットです。

![プロパティコピー.jpg](https://img.implist.dev/uploads/2024/00/_f830ee2235.jpg)





### シェイプの編集

シェイプのちょっとした操作もショートカットがあると便利ですよね！

シェイプを選択した状態で、下記のショートカットを使用することができます。

![塗りの切り替え).jpg](https://img.implist.dev/uploads/2024/00/_5e88342df0.jpg)



## まとめ

前回、前々回に引き続き、知っていると便利なショートカットキーをご紹介しました。

ぜひ、制作時に使用してみてくださいね！


【Figma】表示の切り替えなどデザイン制作で役に立つショートカットキー

この記事ではFigmaのオートレイアウトなど、代表的な機能のショートカットキーをご紹介します。

前回はFigmaで使える初級向けのショートカットキーをご紹介しました。

今回はさらに作業を効率化させるために、Figmaでデザイン制作をする際によく使用する機能のショートカットキーをご紹介します。


## オートレイアウトの追加・削除

オートレイアウトとは、オブジェクト同士の余白を均一に保って整列させる機能です。 \
効率よくデザイン制作をするために欠かせない機能なので、ぜひショートカットキーを覚えておきましょう！

> オートレイアウトの詳細についてはこちらの記事をご覧ください。[【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)

![オートレイアウト.jpg](https://img.implist.dev/uploads/2024/00/_c1231a33d8.jpg)


※オートレイアウトは複数のオブジェクトをまとめて整列させる機能です。 \
選択した複数のオブジェクトがグループ化されてしまうため、グループ解除のショートカットキー「⌘＋Shift+G（WindowsはCtrl+Shift+G）」でオートレイアウトを解除をすることも可能です。


## オブジェクトの整列

オブジェクトの整列はオートレイアウトを使用しなくても可能です。 \
オブジェクトを選択した状態で下記のショートカットを使用してみましょう！


![オブジェクト).jpg](https://img.implist.dev/uploads/2024/00/_34a185fa96.jpg)



## コンポーネントの作成・解除

コンポーネントの作成・解除も、ショートカットキーで簡単にすることができます。

> コンポーネントの詳細についてはこちらの記事をご覧ください \
[Figma コンポーネントの基礎からバリアントまでを理解しよう](https://implist.dev/entries/figma-components-basics-release-shortcut-and-variants)


![コンポーネント.jpg](https://img.implist.dev/uploads/2024/00/_674d161ad1.jpg)



## 画像を配置する

図形に画像を挿入したいとき、フォルダ（ファインダー）をFigma上で呼び出し、そのまま画像や動画を挿入することができるショートカットキーです。

※動画の挿入は有料プランのみ


![画像配置.jpg](https://img.implist.dev/uploads/2024/00/_26cea5e7f8.jpg)

このショートカットキーを知らないと、画像を挿入する際に



1. 長方形を配置
2. 長方形の塗りを画像に変更
3. Finder（Windowsならエクスプローラー）を開く

といった、3つの工程が必要になります。

ショートカットキーを使用するといかに効率アップできるのかがよくわかりますね！

![gazo1.png](https://img.implist.dev/uploads/2024/00/gazo1_b6231aecff.png)
![gazo2.png](https://img.implist.dev/uploads/2024/00/gazo2_4bf7f4db6f.png)




※画像はフリー素材を用いています（pixabayより）


## レイヤーの重ね順を変える

レイヤーの重ね順を変えることも、デザイン制作をする上で必要不可欠なアクションですね。 \
ショートカットを使用することで、エディタパネルを使用せず変更することが可能です。


![レイヤー重ね順).jpg](https://img.implist.dev/uploads/2024/00/_2b7adadd4a.jpg)




## 最後に使ったプラグインを呼び出す

Figmaを使用する上でプラグインは必須ともいえる機能です。

複数のプラグインから使用したいものを探すのは時間もかかるしストレスを感じますよね。

このショートカットを使えば、最後に使ったプラグインを１発で呼び出すことが可能です。

連続して同じプラグインを使用する際は非常に便利です！
![プラグイン.jpg](https://img.implist.dev/uploads/2024/00/_86b7ee589d.jpg)

## まとめ

今回ご紹介したオートレイアウトなどのショートカットキーも、デザイン制作をする中で何度も使用する機能ばかりです。

ご自身がよく使う機能や、簡単に覚えられるものから、ぜひ少しずつ使用してみてくださいね！


【Figma】オートレイアウトなど代表的な機能のショートカットキー

この記事ではFigmaの基本操作のショートカットキーをご紹介します。

ショートカットキーを使いこなすことで作業スピードをアップすることができます！

まずは簡単なものから少しずつ覚えていきましょう！


## ショートカットキーの一覧表示

まず紹介するのは、**ショートカットキーの一覧表示をする**ショートカットキーです。

これさえ覚えておけばこれから紹介するショートカットキーを忘れてしまっても、 \
一瞬で表示することができます！

まずはこのショートカットキーを覚えることをおすすめします！

![ショート一覧.png](https://img.implist.dev/uploads/2024/00/_6531a56cae.png)






### このショートカットキーを忘れてしまった場合…

・**メニュー（左上）** \
↓ \
・**ヘルプとアカウント** \
↓ \
・**キーボードショートカット**

をクリックするだけで表示することが可能です！　


![➁.png](https://img.implist.dev/uploads/2024/00/_92fec527a7.png)





## オーソドックスなショートカットキー

Figma以外のソフトでもよく使用されている一般的なショートカットキーです。

PCを日常的に使用している人であれば馴染みのあるショートカットキーかと思われますが、Figmaでも同様に使用することが可能です。



![Figma記事 (9).jpg](https://img.implist.dev/uploads/2024/00/Figma_9_d99dff29eb.jpg)


※**オブジェクトの複製について**

「**オブジェクトを選択**」**＋**「**option（Windowsならalt）**」＋**ドラッグ**で複製することも可能です。

さらに「**⇧（shift）**」も同時に入力することでドラッグした方向に「水平移動」「垂直移動」することも可能です。

同じ形のオブジェクトを複数並べるときに便利な機能ですね！



![4　.png](https://img.implist.dev/uploads/2024/00/4_3878d9a57d.png)






## ツールの切り替え

作業の効率を最も向上させるショートカットがこの「**ツールの切り替え**」になります。

ツールの切り替えは基本的にワンキーで可能です。


![5　.png](https://img.implist.dev/uploads/2024/00/5_fea56bd013.png)




一部の使用例を下記の図にて紹介します！

例）楕円ツール

 
![6　.png](https://img.implist.dev/uploads/2024/00/6_69b0d216ce.png)


最初は難しく感じるかもしれませんが、 \
意識的に使用していくことで徐々に慣れてくると思います！


## グループ化と解除

複数のオブジェクトをグループ化する際のショートカットも存在します。

![7　.png](https://img.implist.dev/uploads/2024/00/7_547da02dc6.png)





## その他の便利機能


### 定規の表示

※定規のショートカットは「**Illustrator**」「**Photoshop**」とは違うので並行して使用している方は気を付けてください！

![8　.png](https://img.implist.dev/uploads/2024/00/8_db93352682.png)




さらに定規からドラッグでガイドラインを表示できます


![9　.png](https://img.implist.dev/uploads/2024/00/9_b728a5bf42.png)






### 反転（水平・垂直）

オブジェクトを反転させたいときは下記のショートカットキーが便利です。

![10　.png](https://img.implist.dev/uploads/2024/00/10_c90fd14fd9.png)




## まとめ

ショートカットキーの使用に慣れると、作業スピードは格段に速くなります！

最初は確認しながら使用するのが手間に感じるかもしれませんが、ぜひ意識的に活用してみてくださいね！


【Figma】作業効率を向上させる便利な基本ショートカットキー

「ココナラでスキルを出品しよう！」と思い立ったものの、いざ始めてみると初期設定に意外と時間がかかり、なかなかサービスを開始できない…とお困りではありませんか？

特に、アイコンその他複数枚の画像を用意する必要があるため、そこに時間がかかります。

- プロフィールアイコン
- プロフィールカバー（ヘッダー）
- 出品画像（ひとつの出品につき1~10枚)
- ブログカバー
- ポートフォリオ

ココナラを始めるには、「プロフィールアイコン」「カバー」「出品画像」と少なくとも３つの画像が必須です。さらに、ココナラ内でブログやポートフォリオを持つ場合は、さらにこれらについても画像が必要となります。

本記事では、Canvaを使ってココナラを始めるにあたっての必須となる３つの画像を簡単に作成する方法を解説します！

まだココナラに登録してないという方は↓から登録しておきましょう！
+++COCONALA_TEXT+++

## Canvaで作るココナラのプロフィールアイコン

では、まずココナラのプロフィールアイコンを作成してみます。さっそくCanvaにログインしましょう！

### サイズの設定
まず、出力したい画像のサイズを設定します。

※ココナラのプロフィール画像は、182×182 px以上の正方形画像サイズでアップロードすることとなっています。

1. 「カスタムサイズ」をクリック
2. 「幅」と「高さ」に数値を入力（182px以上で正方形であればOK）
3. 「新しいデザインを作成」をクリック

![canva1_picture_size.png](https://img.implist.dev/uploads/2024/00/canva1_picture_size_cac1dc4ce4.png)

デザイン画面に182×182pxのキャンバスが現れましたね（白い正方形部分）。ここにプロフィール写真を配置していきます。

注意！
ココナラでプロフィールとして表示されるのは、(182×182pxの正方形でアップロードした場合）直径182pxの円ですので、注意しましょう。つまり、下図の点線の外側はアップロード時に表示されないことになります。

![canva2_self_picture.png](https://img.implist.dev/uploads/2024/00/canva2_self_picture_df19a6021b.png)

### 写真の配置
プロフィール写真 （or イラスト）を配置します。

1. 「アップロード」をクリック（横にバーが広がる）
2. 自分のPCからアップロードしたい写真が入っているフォルダを開く
3. 写真をドラッグ＆ドロップでCanvaに写真をコピー
4. 「アップロード」内の写真をクリック
（クリックするとその写真がキャンバス中央に配置される）

![canva3_self_picture.png](https://img.implist.dev/uploads/2024/00/canva3_self_picture_acca3a7958.png)

**※今回は、photoACから取得したモデルを使用しています。実際に行う場合は、ご自身の写真かイラストを用いてください。**

### 写真のサイズ調整
プロフィール写真 （or イラスト）を配置します。

1. アップロードした写真をクリック
    選択された状態になると写真の枠が紫色に表示されます
2. 写真の四角or辺をドラッグして写真をキャンバス全体に引き延ばす
（キャンバスからはみ出してOK）
3. 写真をドラッグして位置を調整し、人物を真ん中に配置する

![canva4_self_picture.png](https://img.implist.dev/uploads/2024/00/canva4_self_picture_23578f0d4d.png)

### 写真を装飾する
あなたの個性を出すよう写真を装飾してみましょう（シンプルな画像が好みの場合はスキップしてください）。
1. 図形（円、四角、星など）を追加する
「素材」→「図形」より、表示された図形から載せたいものを選択
　※検索窓に「円」などを入力して探してもOK
2. イラストを追加追加する
「素材」→「グラフィック」→検索窓にキーワードを入力
素材画像をクリックするとキャンバスに追加される
**※王冠マークがついている素材は有料**

![canva5_self_picture.png](https://img.implist.dev/uploads/2024/00/canva5_self_picture_e4533f47d2.png)

今回は、ココナラ用プロフィール写真を時間をかけずに入手することを目的に、Canvaでの装飾のほんの一部をご紹介しました。

他にも、テキストの挿入や写真の加工（色味の変更、白黒への変換、ぼかしなどのエフェクトetc.）等々、Canvaにはものすごく多様な機能があります。楽しみながら、徐々に使いこなしていきましょう。

また、「CanvaPro（有料）」に加入すると、「背景リムーバ」という背景削除機能が使えます。「人物＋Canvaテンプレート（背景）」の組み合わせで、さらにこだわったプロフィール画像を作成することも可能です。

### ファイルのダウンロード
作成したファイルをダウンロードします。

1. ファイル（画面右上）をクリック
2. ダウンロードをクリック
3. ファイルの種類（jpeg or PNG)を選択肢、ダウンロードボタンをクリックします

![canva6_self_picture.png](https://img.implist.dev/uploads/2024/00/canva6_self_picture_2d9cee7a48.png)

これで、ココナラのプロフィールサイズ用にアップロードできる画像が入手できました！

では、実際ココナラ上でどのように表示されるか見てみましょう。

プロフィールページを開き、「ファイルを選択」から先ほどCanvaでダウンロードした画像を選択し、「更新する」をクリックします。

![canva7_self_picture.png](https://img.implist.dev/uploads/2024/00/canva7_self_picture_77803e8c0e.png)

アップロード完了です！

アップロードは正方形の画像として行いますが、実際の表示は円形になることに注意しましょう。

**注意！）今回は、練習のためphotoACから取得した人物モデルを用いましたが、実際はご自身の写真かイラストを載せましょう！**

## Canvaで作るココナラのマイページカバー画像
Canvaでココナラのカバー画像を作る際は、まずサービスのイメージに合うテンプレートを選びそれを編集していくことで、早く整ったものが作れます。

テンプレートはパーツごとに選択して削除したり編集できるので、テンプレートデザインを部分的に使うことも可能です。

### サイズの設定
出力したい画像のサイズを設定します。

ココナラのプロフィール画像の推奨サイズは1280 x 420pxです。
1. 「カスタムサイズ」をクリック
2. 「幅」1280px、「高さ」420pxと数値を入力
3. 「新しいデザインを作成」をクリック

![canva8_mypage.png](https://img.implist.dev/uploads/2024/00/canva8_mypage_beca708cda.png)

### テンプレートを選択する
サイズを選択すると、Canvaが自動で様々なテンプレートを提案してくれます。自分のサービスイメージに合うものが見つかったら、それをクリックすればキャンパスに反映されます。

検索窓にキーワードを入れると、そのイメージに合うテンプレートを再提案してくれます。キーワードは「花」「学校」などの具体的なイメージの他、「赤」「緑」「パステルカラー」などでも検索することができます。

![canva9_mypage.png](https://img.implist.dev/uploads/2024/00/canva9_mypage_965d631630.png)

もちろん、テンプレートを使わずに、自分でアップロードした画像や素材、図形、テキスト等を使ってカバー画像を作ることもできます。

### テンプレートを編集する
キャンバス上のテンプレート素材は、各パーツを選択すると削除や編集（文字の書き換え）などができるようになります。このとき、選択中のパーツには紫色の枠がつきます。

![canva10_mypage.png](https://img.implist.dev/uploads/2024/00/canva10_mypage_e0c61b9428.png)

下図は、テンプレートの文字を削除し、「テキスト」をクリックして新たな文字を挿入したものです。

![canva11_mypage.png](https://img.implist.dev/uploads/2024/00/canva11_mypage_7539340824.png)

文字をクリックして選択状態にすると、画面上部に編集のためのバーが現れます。ここからフォントや文字サイズ、太さなど基本的な設定ができます。「エフェクト」をクリックすると、画面左に新たなバーが展開し、さらなる加工を施すことができます。

上の例では、文字加工の他に、「素材」からPCやハートの画像を探して追加してあります。このように、Canvaではテンプレートを編集し、素材を追加・削除できます。

**One Point
新たに文字を加える場合は、既にある素材から色を抜粋するとよく馴染みます。なんとCanvaでは、背景画像から既にいくつかのカラーをピックアップしてくれてあるのです（キャンバス上の文字を選択して「文字色」を選択すると、「写真の色」という項目がある）！ぜひ、活用しましょう！！**

![canva12_mypage.png](https://img.implist.dev/uploads/2024/00/canva12_mypage_9da937189d.png)

最後に「ファイル」→「ダウンロード」からjpeg/PNG形式でファイルをダウンロードしましょう（前章「Canvaで作るココナラのプロフィールアイコン」の「ファイルのダウンロード」参照）。

ココナラ上では、以下のように表示されます。

![canva13_mypage.png](https://img.implist.dev/uploads/2024/00/canva13_mypage_aad1d7bbd9.png)

## Canvaで作るココナラ出品画像
ココナラの出品画像サイズは、少々複雑になっています。

引用（ココナラ公式サイトより）
> PC表示では「イラスト・漫画」「デザイン」「動画・アニメーション・撮影」「Webサイト制作・Webデザイン」「音楽・ナレーション」カテゴリのみサービス画像を最大1220×1240ピクセルで表示しています。 
>（中略）

> その他の出品カテゴリのサービス画像は、6 対 5（ 横 対 縦 ）の比率の画像サイズでアップロードをお試しください。

> ただし、表示方法により厳密な表示比率が異なるため、もし文字などが見切れる場合は、画像の縁付近は文字表示などを避けて設定してください。

公式サイトへのリンクはこちら：
[ココナラ公式サイト「プロフィール画像・サービス画像について」](https://coconala-support.zendesk.com/hc/ja/articles/218832587-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84)


つまり、こういうことですね。
- 「イラスト・漫画」「webデザイン」など特定のカテゴリのサービスは、出品画像を最大1220×1240ピクセルとすること
- その他のカテゴリでの出品画像は「6 対 5（ 横 対 縦 ）」の比率とすること

表示に不安がある場合は、背景を1220×1240pxで作成して、字や画像は中央から1016px以内に収めるのが良いでしょう。

### サイズの設定
Canvaで出力したい画像のサイズを設定します。

![canva14_service.png](https://img.implist.dev/uploads/2024/00/canva14_service_c8d4dc2db1.png)

キャンバスサイズを指定して「新しいデザイン」をクリックすると、デザインページに移動します。

### テンプレートを選択・編集する
ここで、Canvaが自動でサイズに合う背景を提案してくれます。

さらに検索窓にキーワードを打ち込むと（例：WEBサービスを提供する場合は「ホームページ」など）、それに合う画像群に切り替わります。気に入ったテンプレートが見つかったら、それをクリックすると、自身のキャンバスに反映されます。

![canva15_service.png](https://img.implist.dev/uploads/2024/00/canva15_service_4927c887cb.png)

ここで、確実に表示される「縦6 : 横5」の領域に収めるために、表示領域を調整します。

「素材」→「図形」から長方形を選択し、横1220px・縦を112pxとしてキャンバスの上下に配置します。（すると、間の空間が1016pxとなり、1220:1016 の比が6:5となります）

素材を移動して、上下の長方形の間の空間に入るよう位置調整しましょう。

![canva16_service.png](https://img.implist.dev/uploads/2024/00/canva16_service_fbb8e078fa.png)

素材は、以下の方法でまとめて選択することができます（移動はドラッグor矢印キー）。なお、選択された素材には紫色の枠がつきます。

- Shiftキーを押しながら素材を選択
- 選択したい素材群を含む領域をドラッグ
- 「配置」→「レイヤー」から各素材のレイヤーを選択
（Shiftキーを押しながら複数レイヤーを選択可）

目印用の図形が一緒に選択されてしまって困る場合は、画面上部の鍵マークからロックするか、レイヤーパネルから移動したいレイヤーのみを選択するのが良いでしょう。

![canva17_service.png](https://img.implist.dev/uploads/2024/00/canva17_service_7754950908.png)

テンプレート中の各要素は、編集が可能です（※PCやスマホに映るイメージ写真のみ入れ替えることもできます）。

文字や画像の編集、グラフィックの追加については、前章「Canvaで作るココナラのマイページカバー画像」の「テンプレートを編集」をご参照ください。

デザインが完成したら、表示領域の目印として置いた長方形を忘れずに削除しましょう。削除できない場合は、素材をロックしていないかご確認ください（再度、鍵マークをクリックすると解除できます）。

最後に「ファイル」→「ダウンロード」からjpeg/PNG形式でファイルをダウンロードしましょう（第一章「Canvaで作るココナラのプロフィールアイコン」の「ファイルのダウンロード」参照）。

ココナラでは、以下のように表示されます。

![canva18_service.png](https://img.implist.dev/uploads/2024/00/canva18_service_8748053ce5.png)

## まとめ

本記事では、ココナラで出品を始めるにあたって必須の「プロフィールアイコン」「カバー」「出品画像」の３点について、Canvaで作成する方法を解説しました。

ココナラ内ブログやポートフォリオ画像も、基本的に同じ作業で作成できます。

1. 縦px ×横pxのサイズを入力して「新しいデザインを作成」
2. テンプレートを選ぶ
3. テンプレート（文字・画像）を編集
4. 「ファイル」→「ダウンロード」

[ココナラで使用する各画像の推奨サイズはこちらをご参照ください。](https://coconala-support.zendesk.com/hc/ja/articles/218832587-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%86%E3%81%BE%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84)

画像が荒い場合は、縦×横の比率を守って、px数を大きくしてみてください。Canva Pro（有料プラン）には、「リサイズ」という機能もありますCanva Proは、無料で30日間お試しもできるので、こちらもぜひ試してみてください！


Canvaで簡単！ココナラ出品用サイズ別画像作成ガイド

GitHub CodespacesはGitHubが提供するクラウドベースの統合開発環境(IDE)です。

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

GitHubリポジトリ内で直接コードを編集したり、ビルド、デバッグすることができます。

本記事ではGitHub Codespacesを利用したReactの環境構築方法をご紹介します。


## GitHubでCodespacesを起動する

GitHubにアクセスし、Codespacesを起動します。

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

![スクリーンショット 2024-01-21 14.33.03.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_03_d2a42fdffd.png)

今回ReactのインストールはCodespaces上で行うので、Blankのテンプレートを選択します。


![スクリーンショット 2024-01-21 14.33.08.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_08_6f746d0570.png)


しばらくすると、VisualStudioCodeがブラウザ上で起動します。

では、VSCode上でReactをインストールしていきましょう。



![スクリーンショット 2024-01-21 14.33.25.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_25_58ee90b3e4.png)

## Reactをインストールする

起動しているVSCodeのターミナルでReactをインストールします。


```
npx create-react-app
```


create-react-appをインストールするか確認されるので、yを入力し実行します。


```
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
```


Happy hacking!というメッセージがターミナル上に表示されていればインストール完了です。

では、Reactプロジェクトを起動してみましょう。


```
npm start
```


下記画面が表示されていれば無事成功です。(別タブで表示されます。)

![スクリーンショット 2024-01-21 14.33.54.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_33_54_b28c9d6083.png)

試しに、Learn Reactの部分を書き換えてみましょう。

ソースを書き換え、画面をリロードすることで変更が反映されていることが分かります。

![スクリーンショット 2024-01-21 14.34.00.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_00_dd3d6f35d2.png)


## リポジトリを作成する

現時点ではただアプリケーションを実行しているだけの状態で、開発環境を削除すればこれらのコードは消えてしまいます。

Gitのリポジトリを作成し、コミット(保存)する方法をご紹介します。

左側のメニュー欄からソース管理を選択し、Branchを発行します。

![スクリーンショット 2024-01-21 14.34.06.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_06_f9ddc50a1a.png)

リポジトリ名は自由に決めて問題ないです。

今回はreact-sampleという名前のリポジトリを作成します。

![スクリーンショット 2024-01-21 14.34.13.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_13_f1281fb045.png)

右下に以下のメッセージが表示されれば成功です。

![スクリーンショット 2024-01-21 14.34.18.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_18_f458b6aaf8.png)



## Codespacesをエディタで起動する

インストール済みのVSCodeでCodespacesを利用することも可能です。

先程作成したリポジトリの3点メニューから、Oprn in Visual Studio Codeを選択します。

![スクリーンショット 2024-01-21 14.34.32.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_32_d5253f16a4.png)


起動後は上記と同様、npm startの実行で画面を起動できます。


## GitHub Codespacesの使用率を確認する

GitHub Codespacesは無料で使用できるストレージとコア時間の使用量が決められています。

コア時間とは、例えば2コアの環境を1時間使用すると2コア時間の使用量となります。

(Blankのcodespaceは最小の2コア環境で起動します。)

使用率を確認するにはSettingsを開き、Billing and plansのPlans and useageを選択します。

![スクリーンショット 2024-01-21 14.34.37.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_37_5fa1b1df9a.png)

![スクリーンショット 2024-01-21 14.34.43.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_43_3618cd7d18.png)


Codespacesの使用率が表示されていますね。

![スクリーンショット 2024-01-21 14.34.48.png](https://img.implist.dev/uploads/2024/00/2024_01_21_14_34_48_a975ef337e.png)

使用率が75%、90%、100%になると、それぞれメールで通知されます。

使用制限の設定を構成していない場合、使用率が100%を超えるとCodespacesの使用がブロックされるので注意しましょう。


## 終わりに

ご覧いただきありがとうございました。

筆者は初めてCodespacesを利用しましたが、ストレスなくサクサクと環境構築ができました。

これから開発を始める方の手助けになれば幸いです。


Github CodespacesでReactの開発環境を構築する！

## 記事の概要

Laravelに含まれているテンプレートエンジンBladeは大変便利ですが、多機能ゆえに意外と知らない書き方があったり、何度も同じ事を調べてしまいがちです。

[こちら](https://laravel.com/docs/10.x/blade)に網羅的な公式ドキュメントがありますが、タスキに長しという感があります。

この記事では筆者が業務でよく使用するものに絞り込んで、Bladeテンプレートの書き方をご紹介します。

## PHP変数の展開

### {{ $v }}

BladeテンプレートにPHP変数の中身を表示するには`{{ $v }}`を使います。

この方法はただ変数の中身をHTMLに展開するだけでなく、セキュリティ対策として、ブラウザがHTMLタグとして解釈できないよう[特定の文字](https://www.php.net/manual/ja/function.htmlspecialchars.php)をエスケープしてくれます。

例えば、`$v`の中に`<script>`が含まれていてもブラウザはJavascriptを実行しません。

### {!! $v !!}

BladeテンプレートにPHP変数の中身を**エスケープせずにそのまま**表示するには`{!! $v !!}`を使います。

しかし、びっくりマークが使われていることからもわかるように、この書き方にはリスクが伴います。

悪意のあるコードはどこにでも紛れ込みうるものと考えて、常に`{{ $v }}`を使うべきです。

### {!! nl2br(e($v)) !!}

`{!! $v !!}`の使用を回避すべきことの例外として、PHP変数の改行文字`"¥n"`を`<br>`に変換して出力したいケースがあります。

`{{ nl2br($v) }}`と書くと「`<br>`」が文字としてそのまま表示されてしまいます。

そこで、`e()`で特定の文字をエスケープしたのちに、`nl2br()`を適用しそのまま出力することで、`<br>`がエスケープされるのを回避します。

### エスケープとは

ここでいうエスケープとは、上記例の`$v`の中身がブラウザによってHTMLとして認識されないようにすることを言います。

例えば、`$v`がユーザーが投稿したメッセージである場合、悪意あるコードを実行する`<script>`タグが記述されている可能性があります。

これをブラウザが読み込んで実行する恐れがあるため、Bladeで変数の中身をHTMLに展開するときは、常にエスケープすることが推奨されます。

## 条件分岐

### @if

PHPの`if`と同じように表示内容を制御できます。条件分岐には[様々なディレクティブ](https://laravel.com/docs/10.x/blade#blade-directives)が存在しますが、`@if`で再現できるものが多いので、差し当たり`@if`を知っていれば大丈夫でしょう。

```php
@if (count($records) === 1)
    一件のレコードが存在します！
@elseif (count($records) > 1)
    複数件のレコードが存在します！
@else
    レコードが存在しません！
@endif
```

### @switch

PHPの`switch`と同じように表示内容を制御できます。

`@break`がないと次の`@case`以下のコードが実行されてしまうため、それを意図しない場合は`@break`を忘れないようにしましょう。

自信がなければ`@if`でも代替できるので、`@switch`を無理に使う必要はありません。

```php
@switch($i)
    @case(1)
        ケース１...
        @break
    @case(2)
        ケース２...
        @break
    @default
        その他のケース...
@endswitch
```

## ループ

### @for

PHPの`for`と同じように表示内容を繰り返すことができます。

```php
@for ($i = 0; $i < 10; $i++)
    <p>現在の値は {{ $i }}</p>
@endfor
```

### @foreach

PHPの`foreach`と同じように、配列・コレクションに含まれている要素の数だけ、表示内容を繰り返すことができます。ループ内では、取り出した値（以下の例では`$user`）を使うことができます。

```php
@foreach ($users as $index => $user)
    <p>{{ $index }}番目のユーザーのIDは {{ $user->id }}</p>
@endforeach
```

### @forelse

配列・コレクションが空のとき、その旨を表示したいことが多々あります。`@foreach`と`@if`を組み合わせても実装できますが`@forelse`を使うと簡潔に記述できるのでオススメです。

```php
@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>ユーザーが登録されていません</p>
@endforelse
```

### $loop

ループ内では`$loop`という特別な変数を宣言なしで使えます。`$loop`は[様々なプロパティ](https://laravel.com/docs/10.x/blade#the-loop-variable)を持っており、わざわざこれを使わなくても実装できることの方が多いですが、ご紹介しておきます。

以下は、１回目のループならばture、それ以外ならfalseである`first`プロパティを使った例です。

あとで紹介する`@class`とTailewind CSSを併用して、最初の要素には上下に、それ以外の要素には下にだけボーダーを表示しています。

```php
@foreach ($users as  $user)
    <p @class([
        'border-y' => $loop->first,
        'border-b' => !$loop->first,
    ])>このユーザーのIDは {{ $user->id }}</p>
@endforeach
```

## 条件付きクラス

### @class

特にTailwind CSSを使っているとき、条件を満たすときだけクラスを指定したいことがあります。そういうときは`@class`の出番です。

```php
<span @class([
    'p-4',                      {{-- 常にclassに含まれる --}}
    'bg-red-500' => $hasError,  {{-- $hasErrorが真のときclassに含まれる --}}
])>テキスト</span>
```

### @style

`@class`と同じように、`style`属性に対しても条件指定できます。

```php
<span @style([
    'padding: 1rem',                       {{-- 常にstyleに含まれる --}}
    'background-color: red' => $hasError,  {{-- $hasErrorが真のときstyleに含まれる --}}
])>テキスト</span>
```

## PHPコード

### @php

`@php`を使うことでBladeテンプレートにPHPコードを記述することができます。`@php`ブロック内で定義した変数をブロック外で使うこともできます。

```php
@php
    $hasError = true;
@endphp

<span @class([
    'p-4',
    'bg-red-500' => $hasError,
])>テキスト</span>

```

### @php()

`@php()`を使えば`@endphp`が不要なので、１行でコードを書けます。

```php
@php(dd($hasError))
```

## コメント

### {{-- コメント --}}

Bladeテンプレート内でのコメントには`{{-- コメント --}}`を使います。

HTMLのコメントである``も使えますが、こちらはレンダーされたHTMLに残るため、開発者ツールを通してユーザーに晒されてしまいます。

## バリデーション

### @error()

formリクエストの際にPHP側の`validate()`でエラーが生じたとき、エラーメッセージの表示には`@error()`を使います。引数として対象となるフォームデータ名を渡します。

エラーメッセージはブロック内で使える特別な変数`$message`に格納されています。

```php
<input name="email" />

@error('email')
    <span class="text-red-500">{{ $message }}</span>
@enderror
```

```php
$request->validate([
    'email' => 'required|email',
]);
```

## コンポーネント

### コンポーネントとは

コンポーネントとは、ボタンやヘッダーメニューなど複数ページで繰り返し使うBladeの記述を別ファイルに保存し、ページで呼び出して部品のように配置できる機能です。

コンポーネントには、クラスとBladeテンプレートの２ファイルから構成される[通常のコンポーネント](https://laravel.com/docs/10.x/blade#components)と、Bladeテンプレートだけで構成される[匿名コンポーネント](https://laravel.com/docs/10.x/blade#anonymous-components)があります。

匿名コンポーネントの方が管理しやすく、おそらく通常のコンポーネントにしかできないことはないので、筆者は匿名コンポーネントばかり使っています。

この記事では匿名コンポーネントの使い方に絞って解説します。

### ファイルの作り方

以下のコマンドで作ることもできますが、`/resources/views/components`配下に空のファイルを自分で作ることもできます。拡張子は`.blade.php`です。

```bash
php artisan make:component フォルダ名.コンポーネント名 --view
```

### 配置方法

他のBladeテンプレートでコンポーネントを呼び出して配置するには、`<x-フォルダ名.コンポーネント名/>`タグを記述します。例えば`/resources/views/components/form/input.blade.php`の場合は`<x-form.input/>`です。なお、コンポーネント内から他のコンポーネントを呼び出して配置することもできます。

### データの受け渡し

コンポーネントが受け取るデータを定義するには`@props`を使います。デフォルト値を指定することもできます。

/resources/views/components/proverb.blade.php

```php
@props(['name', 'message' => '天は人の上に人を作らず'])

<div>
    {{ $name }}曰く「{{ $message }}」
</div>
```

タグに属性を指定するようにして、コンポーネントにデータを渡すことができます。PHP変数を渡したい場合は、属性名の前に`:`を付けます。

```php
@php($message='学問は米をつきながらも出来るものなり')

<x-proverb name="福沢諭吉" :message="$message" />  {{-- 簡略形として:$messageとすることもできる --}}
```

注意点として、属性名の前に`:`を付けることができるのは、コンポーネントだけであり、普通のHTMLタグの属性名の前に:を付けて変数を渡しても、その記述がそのままレンダーされるだけです。

### $attributes

受け渡しする属性の名前を全て指定する必要はありません。加工したり変数展開する必要がなければ`$attributes`でまとめて渡せます。

以下の例では`$attributes`に`x-on:click="submit" class="px-4 py-2"`の部分が展開されます。

/resources/views/components/submit-button.blade.php

```php
<button {{ $attributes }}>送信</button>
```

```php
<x-submit-button x-on:click="submit"  class="px-4 py-2" />
```

### $attributes->merge()

Tailwind CSSを使っていると、コンポーネント側で基本スタイルを指定しておき、配置するとき色だけ指定したいことがあります。単に属性を渡すだけだと`class`属性が２つになり衝突してしまうため、マージする必要があります。

/resources/views/components/submit-button.blade.php

```php
<button {{ $attributes->merge(['class' => 'px-4 py-2']) }}>送信</button>
```

```php
<x-submit-button class="bg-blue-200" />
```

注意点として、Tailewind CSSの同じ種類のクラスはマージされません。例えば、コンポーネントに基本スタイルとして`bg-red-200`が指定されており`bg-blue-200`が渡されきたとすると、`class="bg-red-200 bg-blue-200"`のように展開されてしまい、どちらの色になるかわかりません。この問題に対処するには[別パッケージ](https://github.com/gehrisandro/tailwind-merge-laravel)の導入が必要ですが、この記事では立ち入りません。

### $attributes->class()

`class`属性のマージには簡略形があり、上記の例は以下のように記述することができます。

/resources/views/components/submit-button.blade.php

```php
<button {{ $attributes->class('px-4 py-2') }}>送信</button>
```

さらに`class()`は`@class`のように条件指定ができます。

```php
@props(['hasError' => false])

<span {{ $attributes->class([
    'p-4',                      {{-- 常にclassに含まれる --}}
    'bg-red-500' => $hasError,  {{-- $hasErrorが真のときclassに含まれる --}}
]) }}>テキスト</span>
```

### $slot

HTMLタグと同じようにコンポーネントにも、文字やタグ、さらには別のコンポーネントを入れ子にすることができます。

```php
<x-button>
    <span class="text-red-500">絶対に押すな</span>
</x-button>
```

これをコンポーネントで表示するには`$slot`という名前の変数を展開します。この変数は宣言なしで使えます。

/resources/views/components/button.blade.php

```php
<button>{{ $slot }}</button>
```

### <x-slot:スロット名>

複数のスロットが必要なら`<x-slot:スロット名>`の出番です。以下の例ではheaderという名前の追加スロットを使用しています。

/resources/views/components/article.blade.php

```php
<div {{ $attributes }}>
    <header>{{ $header }}</header>
    <main>{{ $slot }}</main>
</div>
```

```php
<x-article>
    <x-slot:header>タイトル</x-slot>
    本文....
</x-article>
```

`x-slot`に渡した属性を展開することもできます。もちろん`$attributes`のメソッドも使えます。

/resources/views/components/article.blade.php

```php
<div {{ $attributes }}>
    <header {{ $header->attributes }}>{{ $header }}</header>
    <main>{{ $slot }}</main>
</div>
```

Laravel Blade テンプレートの書き方チートシート

## 記事の対象者

この記事は、Laravelは経験があるがLivewireは初めて使う方を対象にしています。Livewireの使い方を素早く理解できるよう内容を絞り込んでいますが、理解の幅を広げたい方のために公式ドキュメントへのリンクも積極的に取り入れています。

通常のLaravelの機能については詳しく解説していませんのでご了承ください。


### Livewireとは

LivewireはLaravel向けのフレームワークです。ページやコンポーネントに状態を持たせることができ、フルページリロードの必要がないSPA的なページをLaravelの簡潔さを損なわずに実装することができます。


### Livewireのバージョンについて

Livewire3は最近（2023年8月）公式リリースされたので、検索してもLivewire2の記事が多く出てきます。後方互換性がかなりあるようなので、2のスタイルで書いてもたいていは動きますが、この記事では3の公式ドキュメントのスタイルを優先します。


## 超簡易アプリの作成を通してLivewireを理解しよう

超簡易記事投稿アプリの作成を通して、Livewireの書き方を高速で体験してください。


### インストール

通常のLaravelプロジェクトをお好きな方法で構築してください。

参考記事：[Laravel9+Sail（Docker）で環境構築してみた](https://implist.dev/entries/9cd66a5a4ac17b37907db499d83dce70)

プロジェクトが作成されたら、Livewireをインストールします。

```bash
composer require livewire/livewire
```

これだけでLivewireの機能が使えるようになります。


### テーブル・モデルを作成する

テーブルやモデルについてはLaravelの基本機能をそのまま使います。このチュートリアルで使用するテーブル・モデルを作成しましょう。

```bash
php artisan make:model Post -m
```

database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php（xxxxは作成日時）

```php
Schema::create('posts', function (Blueprint $table) {

    $table->id();

    $table->string('title');

    $table->timestamps();

});
```


### まずはページを作る

Livewireの基本要素は[Livewireコンポーネント](https://livewire.laravel.com/docs/components)です。Laravelのコンポーネントと似ていますが、状態をリクエスト間で維持できるのがウリです。このコマンドで作成できます。

```bash
php artisan make:livewire CreatePost
```

以下のファイルが自動生成されました。クラスとBladeビューが作成されます。Laravelのテンプレートと似ていますね。

* app/Livewire/CreatePost.php
* resources/views/livewire/create-post.blade.php

[Bladeテンプレート内に配置](https://livewire.laravel.com/docs/components#rendering-components)することもできますが、ルートに指定してページとして扱うこともできます（[フルページコンポーネント](https://livewire.laravel.com/docs/components#full-page-components)）

routes/web.php

```php
use App\Livewire\CreatePost;

Route::get('/', CreatePost::class);
```


#### レイアウトを用意する

しかし、この時点でアクセスしてもエラーが出ます。Livewireコンポーネントを包むレイアウトが存在しないからです。`resources/views/components/layouts/app.blade.php`がデフォルトのレイアウトに指定されているので、作成しましょう（レイアウトのパスを変更したい場合は[こちら](https://livewire.laravel.com/docs/components#global-layout-configuration)）

```bash
php artisan make:component layouts.app --view
```

resources/views/components/layouts/app.blade.php

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高速！Livewire3入門</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>
```

エラーが出ずに真っ白なページが表示されれば動作確認OKです。


### Livewireコンポーネントの中身を書く


#### クラス側

Livewireコンポーネントのクラスのpublicなプロパティやメソッドは特別な意味を持っています。

publicプロパティは値の内容はリクエスト間で維持され、フロント側のフォームの内容と同期を取ることができます。ReactやVueをご存じの方はステートをご存じでしょう。同じことがPHPコードでできます（[Livewireプロパティ](https://livewire.laravel.com/docs/properties)）

publicメソッドはBladeビューから呼び出すことができます（[Livewireアクション](https://livewire.laravel.com/docs/actions)）

app/Livewire/CreatePost.php

```php
<?php

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;

class CreatePost extends Component
{
    public $title = '';  // ←Livewireプロパティ

    public function render()
    {
        return view('livewire.create-post');
    }

    public function create()  // ←Livewireアクション
    {
        $post = new Post;

        $post->title = $this->title;

        $post->save();
    }
}
```


#### Bladeビュー側

続いて、Bladeビュー側で`wire:`から始まるディレクティブ使って挙動を定義します。

`wire:model`にはLivewireプロパティ名を指定し、フォーム要素の内容とPHP変数の内容を同期します。

`wire:submit`にはLivewireアクション名を指定し、submitイベントを合図にサーバー側のメソッドを呼び出すことができます。他にも`wire:click`など[あらゆるブラウザイベントに対応](https://livewire.laravel.com/docs/actions#event-listeners)しています。

`wire:key`はループでレンダーする要素に忘れずにつけましょう。そうしないとLivewireが要素を特定できなくなり、不具合の原因になります。

resources/views/livewire/create-post.blade.php

```html
<div>
    <form wire:submit="create">
        <input wire:model="title" />
        <button>投稿</button>
    </form>
    <div>
        @foreach(App\Models\Post::all() as $post)
            <p wire:key="{{ $post->id }}">{{ $post->title }}</p>    
        @endforeach
    </div>
</div>
```


### バリデーションを実装する

Livewireプロパティはプロパティごとにバリデーションを記述することができます。DBにデータを保存する前にバリデーションチェックをしましょう。


#### クラス側

バリデーションルールは`#[Rule]`を使ってプロパティに直接指定することができます。通常のLaravelと同じバリデーションルールを使います。

app/Livewire/CreatePost.php

```php
<?php

namespace App\Livewire;

use App\Models\Post;
use Livewire\Attributes\Rule;  // ←追加
use Livewire\Component;

class CreatePost extends Component
{
    #[Rule('required|string|max:10')]  // ←追加

    public $title = '';

    public function render()
    {
        return view('livewire.create-post');
    }

    public function create()
    {
        $this->validate();  // ←追加

        $post = new Post;

        $post->title = $this->title;

        $post->save();
    }
}
```


#### Bladeビュー側

Bladeビュー側にエラーを表示しましょう。表示方法は通常のLaravelと全く同じです。

resources/views/livewire/create-post.blade.php

```
<div>
    <form wire:submit="create">
        <input wire:model="title" />
        <button>投稿</button>

        {{-- ↓追加 --}}
        @error('title')
            <span>{{ $message }}</span>
        @enderror  

    </form>
    <div>
        @foreach(App\Models\Post::all() as $post)
            <p>{{ $post->title }}</p>    
        @endforeach
    </div>
</div>
```


### 完成

極めて簡素ですが、記事投稿アプリの完成です。Laravel単体で実装すと

* ルート定義
* コントローラー
* バリデーション

の記述などで煩雑になりそうですが、Livewireで簡潔に書くことができました。


## さらに学びを深めよう

Livewireはシンプルに見えますが、多機能で奥が深いです。以下は筆者が実務で便利だと感じた機能へのお役立ちリンク集です。

* [Url Query Parameters](https://livewire.laravel.com/docs/url) - この機能は感動です。検索条件が多いページなどを簡潔に実装できます。
* [Locked Properties](https://livewire.laravel.com/docs/locked) - Livewireはサーバー側の変数がフロントに疑似的に晒されるため、セキュリティ上の懸念があります。筆者はフロントでの変更を意図しないLivewireプロパティには全て`#[Locked]`を付けています。
* [wire:loading](https://livewire.laravel.com/docs/wire-loading) - 二重送信対策に便利なのがこのディレクティブ。
* [Alpine.jsからアクセス](https://livewire.laravel.com/docs/actions#calling-actions-from-alpine) - JSでしかできないようなことをPHPでできてしまうLivewireですが、Alpine.jsを使った方が便利なときがあります。


Laravel Livewire入門！PHPでreact/vueライクなアプリケーション開発

## AxiosとFetch APIはhttp requestを行う技術

今回のテーマであるAxiosとFetch APIはどちらもhttp requestを行う技術ですが、

Axiosはjsライブラリで、Fetch APIはネイティブで実装されているという違いがあります。

この記事では、CRUD操作において、2つの違いを解説していきます


### Axiosの使い方

まずは、Axiosの使い方についてCRUD操作を用いて解説していきます。

Axiosは、既存のHTTPクライアントの機能を簡単に利用できるようにし、さらに便利な機能や拡張性を提供することを目的として作られました。これは、従来のXMLHttpRequest（XHR）よりも使いやすい方法を提供するために作られました。


#### AxiosでのCreate操作

```js
const data = { firstName : "Taro", lastName : "Yamada" }
const url = axios.post("http://localhost:3000/user/123", data)
  //then=成功した場合の処理
  .then(() => {
    console.log(url)
  })
  //catch=エラー時の処理
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのRead操作

```js
const url = axios.get("[http://localhost:3000/](http://localhost:3000/)")
  .then(() => {
    console.log("ステータスコード:", status);
  })
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのUpdate操作

```js
const data = { firstName : "Taro", lastName : "Qiita" }
const url = axios.put("http://localhost:3000/user/123",data)
  .then(() => {
    console.log('データ更新:',url)
  })
  .catch(err => {
    console.log("err:", err);
  });
```


#### AxiosでのDelete操作

```js
const url = axios.delete("http://localhost:3000/user/123")
  .then(() => {
    console.log('削除ID:',url)
  })
  .catch(err => {
    console.log("err:", err);
});
```


### Fetch APIの使い方

FetchAPIはPromiseベースで、直感的でシンプルな構文を備えており、非同期操作ができます。また、リクエストやレスポンスをより細かく制御でき、新しい機能や拡張性も提供しています。


#### Fetch APIでのCreate操作

```js
fetch("https://jsonplaceholder.typicode.com/posts", {
  //リクエスト形式を指定
  method: "POST",
  //サーバに送信するデータを指定
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  //サーバーにJSON形式で送信することを指定
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));
```


#### Fetch APIでのRead操作

```js
fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json())
  .then((json) => console.log(json));
```


#### Fetch APIでのUpdate操作

```js
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));
```


#### Fetch APIでのDelete操作

```js
//IDが3であるオブジェクトを削除
fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});
```


##### AxiosとFetch APIの違い

AxiosとFetch APIは、HTTPリクエストを処理するために使用される2つの異なるアプローチです。以下に、両者の違いに関する簡単な説明を示します。


##### Axios



*  Axiosは、ブラウザとNode.jsの両方で動作するHTTPクライアントライブラリ
* PromiseベースのAPIを提供し、非同期処理が可能
* 高度な機能（自動的なJSON変換、エラーハンドリングなど）が組み込まれており、直感的な使用が可能


##### Fetch API



* Fetch APIは、ブラウザに組み込まれているネイティブのJavaScript APIで、ネットワークリクエストを扱う
* FetchはPromiseベースであり、比較的シンプルな構文
* 追加の機能や設定を必要とせず、純粋なJavaScriptの機能

上記のように、CRUD操作の例では、Axiosは自動的にJSONデータを処理し、エラーハンドリングを提供するなど、使いやすいAPIを提供しています。

一方でFetch APIは、ネイティブのJavaScript APIであるため、一部の機能や設定を手動で行う必要があります。どちらを選択するかは、プロジェクトの要件や開発者の好みによります。


## この記事のまとめ



* Axiosは自動的にJSONデータを処理し、エラーハンドリングを提供するなど初めての人に使いやすい
* Fetch APIは一部の機能や設定を手動で設定できるため、自由度が高い

CRUD操作から見るAxiosとFetch APIの違いとは？

## VueUseはVue.jsのcomposable集

「コンポーザブル（composable）」とは、Vue の Composition API を活用して**状態を持つロジック**をカプセル化して再利用するための関数です。

VueUseはcomposableな関数やユーティリティの集まりで、Vue.jsアプリケーションの開発をより簡単で効率的にするために提供されています。

今回はVueUseの中の関数として、3つ紹介します。


### useToggle

真偽値をトグル（切り替え）する機能を提供する関数です。

この関数を使用すると、ボタンのクリック時に状態を反転させるなどの機能が簡単に作成できます。

`useToggle`の戻り値には、`value`と`toggle`というプロパティが含まれています。



* `value`: 現在の真偽値の状態を示します
* `toggle`: 状態をトグルするための関数です

使用例を見てみましょう。


#### 使用例

この例では、ボタンがクリックされるたびに、toggle関数が呼ばれます。

toggle関数が呼ばれるごとに、保持されているvalue値がトグルされます。

value値を表示して、現在の真偽値の状態を表示しています。

```ts
<script setup lang="ts">
import { useToggle } from '@vueuse/core';
const [value, toggle] = useToggle(false);
</script>

<template>
  <div>
    <p>Is Visible: {{ value }}</p>
    <button @click="toggle()">Toggle</button>
  </div>
</template>
```

[VueUse useToggle 公式 ](https://vueuse.org/shared/useToggle/)


### useMouse

マウスの座標を取得し、リアクティブに返す関数です。

マウスの位置で画像を切り替えたりする場合などに便利な関数です。

`useMouse`の戻り値には、`x`と`y`というプロパティが含まれています。



* `x`: マウスのX座標
* `y`: マウスのY座標

使用例を見てみましょう。


#### 使用例

`useMouse`にて取得したマウスの座標を表示しています。

マウスの座標や関連するプロパティは、リアクティブな値として提供されているため、

`mouse.x`と`mouse.y`の値が変更されると、それに連動して表示されているテキストも更新されます。

```ts
<script setup lang="ts">
import { useMouse } from '@vueuse/core';
const mouse = useMouse();
</script>

<template>
  <div>
    <p> X座標: {{ mouse.x }}</p>
    <p> Y座標: {{ mouse.y }}</p>
  </div>
</template>
```

[VueUse useMouse 公式 ](https://vueuse.org/core/useMouse/)


### useCounter

カウンターを簡単に管理するための関数です。

この関数を使うと、カウンターの増減やリセットなどを簡単に実現できます。

`useCounter`の戻り値には、`count`というプロパティや、inc・dec・set・reset関数が含まれています。



* `count`: カウンターの現在の値です。
* `inc`: 指定された値だけ、カウンターの値を増やすメソッド
* `dec`: 指定された値だけ、カウンターの値を減らすメソッド
* `set`: カウンターの値を指定された値に変更するメソッド
* `reset`: カウンターを初期値にリセットするメソッド

使用例を見てみましょう。


#### 使用例

まず、`useCounter`にてカウンターの初期値を0で設定しています。

2つ増ボタンをクリックすることで、inc関数に2を渡しているため、カウンター値が2ずつ増えます。

2つ減ボタンをクリックすることで、dec関数に2を渡しているため、カウンター値が2ずつ減ります。

カウンター値は保持されているので、`count`を表示することで、増減後の値が表示されます。

```ts
<script setup lang="ts">
import { useCounter } from '@vueuse/core';
const { count, inc, dec } = useCounter(0);
</script>

<template>
  <h1>VueUse: useCounter</h1>
  <div>Count:{{ count }}</div>
  <div>
    <button @click="inc(2)">2つ増</button>
    <button @click="dec(2)">2つ減</button>
  </div>
</template>
```

[VueUse useCounter 公式 ](https://vueuse.org/shared/useCounter/)


### まとめ

使用例を見ていただきましたが、とても簡単にVueUseライブラリを利用できることが分かって頂けたかと思います。

VueUseは、Vue.jsアプリケーションで状態やロジックを管理し、コンポーネントの開発をシンプルにし、再利用性を高めてくれます。

記事内で紹介した関数は、ほんのごく一部です。

VueUseを利用することで、様々な機能が簡単に作れます！

ぜひ取り入れて、色々なアプリケーションを作成してみてください。


Vue.jsの便利機能集「VueUse」の使い方！


Laravelは、開発者が効率的にアプリケーションを構築できるPHPフレームワークです。しかし、データベースとアプリケーションとの間でのデータのやり取りにおいて、"N+1問題"に遭遇する可能性があります。この記事では、N+1問題とその解決策であるEager Loadingについて、Laravelを使用した具体的なコード例とともに解説します。


## **N+1問題とは**

N+1問題は、データベースとのデータのやり取りにおいて、データを取得する際に遭遇するパフォーマンス上の問題です。

この問題は、1つのクエリで取得したデータを基に、さらにN回のクエリが発行され、結果として合計でN+1回のクエリが実行される状況を指します。


### **N+1問題の例：記事とコメント**

例えば、ブログの記事とそれに対するコメントを取得する状況を考えます。モデルの関係は以下のようになります。

```php
class Post extends Model
{
    public function comments()
    {
        return $this->hasMany(Comment::class);
    }
}
```

N+1問題が発生するコード例は以下の通りです。

```php
$posts = Post::all();

foreach ($posts as $post) {
    foreach ($post->comments as $comment) {
        echo $comment->content;
    }
}
```

上記のコードは、最初のクエリで全てのポストを取得し(1回)、その後、各記事に対してコメントを取得するクエリを発行します(N回)。

例えば、10個の記事がある場合、



* 10個の記事を1回のクエリで取得（1回のクエリ）
* 10個の記事それぞれに対してコメントを取得（10回のクエリ）

合計で11回のクエリが発行されることになります。これがN+1問題の典型的な例です。

この問題は、データベースへのアクセス回数が増えるにつれ、よりアプリケーションのパフォーマンスに悪影響を与える可能性があります。特に、レコード数が多い場合や複雑なクエリを実行する場合、この影響は顕著になります。

次のセクションでは、このN+1問題を解決するための、Laravelの一般的なアプローチであるEager Loadingについて詳しく説明します。


## **Eager Loading（イーガーローディング）とは**

Eager Loadingは、LaravelのEloquent ORMにおいて、リレーションシップのデータを効率的に取得するためのテクニックです。これは、データベースからデータをフェッチする際に、関連するデータも一緒に取得することで、N+1問題を解決します


### **Eager Loadingの基本的な使用方法**

Eager Loadingは、主にwithメソッドを使用して実装されます。このメソッドを使用すると、指定したリレーションシップのデータを初めのクエリで一緒に取得することができます。これにより、後続の操作で追加のクエリを発行する必要がなくなり、データベースへのクエリ数が大幅に削減されます。

以下のコードは、Eager Loadingを使用して、記事とそれに関連するコメントを2回のクエリで取得する例です。

```php
$posts = Post::with('comments')->get();

foreach ($posts as $post) {
    foreach ($post->comments as $comment) {
        echo $comment->content;
    }
}
```

このコードでは、with('comments')を使用することによって、2つのクエリを発行します。最初のクエリは、すべての記事を取得するためのものです。次に、取得したすべての記事に紐づくCommentを一度のクエリで取得します。

この方法で記事の数に関係なく、紐づくCommentを取得するためには常に1つのクエリしか発行されません。これにより、N+1問題が解消されます。


### $post->comments と $post->comments() の違い

Laravelのリレーションシップを扱う際、$post->comments と $post->comments() は似ているように見えますが、実際には大きく異なります。



* $post->comments
    * Eager Loadingによって事前に取得したリレーションデータを参照します。この場合、追加のデータベースクエリは発行されません。
* $post->comments()
    * このメソッドは新しいクエリをデータベースに発行してリレーションデータを取得します。Eager Loadingの利点を活かすためには、このメソッドの使用は避けるべきです。

この2つの違いは、()の有無だけですが、その影響は大きいです。特に、パフォーマンスを最適化するためにEager Loadingを使用する際には、この違いを正確に理解し、適切に使用することが重要です。

詳細はこちらの[Laravelの公式ドキュメント](https://readouble.com/laravel/10.x/ja/eloquent-relationships.html#eager-loading)を参照してください。


## **応用例：Eager Loadingの利用シーン**

ここまではEager Loadingの基本的な使い方を見てきましたが、このセクションではその応用的な使い方を実例を通して見ていきましょう。


### **リレーションデータの条件付き取得**

Eager Loadingを使用する際、特定の条件に基づいてリレーションデータを取得することも可能です。これは、関連データが多く、その中から特定のデータのみをフェッチしたい場合などに非常に便利です。

```php
$posts = Post::with(['comments' => function ($query) {
    $query->where('is_active', true);
}])->get();
```

上記のコードでは、記事ごとのコメントを取得しますが、commentテーブルのis_active カラムが true であるデータのみを取得します。この方法で、不要なデータを省き、必要なデータのみを効率的に取得できます。


### **ネストされたリレーションデータの取得**

複数のリレーションを持つデータを扱う場合、ネストされたリレーションデータを一度のクエリで取得することもできます。以下のようなデータの関係性を例に説明します。



* Post: ブログの記事を表すモデルです。
* Comment: ブログの記事に対するコメントを表すモデルです。各Commentは特定のPostに紐づいています。
* Author: コメントの著者を表すモデルです。ここでは、コメントを書いたユーザーを指します。各Commentは特定のAuthorに紐づいています。

```php
$posts = Post::with('comments.author')->get();
```

このコードは、各記事と、記事に紐づくコメント、さらに各コメントの著者を一度のクエリで取得します。これにより、後続の操作で各リレーションを個別にクエリする必要がなくなり、パフォーマンスが向上します。


### **既に取得された親データに対するリレーションデータの追加取得**

すでに取得された記事のデータに対して、後からリレーションデータを取得することも可能です。これは、特定の条件下でのみ追加のリレーションデータが必要な場合などに役立ちます。


```php
$posts = Post::all();

$posts->load('comments');
```

ここでは、全ての記事を取得した後、それぞれの記事に紐づくコメントを追加で取得しています。load メソッドを使用することで、既存のモデルインスタンスに対して追加のリレーションデータを後から取得できます。

この例では以下のようなクエリを発行します。

```sql
SELECT * FROM posts;
SELECT * FROM comments WHERE post_id IN (1, 2, 3, ...);
```

ここでの(1, 2, 3, ...)は取得された記事のIDのリストを示しています。

合計で、データベースへのクエリは2回発行されます。

このようにすでに取得されている記事データに対して$posts->load('comments')を使うことで、複数の記事に紐づくコメントを1回のクエリで取得することができます。

これらの応用例を通して、Eager Loadingはアプリケーションのパフォーマンスを向上させ、DB操作を最適化する強力なツールであることがわかります。

適切に利用することで、データベースへのアクセスの効率を向上させられる可能性があります。


## **Eager Loadingの注意点とその適切な使用法**


### **リレーションメソッドの使用とその影響**

LaravelのEager Loadingは、データベースとのデータのやりとりを効率化するための強力な機能です。しかし、その使用方法によっては、その利点が損なわれることがあります。特に、リレーションメソッドの使用方法には注意が必要です。


### **リレーションメソッドの誤った使用例**

```php
$posts = Post::with('comments')->get();

foreach ($posts as $post) {
    $comments = $post->comments()->where('approved', true)->get();
    foreach ($comments as $comment) {
        echo $comment->content;
    }
}
```

上記のコードでは、with('comments')を使用してcommentsリレーションをEager Loadingしているにも関わらず、foreach文の中でcomments()メソッドを使用して新しいクエリを発行しています。このcomments()メソッドは、新しいクエリをデータベースに発行しているため、Eager Loadingの本来の目的である、データベースへのクエリ数を減らすことを無効にしてしまいます。


### **正しいリレーションデータのアクセス方法**

```php
$comment = $post->comments;
```

こちらのコードは、Eager Loadingによって事前に取得されたcommentsリレーションデータにアクセスしています。commentsプロパティは、動的プロパティとしてリレーションデータを取得します。これにより、新しいクエリが発行されず、キャッシュされたリレーションデータが使用されるため、パフォーマンスが向上します。

N+1問題は、ORMを使用したデータベースの操作において、パフォーマンスのボトルネックとなる可能性があります。Eager Loadingは、Laravelアプリケーションにおけるデータベース操作でクエリを投げる回数を減らせる可能性があります。

しかし、間違った使い方ではその利点が損なわれることがあるため、適切な使用と注意点を理解し、アプリケーションの各部分で効果的に利用することで、パフォーマンスの向上を目指しましょう。

LaravelのN+1問題を「Eager loading」で解決する

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】テキストスタイルの使い方 〜設定・登録・解除方法〜 徹底解説！

めちゃくちゃ使い勝手の良い __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記述エリアやテーブルクリックしたときに開かれます）