例として以下のコードを見てください。<pre><code>val animals = List[Animal](Dog(), Cat())
animals.foreach(_.cry())

abstract class Animal():
 def cry(): Unit

class Dog extends Animal():
 override def cry(): Unit =
 println("bow wow!")

class Cat extends Animal():
 override def cry(): Unit =
 println("meow")</code></pre> ※List[Animal]は型推論してくれるため本来は指定しなくても大丈夫です。このコードを見せられてもなんの違和感も感じないと思いますが、Listの各要素の型はAnimalなのに、DogやCatを入れても問題ないのはなぜでしょうか？それは、Listの型が共変の型パラメータになっているためです。共変の型パラメータは<code>class Hoge[+T]()</code>と定義され、UがTのサブ型である場合、Hoge[U]もHoge[T]のサブ型と判断されます。これにより、たとえ厳密に同じ型でなくても、Listの要素として追加できるようになり柔軟性が増します。 注意点として、共変を安全に定義できるのはイミュータブルなオブジェクトのみです。まず、配列は参照型なので以下のような挙動になるのはおわかりかと思います<pre><code>val ary = Array(1)
val ary2 = ary
ary2(0) = 2
println(ary(0)) #=&gt; 2</code></pre> 次に、以下のコードを見てください。<pre><code>@main def main() =
 val dogs = Array(Dog())
 val animals: Array[Animal] = dogs // コンパイルエラー
 animals(0) = Cat()
 dogs(0).run()
 
abstract class Animal:
 def cry(): Unit
 
class Dog extends Animal:
 override def cry(): Unit =
 println("bow wow!")
 
 def run(): Unit =
 println("running!")
 
class Cat extends Animal:
 override def cry(): Unit =
 println("meow")
 
 def walk(): Unit =
 println("walking")</code></pre> 実際にはmain関数の2行目でコンパイルエラーが起きますが、仮にArrayのパラメータが共変だったとすると以下のような不具合が発生します<ul><li>2行目でanimalsはArray[Animal]と定義されているので、dogsを入れることができます</li><li>同様に3行目でanimalsにCatを入れることも可能です</li><li>2行目でanimalsとdogsは同じオブジェクトを参照しているため、dogs(0)にはCatが入っています</li><li>4行目でdogs(0).run()を実行しようとしますが、dogs(0)の実態はCatなので、runメソッドが実装されておらず実行エラーになります</li></ul> ScalaではArrayは実際には共変ではなく非変として定義されています。非変の場合は厳密に同じ型でなければ互換性がないと判断されます。 他にも反変がありますがこちらは共変と全く逆で、UがTのサブ型である場合、Hoge[T]がHoge[U]のサブ型と判断されます。こちらは直感に反しますが、そのような定義に実用性はあるのでしょうか？ ・・・というわけで、次回に続きます

共変・非変について

変位指定アノテーションその１

Scalaの型についてまとめてみた（その１）

Entのスキーマファイルを元に生成したER図のリンクは以下のコマンドで作成できます。<pre><code>$ go run -mod=mod ariga.io/entviz ./path/to/ent/schema</code></pre> <img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/23a1dab6624c4261b481810da2825a45/image.png" alt="">

TL;DR

go mod init で確認用プロジェクトを初期化します。<pre><code>$ go mod init github.com/rotemtam/ent-blog-example</code></pre> 新しいプロジェクトが作成されたことを確認します。<pre><code>go: creating new go.mod: module github.com/rotemtam/ent-blog-example</code></pre>

1. go mod initで確認用プロジェクトを初期化する

Entを使用してアプリケーション・データ・モデルを作成するため、go get を使って取得しましょう。 <pre><code>$ go get -u entgo.io/ent@master</code></pre>

2. アプリケーション・データ・モデルを作成する

Ent CLI を使用して、このチュートリアルで扱う2種類のエンティティ（UserとPost）のモデルを初期化します。 <pre><code>$ go run -mod=mod entgo.io/ent/cmd/ent new User Post</code></pre>

3. Ent CLI を使用して２種類のエンティティのモデルを初期化する

./ent/schema 配下にあるpost.go と user.go にそれぞれ以下を追記します。 user.go<pre><code>// Fields of the User.&nbsp;&nbsp;
func (User) Fields() []ent.Field {&nbsp;&nbsp;
&nbsp;&nbsp;return []ent.Field{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;field.String("name"),&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;field.String("email").
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Unique(),&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;field.Time("created_at").
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default(time.Now),&nbsp;&nbsp;
&nbsp;&nbsp;}&nbsp;&nbsp;
}&nbsp;&nbsp;
&nbsp;&nbsp;
// Edges of the User.&nbsp;&nbsp;
func (User) Edges() []ent.Edge {&nbsp;&nbsp;
&nbsp;&nbsp;return []ent.Edge{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;edge.To("posts", Post.Type),&nbsp;&nbsp;
&nbsp;&nbsp;}&nbsp;&nbsp;
}</code></pre> post.go<pre><code>// Fields of the Post. 
func (Post) Fields() []ent.Field { 
 return []ent.Field{ 
 field.String("title"), 
 field.Text("body"), 
 field.Time("created_at").
 Default(time.Now), 
 } 
} 
 
// Edges of the Post.
func (Post) Edges() []ent.Edge { 
 return []ent.Edge{ 
 edge.From("author", User.Type). 
 Unique(). 
 Ref("posts"), 
 } 
}</code></pre>

4. 生成されたschemaファイルに設定を追記する

以下のコマンドを実行し、ER図のリンクを生成してブラウザで確認します。<pre><code>$ go run -mod=mod ariga.io/entviz ./ent/schema</code></pre> 以下のようなページが開ければ完了です。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/c355cb8ee1b640ea973aa5f88f22d166/image.png" alt="">

5. コマンドを実行してER図のリンクを生成する

実際に使ってみた

schemaファイルさえ書いていればコマンド一つでER図が生成できるので非常に便利な機能でした。Entはコンスタントにこういった便利な機能のアップデートが行われているので、これからも定期的にリリースノートをチェックして追っていきたいと思います。

まとめ

Go言語のフレームワークentにER図生成ツールが導入されたので使ってみた

こんな感じでホバーで型定義が確認できるところがいいですね。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/ce10752003984656b09e5d543258de21/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2018.57.49.png" alt="">

type

次にinterface<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d4ed6b36ffdb4b4f9992d7f904359734/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2018.57.28.png" alt="">こっちはホバーしても確認はできません。 ただし、interfaceは継承することができます。 継承(extends)<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/cbea8ed2132d44c19529fbb68922f0f5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.03.03.png" alt="">typeでは型の継承はできないです。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/22aed711d8b24e0193836c2f071adf6d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.14.53.png" alt="">

interface

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3e7f34b67601449482dc74dfb4a60c4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.09.53.png" alt="">labelを取り除いた型定義になりました。こちらはinterface→typeでの定義が可能です。

Omit

<pre><code>interface Hoge {
 className?: string;
 label: string;
 onClick?: () =&gt; void;
};

// 複数指定するときは|を使用
type Huga = Pick&lt;Hoge, "label" | "className"&gt;;</code></pre>結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b13533ee1e344288bb51581f4d0fc708/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.24.34.png" alt="">

Pick

<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d51c0105ab9f4642a17f14b8d0bade29/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2019.20.34.png" alt="">stringかnumberか判断してくれます。

型宣言の条件分岐

?がついている型は宣言が任意ですが、指定がない場合の初期値を設定することができます。<pre><code>interface Hoge {
 className?: string;
};</code></pre>宣言<pre><code>Page.defaultProps = {
 className: null,
};</code></pre>

defaultProps

おまけ

typeScriptが使われる現場がかなり多いと思いますので不要な型宣言を増やさないように実装していきたいですね。

typeScriptのtypeとinterfaceの違い

公式<a href="https://github.com/pmndrs/zustand" target="_blank" rel="noopener noreferrer">https://github.com/pmndrs/zustand</a> 軽量なグローバル管理ライブラリです。Reduxを使用するとめんどくさいので業務でも個人開発でも使用してます。<pre><code>import { create } from 'zustand'

const useBearStore = create((set) =&gt; ({
 bears: 0,
 increasePopulation: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
 removeAllBears: () =&gt; set({ bears: 0 }),
}))</code></pre> <pre><code>function BearCounter() {
 const bears = useBearStore((state) =&gt; state.bears)
 return &lt;h1&gt;{bears} around here ...&lt;/h1&gt;
}

function Controls() {
 const increasePopulation = useBearStore((state) =&gt; state.increasePopulation)
 return &lt;button onClick={increasePopulation}&gt;one up&lt;/button&gt;
}</code></pre>

zustand

公式<a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer">https://storybook.js.org/</a> コンポーネントごとに単体テストが簡単にできるようになります。個々にstorybookのファイルを作成しないといけないので業務ではリソース次第で採用するといいと思います。 こんな感じのページが生成されます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/39f5d58dc5504b50ae02649bf20f3281/mdx-example.png" alt="">

Storybook

classに直接書いていくとどうしても可読性が下がってしまうので必要な時に使用するといいと思います。(tailwindには@applyというオプションもあるのですが、ホバーでスタイル確認できないので 簡単なのですぐ使えると思います。<pre><code>import { tw } from "tw-tag";

// ()で囲むとホバー時にスタイルが確認できる。
const error_message = tw(`text-red-600 text-sm mb-2`);

&lt;p className={`${error_message} mx-auto`} style={{ whiteSpace: "pre-wrap" }}&gt;
	{errorMessage}
&lt;/p&gt;</code></pre>

tw-tag

いかがでしたでしょうか？ 他にも便利なライブラリがたくさんありますので、探してみるのもいいかもしれませんね。

【React】使ってみていい感じだったライブラリ

暗号化<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/38a3e35a0c8d4d679607204542419512/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.15.54.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/3fdc245d6ba84317961702a32887d948/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.17.37.png" alt="">Wklv lv d whvw phvvdjh iru wkh Fdhvdu flskhu.これが暗号ですね。 これをリフレクターというもので復号化してみます。 リフレクター<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/d4ce4402851047248d03eb70dc3584c7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.21.28.png" alt="">結果<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/60d90a5a726748a2abdf38d560dc6327/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2016.22.06.png" alt=""> ただ反転してるだけなんですけどね

実装

ネットが普及してる今のご時世ではセキュリティ対策はエンジニアにとっても大事なものとなってますね。 イミテーションゲームという映画ではこれより遥かに複雑なエニグマという暗号が使われてたり(初めてコンピュータで暗号を復号化されたのもエニグマだったような.... 興味のある方は暗号の歴史から追うのも面白いかと思います！

JavaScriptでシーザー暗号を実装してみる

これはよく見かけるmargin-top<pre><code>&lt;div className="flex justify-center items-center p-12"&gt;
 &lt;h1&gt;見出し&lt;/h1&gt;
 &lt;p className="mt-2"&gt;hoge&lt;/p&gt;
 &lt;p className="mt-2"&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> gapを使うと均等に余白を取ってくれます。<pre><code>&lt;div className="flex justify-center items-center p-12 gap-2"&gt;
 &lt;h1&gt;見出し&lt;/h1&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> イメージとしてこんな感じです。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/664a5a1fdb4547caabea818a4cf95594/Group%2067.png" alt="">

marginに頼りすぎている

tailwindのdocsにも書かれていますがw-4やw-80などの数字はrem指定です。(w-4 = width: 1rem; / 16px /fullや1/2などは%指定となってます。<a href="https://tailwindcss.com/docs/width" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/width</a> よく見かけるのが <pre><code>&lt;div className="w-full"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
&lt;/div&gt;</code></pre>親が%はダメです。基準としてみるwidthがないのでダメです。 親で100%を取りたい場合はscreenを使いましょう。<pre><code>&lt;div className="w-screen"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
&lt;/div&gt;</code></pre>

基準のない%指定

背景だけ50%透過したいとします。opacityを使うと子要素にも透過が適用されてしまいます。<pre><code>&lt;div className="w-screen hscreen bg-sky-500 opacity-5"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre> bg-sky-500/50で背景のみ50%透過することができます。<pre><code>&lt;div className="w-screen hscreen bg-sky-500/50"&gt;
 &lt;p&gt;hoge&lt;/p&gt;
 &lt;p&gt;huga&lt;/p&gt;
&lt;/div&gt;</code></pre>

opactyを単体の要素にのみ適応

よく見かけるレイアウト構造を例に紹介していきました。できるだけ親要素がclassを持っている方が分かりやすいかなと思います。

レイアウト構造を考え直してみる

App Store リンク：<a href="https://apps.apple.com/jp/app/daisydisk/id411643860?mt=12" target="_blank" rel="noopener noreferrer">https://apps.apple.com/jp/app/daisydisk/id411643860?mt=12</a> 料金：1500円 概要：Macのストレージ使用状況を階層構造で可視化してくれるアプリです。どのファイル・フォルダにどれくらいの容量が使用されているのかが一目でわかり、そのままアプリ上から削除することも可能になっています。ユーザーインターフェースが非常にシンプルで洗練されているので、面倒だったデータの整理が少し楽しくなり重宝しています。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/f6411a398bed496cb13edb306129e145/Screenshot%202024-01-04%20at%2013.21.54.png" alt="">

DaisyDisk

App Store リンク：<a href="https://apps.apple.com/jp/app/as-timer/id512464723?mt=12" target="_blank" rel="noopener noreferrer">https://apps.apple.com/jp/app/as-timer/id512464723?mt=12</a> 料金：無料 概要：タイマー機能のみの非常にシンプルなアプリです。MacOSのタイマーにはない無音アラームの機能やウインドウの最前面に固定する機能など、単純ですが意外となかった機能が備わっていて優秀です。

AS Timer

GitHub リンク：<a href="https://github.com/SelfControlApp/selfcontrol" target="_blank" rel="noopener noreferrer">https://github.com/SelfControlApp/selfcontrol</a> 料金：無料 概要：あらかじめ登録しておいたサイトを設定された時間の間閲覧できなくなるアプリです。別途で曜日ごとに時間設定できる設定アプリ(<a href="https://github.com/AlexanderDickie/auto-selfcontrol-rs" target="_blank" rel="noopener noreferrer">こちら</a>)もあるので、そちらも合わせて使用すると手間が省けて生産性爆上がりです。本業終わりの自学自習や副業の時に気を抜くとついつい関係のないサイトやYoutubeを見てしまうなんて方はぜひ使ってみてください。

SelfControl

非常にざっくりとした紹介でしたがいかがだったでしょうか。個人的に一番オススメなのは最初に紹介したDaisyDiskです。今回紹介したアプリをまだ使ったことがない方はぜひ導入して試してみてください。

2023年に導入した個人的便利アプリ3選

そもそもReactHookFormって何？と思う方もいるかもしれませんので簡単に説明するとフォームに対してバリデーションをかけてくれるReact専用ライブラリです。 公式でも拡張機能に優れていると自負していますが、バリデーションで言うとresolverオプションに<a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener noreferrer">Zod</a>、<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">Yup</a> などの別のバリデーションライブラリを設定することができ、<a href="https://mui.com/" target="_blank" rel="noopener noreferrer">mui</a>などのコンポーネントライブラリと組み合わせることもできます。 muiと組み合わせるとこんな感じです。(muiはデフォルトでアニメーションがついてるのでかっこいいです！赤文字がReact Hook Formのバリデーション部分となります。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4a3409894257435fac2cff5647bb09ad/screencapture-localhost-3000-Login-2024-01-04-12_42_59.png" alt=""> 公式のデモからも実際にフォームを入力して確かめることができます。<a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">React Hook Form</a>

ReactHookFormとは？

【React】ReactHookFormのinputを分割して送信時に結合する。

フォーム分割の利点はユーザの入力工数を減らせることにあります。<h3 id="ha133a18a47">数字入力の桁数が多い場合</h3>分割なし1232343454565676<ul><li>何桁?</li><li>どこを間違えたか分かりづらい</li></ul> 入力が分割されている場合1232 3434 5456 5676 <h3 id="hdd7e77fb12">日付などの間に/が必要な場合</h3>分割なしYY/MM<ul><li>/までユーザに入力させている。</li></ul> 入力が分割されている場合YY MM

input分割の利点

では本題に移っていきます。 まず完成をお見せします。<pre><code>"use client";

import React, { useState } from "react";
import { useForm, SubmitHandler, Controller } from "react-hook-form";

type FormData = {
 birthday: string;
};

export default function page() {
 const [isValue, setIsValue] = useState("");
 const {
 control,
 handleSubmit,
 formState: { errors },
 } = useForm&lt;FormData&gt;();


 const onSubmit: SubmitHandler&lt;FormData&gt; = (data) =&gt; {
 setIsValue(data.birthday);
 };


 return (
 &lt;div className="flex justify-center items-center w-screen h-screen flex-col"&gt;
 {isValue &amp;&amp; (
 &lt;p className="mb-8 text-lg"&gt;
 あなたの生年月日は&lt;span className="text-blue-600"&gt;{isValue}&lt;/span&gt;
 です。
 &lt;/p&gt;
 )}
 &lt;form onSubmit={handleSubmit(onSubmit)} className="flex w-50 h-50 p-12 bg-gray-400 gap-8 flex-col"&gt;
 &lt;div&gt;
 &lt;label&gt;生年月日&lt;/label&gt;
 &lt;Controller
 name="birthday"
 control={control}
 rules={{ required: true }}
 render={({ field }) =&gt; (
 &lt;div className="flex !w-2/4 items-center"&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Year"
 placeholder="年"
 onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={4}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Mouth"
 placeholder="月"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = e.target.value;
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Day"
 placeholder="日"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = field.value?.split("/")[1];
 const dayValue = e.target.value;
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;/div&gt;
 )}
 /&gt;
 {errors.birthday &amp;&amp; &lt;p className="text-red-600"&gt;{errors.birthday.message}&lt;/p&gt;}
 &lt;/div&gt;
 &lt;button className="h-10" type="submit"&gt;
 送信
 &lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}</code></pre> 大事な部分はonChangeです。<pre><code> onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}</code></pre> この部分で結合してfieldに返してます。<pre><code>const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
field.onChange(newBirthdayValue);</code></pre> 送信してみると<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5f906f724bbd4488a3e1c92b55f23e64/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.18.54.png" alt=""><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b11058d9b71347719097fc2b2974e3a3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.19.01.png" alt="">/区切りになってますね。

ReactHookFormのcontrollerを複数用意して個別にバリデーションをかけたり、結合された値にバリデーションをかけたりできるので用途に応じて柔軟に利用できるところがいいですね。 それでは、次回の記事でお会いしましょう！

【React】React Hook Formでフォーム分割して送信時にデータ結合する

以下の例を参考に<code>ssh-keygen</code>を実行して鍵を生成します。<pre><code>$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/home/ec2-user/.ssh/id_rsa): そのままEnter
/home/ec2-user/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase): そのままEnter
Enter same passphrase again: そのままEnter
Your identification has been saved in /home/ec2-user/.ssh/id_rsa.
Your public key has been saved in /home/ec2-user/.ssh/id_rsa.pub.
The key fingerprint is:
ce:97:a8:d8:3b:d4:8d:95:22:68:e0:e2:8e:58:8d:ce ec2-user@ip-x-x-x-xx
The key's randomart image is:
+--[ RSA 2048]----+
| . 省略&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;|
+-----------------+

$ cat ~/.ssh/id_rsa
-----BEGIN RSA PRIVATE KEY-----
MIIEpAIBAAKCAQEAyZfh5ztQIQCwPIQAGFZD9kv1ihU9RP9WCBsfSp7JlNs0eNol
...省略
-----END RSA PRIVATE KEY-----

$ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDJl+HnO1AhALA8hAAYVkP2S/WKFT1E...省略</code></pre>

1. ssh-keygenで公開鍵、秘密鍵を作る

以下の手順で公開鍵をCodeCommitのIAMユーザーに登録します。 <ol><li>AWSコンソールにログイン</li><li>IAM &gt; セキュリティ認証情報 &gt; AWS CodeCommit認証情報 を開く</li><li>AWS CodeCommitのSSH公開キー の 「SSH公開キーのアップロード」を押下</li><li>先ほど生成したid_rsa.pubの中身をコピペしてアップロードする。※アップロードするのは<code>id_rsa.pub</code>なので注意すること。<code>id_rsa</code>は絶対にアップロードしない。</li><li>アップロード完了してSSH Key ID が生成されたらOK</li></ol>

2. 公開鍵をCodeCommitのIAMユーザに登録する

~/.ssh/configに以下の設定を追記します。(configが無い場合は作成してください) <pre><code># プロジェクト名
Host git-codecommit.ap-northeast-1.amazonaws.com
&nbsp;&nbsp;User &lt;先ほど生成した SSH Key ID&gt;
&nbsp;&nbsp;IdentityFile ~/.ssh/id_rsa</code></pre>

3. .ssh/configに設定を追加する

CodeCommitからSSHのクローンでgit cloneします。成功したら設定は完了です。

4. ssh接続でgit cloneする

AWS CodeCommitからSSH接続でgit cloneする

アイテムをテーブルに1件追加したい場合にはput_item()を使用します。<pre><code>table.put_item(
 Item={
 'username': 'janedoe',
 'first_name': 'Jane',
 'last_name': 'Doe',
 'age': 25,
 'account_type': 'standard_user',
 }
)</code></pre>

DynamoDB.Table.put_item():

アイテムの追加

一度に大量のデータをロードする場合は、batch_writer()を利用すると、プロセスを高速化し、サービスに対する書き込みリクエストの数を減らすことができます。DynamoDBは一度にputできる数が最大25という制限がありますが、boto3のbatch_writer()を使えば、特に気にすることなくよしなにやってくれます。 <pre><code>with table.batch_writer() as batch:
&nbsp;&nbsp;batch.put_item(
&nbsp;&nbsp;&nbsp;&nbsp;Item={
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'account_type': 'standard_user',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'username': 'johndoe',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'first_name': 'John',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'last_name': 'Doe',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'age': 25,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'address': {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'road': '1 Jefferson Street',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'city': 'Los Angeles',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'state': 'CA',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'zipcode': 90001
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;)
&nbsp;&nbsp;batch.put_item(
&nbsp;&nbsp;&nbsp;&nbsp;Item={
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'account_type': 'super_user',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'username': 'janedoering',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'first_name': 'Jane',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'last_name': 'Doering',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'age': 40,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'address': {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'road': '2 Washington Avenue',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'city': 'Seattle',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'state': 'WA',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'zipcode': 98109
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;)
&nbsp;&nbsp;batch.put_item(
&nbsp;&nbsp;&nbsp;&nbsp;Item={
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'account_type': 'standard_user',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'username': 'bobsmith',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'first_name': 'Bob',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'last_name':&nbsp;'Smith',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'age': 18,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'address': {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'road': '3 Madison Lane',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'city': 'Louisville',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'state': 'KY',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'zipcode': 40213
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;)
&nbsp;&nbsp;batch.put_item(
&nbsp;&nbsp;&nbsp;&nbsp;Item={
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'account_type': 'super_user',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'username': 'alicedoe',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'first_name': 'Alice',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'last_name': 'Doe',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'age': 27,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'address': {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'road': '1 Jefferson Street',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'city': 'Los Angeles',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'state': 'CA',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'zipcode': 90001
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;)</code></pre>

DynamoDB.Table.batch_writer():

複数アイテムの追加

アイテムを1件取得するにはget_item()を使用します。<pre><code>response = table.get_item(
&nbsp;&nbsp;Key={
&nbsp;&nbsp;&nbsp;&nbsp;'username': 'janedoe',
&nbsp;&nbsp;&nbsp;&nbsp;'last_name': 'Doe'
&nbsp;&nbsp;}
)
item = response['Item']
print(item)</code></pre>

DynamoDB.Table.get_item():

アイテムの取得

ハッシュキー、ソートキー、GSIで検索する場合にはKeyを使用します。<pre><code>response = table.query(
 KeyConditionExpression=Key('username').eq('johndoe')
)
items = response['Items']
print(items)</code></pre>

DynamoDB.Table.query():

ハッシュキー、ソートキー、GSI以外で検索する場合にはAttrを使用します。MySQLなどのIN句に相当する is_in はscan()でのみ使用可能です。<pre><code>response = table.scan(
 FilterExpression=Attr('age').lt(27)
)
items = response['Items']
print(items)</code></pre>

DynamoDB.Table.scan():

複数アイテムの取得

【AWS】boto3でDynamoDBを操作するときによく使うメソッド

<code>$ rm go.sum</code>を実行して go.sum ファイルを一度削除します。

1.go.sumファイルを削除する

<code>$ go clean -modcache</code>go.sum ファイルを削除してもキャッシュが残ってる場合はエラーになるようなので、キャッシュを削除します。

2.キャッシュを削除する

<code>$ go mod tidy</code>を実行してエラーが発生しなければ完了です。

3. go mod tidy でエラーが出なければ成功

<code>$ go mod tidy</code> した際に以下のエラーが出た場合には、再度手順1から実行直してください。 <pre><code>/project # go mod tidy
go: downloading github.com/mattn/go-sqlite3 v1.14.14
verifying github.com/klauspost/compress@v1.15.6: zip: not a valid zip file</code></pre>

※再度 go mod tidy でエラーが発生した場合

【Go言語】go mod tidy, go generateで エラーが発生した時の対処法

Dockerは、ソフトウェアをコンテナという単位でパッケージ化するためのプラットフォームです。コンテナは、アプリケーションとその依存関係を一緒に包み込むことで、アプリケーションがどの環境でも同じように動作することを保証します。

Dockerとは何か？

Dockerの主な利点は、開発とデプロイメントのプロセスを簡素化することです。Dockerを使用すると、開発者はローカルマシン上でアプリケーションを開発し、そのまま本番環境にデプロイすることもできます。

Dockerの利点

Dockerを使用する基本的なステップは次のとおりです <ol><li>Dockerfileを作成します。これは、コンテナイメージを作成するためのレシピです。</li><li>docker buildコマンドを使用して、Dockerfileからコンテナイメージを作成します。</li><li>docker runコマンドを使用して、コンテナイメージからコンテナを起動します。</li></ol>

Dockerの基本的な使い方

以上がDockerの基本的な概要と使い方です。詳細な情報は<a href="https://docs.docker.com/" target="_blank" rel="noopener noreferrer">Dockerの公式ドキュメンテーション</a>をご覧ください。Dockerを使って、より効率的な開発プロセスを体験しましょう。 それでは、次回の記事でお会いしましょう！

BuildersIO produced by YOKU

Scalaの型についてまとめてみた（その１）

Go言語のフレームワークentにER図生成ツールが導入されたので使ってみた

typeScriptのtypeとinterfaceの違い

【React】使ってみていい感じだったライブラリ

JavaScriptでシーザー暗号を実装してみる

レイアウト構造を考え直してみる

2023年に導入した個人的便利アプリ3選

【React】React Hook Formでフォーム分割して送信時にデータ結合する

AWS CodeCommitからSSH接続でgit cloneする

【AWS】boto3でDynamoDBを操作するときによく使うメソッド

【Go言語】go mod tidy, go generateでエラーが発生した時の対処法

Docker入門：超初心者向けガイド

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた

機密情報の漏洩を防ごう！～gitleaksの運用方法～

単体テストのベストプラクティス

Scalaの型についてまとめてみた（その１）

Go言語のフレームワークentにER図生成ツールが導入されたので使ってみた

typeScriptのtypeとinterfaceの違い

【React】使ってみていい感じだったライブラリ

JavaScriptでシーザー暗号を実装してみる

レイアウト構造を考え直してみる

2023年に導入した個人的便利アプリ3選

【React】React Hook Formでフォーム分割して送信時にデータ結合する

AWS CodeCommitからSSH接続でgit cloneする

【AWS】boto3でDynamoDBを操作するときによく使うメソッド

【Go言語】go mod tidy, go generateで エラーが発生した時の対処法

Docker入門：超初心者向けガイド

【Go言語】go mod tidy, go generateでエラーが発生した時の対処法