react-hook-formの使い方まとめ

久しぶりの投稿になります。今後は月1ぐらいで記事投稿できるようにに頑張ります！以前react-hook-formについての記事を書いたのですが、バージョン7になって大きく変わったので改めて書いてみました。バージョン7で大きく変わったので、バージョン7より前を使っている方も多いと思い、以前書いた記事も残しす形にしました。

バージョン6はこちら↓
[react-hook-formの使い方を解説 v6.13.0 useController追加!](https://qiita.com/NozomuTsuruta/items/0140acaee87b7c4ed856)

参考：[公式ドキュメント](https://react-hook-form.com/)

## react-hook-formとは
inputとかのformに関係するデータを使う際に、useStateを使うときよりもレンダリング回数を減らせたり、バリデーションも簡単に実装できてとても便利です！

## インストール

“`zsh
## yarnの場合
yarn add react-hook-form

## npmの場合
n

初心者のための静的サイト・ジェネレーター・ガイド④

初心者のための静的サイト・ジェネレーター・ガイド③の続きです。
③を読んでいない方はそちらから読むことをおすすめします:point_up:


著者：Thom Krupa@thomkrupa 2020年11月18日
原文：https://bejamas.io/blog/static-site-generators/

##9. Jekyll
最終更新日：2020年11月1日

Jekyllは、Rubyで書かれた静的サイトジェネレータです。基本的な機能（HTML、Markdowns、Liquid templating）を使用して、高速なウェブサイトを素早く作成します。そのため、現在のJavaScriptを必要とするWebの世界では少し不利になりますが、それにもかかわらず、最も人気があり有名なSSGのひとつとなっています。人気の理由としては、スピードやシ

【TypeScript】typeとinterfaceの違い

TypeScriptの`type`と`interface`の違いをまとめています。

#結論

**type**エイリアスは、複数の場所で使い回す**型に名前をつける**。

**interface**は、オブジェクトや関数の**構造を定義**する。

具体的なtypeとinterfaceの違いは以下です。

“`:①同名の宣言
typeは、同名のtypeを宣言するとエラー。
interfaceは、同名のinterfaceを宣言するとマージされる。
“`

“`:②継承
typeは、継承できない。
interfaceは、継承できる。
“`

#①同名の宣言

typeは同名のtypeを宣言できません。（エラーになる。）

“`ts
type Person = {
name: string
age: number
}

type Person = {
hight: number
}
//エラー
“`

interfaceは同名のinterfaceが宣言されるとマージされる。

“`ts
interface Person {
name: str

【JavaScript】クロージャを理解する

# はじめに
JavaScriptのクロージャの学習メモです。
誤りご指摘等あれば、気軽にコメントいただけると嬉しいです。

# クロージャとは？
自分の言葉で簡単に表現してみると
「定義した関数の外側のスコープにある変数や関数を参照できる仕組み（または関数）」のこと
だと理解しました。

公式だとこのように書かれてました。
[クロージャ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)
>クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。

# クロージャのメリット
関数内などの変数や関数などを他のプログラムから簡単に変更されないように制御できること。

# クロージャの実行サンプル
初期値の数値を引数で渡して、それをクロージャ関数（内部に定義した関数）から計算して、計算結果をコンソールに出力す

これからReact始めたい人のための今日だけでできるTODO#11 if文をJSX内に書きたい

## JSX内で表示の出しわけを記載したい
即時関数を利用するとJSX内にif文によるテキストの分岐処理を記述することができます。
`{}`中括弧で囲むことでJSX内に式を埋め込むことが可能になります。

“`js:App.js
return (

{(() => {
if (isReact) {
return ‘Hello! React!’;
} else {
return ‘Hello!’;
}
})()}

);
“`

ただ、コードの見通しが悪くなってしまうのはご覧の通りです。
書いている時もカッコの数がわからなくなりエラーを出してしまいました…

どうしてもJSX内で式を記述したい場合は『条件演算子（三項演算子）』を活用すると良いと思われます。
条件演算子を使うと先程の記述は以下のように修正できます。

“`js:App.js
return

{ isReact ? ‘Hello! React!’ : ‘Hello!’ }

;
“`

ついでに論理積演算

HLSを使って動画をストリーミング配信する

## 3つの映像配信方式

– **ストリーミング**
音声や動画ファイルを細かく分割（セグメント）して配信する仕組みです。
データを受信しながら再生を行うことができます。
ファイルを分割して配信しているので、動画の途中部分を開始地点としたデータの受信（再生）もできます。
受信したデータは視聴者側にファイルとして保存されないことが特徴です。
YouTubeなどの動画配信や、Spotifyなどの音楽配信もこれに分類されます。

– **プログレッシブダウンロード**
疑似ストリーミングとも呼ばれ、この方式もデータを受信しながら再生を行うことができます。
ただし、ストリーミングと異なり、動画の途中部分から受信を開始するといったことができません。
受信したデータはキャッシュファイルとして保存されます。
``といった記述では、この方式でデータを受信します。

– **ダウンロード**
前述2つとは異なり、ファイル自体を全て受信してから再生する仕組みです。
受信したデータは視聴者側にファイ

JavaScript 書き方メモ

##書く場所（HTML内に記述する場合）
特に理由が無い場合はbodyタグ内の一番下に記述する。
（理由）JavaScriptはHTMLが読み込まれてから実行されるため。

##コンソールログ
###書き方
“`javascript

“`

###確認方法

##ダイアログ出力
###書き方
“`javascript

“`

【Jest入門】Errorの評価しよう~toThrow関数~

# JestでErrorを確認しよう
JestでErrorを評価する際は、“`toThrow関数“`を使用します。

## “`toThrow関数“`
* [公式ドキュメント](https://jestjs.io/ja/docs/expect#tothrowerror)
* 正規表現: エラーメッセージがパターンに マッチする か検証します
* 文字列:エラーメッセージが文字列を含む か検証します
* error オブジェクト: エラーメッセージがオブジェクトのmessageプロパティと等しいかを検証します
* errorクラス： errorオブジェクトがそのクラスのインスタンスであるかを検証します

“`javascript:
test(“引数がないときにエラーを投げる”, () => {
class Foo {
constructor({ message }) {
this.message = message;
}
}

expect(() => new Foo()).toThrow(); // ErrorがThrowされたかチェッ

mapメソッドのまとめ

#はじめに
今日はmapメソッドについて学習したので内容をアウトプットしていきたいと思います。
最近、転職活動中で勉強時間に十分な時間を充てらなくもっと生産性を持って学習していきたいと思っている次第であります。

#mapメソッドとは
配列のArrayオブジェクトが持つメソッド。配列の全てのデータに対して指定した処理をおこない、新しい配列を作ることが可能。

>[MDNリファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

#mapメソッドの使用例

__数字の配列に対して一つずつ２倍にして新しい配列を作りたいと思います。__

“`javascript:エディター
var numbers = [1,2,3];
// ２倍した数字を置ける配列を作る
var doubledNumbers = [];

for(var i = 0; i < numbers.length; i++) { // 対象となる配列を２倍して配列に入れる do

JavaScript 基礎講座

目次

１.変数について
２.間違った記述
３.コメントについて
4.Hallowという文字を出してみよう。

変数とは何か

変数とはデータを入れる入れ物のことであり、データと必ずセットしなければ何の意味もありません。

“`
let sum;
sum = 5;
“`
説明すると、まず最初に　sumという入れもを用意しています。
次にその入れ物に５という値を入れています。

間違った記述

“`
let sum
sum = 5;

“`
この場合の間違いは　最初のsumの後ろを見てください。
;がないのがわかるでしょうか。これはエラーの原因になります。
初学者さんはよくありがちなミスだと思うので確認の際は気おつけてください。

JavaScriptのコメント記述方法

１行だけコメントアウトするばいはす//と打ってあげることあげることでその行だけがコメントアウトになります。

複数の行をまとめてコメントアウトする場合は、したいところの最初には/*と書いてください
コメントアウトしたい最後の一番後ろには*/と書く

Bookmarklet で String.replace() ができない・効かない【Edge】

## はじめに

　タイトルは「できない」としましたが、けっして Edge に何か不具合や落ち度があったわけではありません。この記事では「できない事態が起きたときに、コードの何を疑うべきか。どう対処したか」について記します。

　Edge で発生しました。他のブラウザではまだ確認していません。

## 発生した事象

　Bookmarklet を作成していて、その中に以下のような処理がありました。

“`js
var a = b.replace(‘ ‘, ‘%20’);
“`

　お察しの通り、URL エンコードした文字列をいろいろと操作する処理の一部です。

　これが Edge の Bookmarklet にしたとたん、何も replace されないということがおきました。

　しばらくハマったのですが、原因は、作成した Bookmarklet のコードをブックマークに登録した瞬間、以下のようなコードに書き換えられてしまったことです。

“`js
var a = b.replace(‘ ‘, ‘ ‘);
“`

　こりゃ replace されませんわ。

　どうも Edge

javascript 小技

## 複数の値のどれかにマッチ

“`javascript:before
if (a === 1 || a === 2 || a === 3) {};
“`

“`javascript:after
if ([1, 2, 3].includes(a)) {};
“`

## オブジェクトの分割代入

“`javascript:before
const obj = { a: 1, b: 2, c: 3 };
const a = obj.a;
const b = obj.b;
const c = obj.c;
“`

“`javascript:after
const obj = { a: 1, b: 2, c: 3 };
const { a, b, c } = obj;
“`

## 配列の分割代入

“`javascript:before
const coordinate = [26.197, 127.684];
const latitude = coordinate[0];
const longitude = coordinate[1];
“`

“`javascr

#1 TypeScriptでTA○IR○Nを作ってみた ~タイル配置編~

## 始めに
前回の記事はこちらになります
[#0 TypeScriptでTA○IR○Nを作ってみた ~環境構築編~](https://qiita.com/sts11142/items/90ac4af41ac7eb0b14ff)

前回で環境構築が終了したので、今回からいよいよゲーム本体の制作に取り掛かります。
と言いたいところですが、前回の設定では微妙にエラーが起きてしまうので、今回はその部分の訂正から始めます。

## TSのコンパイルに関わるエラー：
### モジュール選択

作業を進めていく中で、前回時点の`tsconfig.json`のままでコンパイルしたところ、ブラウザ上でこのようなエラーが出現しました。

“`json:tssonfig.json
{
“compilerOptions”: {
“module”: “commonjs”,
}
}
“`

“`
Uncaught ReferenceError: exports is not defined
“`

調べてみると、どうやら原因は自分のモジュール管理方式

indexOfをforするのはよくない

WebGL用に自前の関数で4Mb程度のobj読み込みをした
ポリゴン命令の頂点の重複除去をしたあと
index bufferの生成にindexOfを
全ポリゴン命令約21万に対して回していたら43秒掛かった
なんだこれは
# indexOf
どちらも検索開始位置を第二引数に指定できる
そこから配列の中を一つづつ検索していく
これは目的の要素を配列の最後に置いて二つを走らせることでわかる

一つだけのインデックスを調べたいのならこれでも十分だが
全要素に対して検索をすると膨大な時間がかかる

並べ替えや重複除去の操作をした後に
全要素の位置を配列に記録する等の用途であれば
先に辞書を作った方が良いことは明らか

#Map
new Map()はObject.fromEntries()のように引数に[[key,value]…]を渡すことでMapを作ることができる
今回はkeyに値を持ってvalueにインデックスを持たせたいがこれは.map()で簡単に作れる

“`js
new Map(array.map((x,i)=>[x,i]));
“`
このMapにインデックスが欲しい値を渡すと

オープニングアニメーションを作れるようになる記事

前に、noteでロゴアニメーションの記事を作ったんですが、プログラミング的なことを発信するようなアカウントじゃなかったので、こちらで再びオープニングアニメーションの記事として再利用することにしました(;・∀・)

オープニングアニメーションは、作ろうと思うと時間差で作らないといけないのでちょっと手間がかかると思うので、是非参考にしていただけたらなと思います。

ロゴに普通の画像をつかったものと、svgアニメーションを使ったものとで２つ用意しています。(上がsvg、下が画像)

完成品はこちらになります。
https://sakaij.github.io/logo-animation/index.html
https://sakaij.github.io/logo-animation/index2.html

SVGの方は、前使ったロゴアニメーションの使いまわしなので、サイズ感がおかしいですがご了承ください(=_=)
(春はあけぼの～などのアニメーションはオープニングアニメーションには関係ないですが、オープニングの幕が開いたときに本文に何もないと寂しいので入れています)

また非同期処理

はじめてのJavaScript② 「演算」

#目次
[1.はじめに](https://qiita.com/drafts#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.演算とは？](https://qiita.com/drafts#2-%E6%BC%94%E7%AE%97%E3%81%A8%E3%81%AF)
[3.四則演算と余り](https://qiita.com/drafts#3-%E5%9B%9B%E5%89%87%E6%BC%94%E7%AE%97%E3%81%A8%E4%BD%99%E3%82%8A
)
[4.実演](https://qiita.com/drafts#4-%E5%AE%9F%E6%BC%94
)
[5.おわりに](https://qiita.com/drafts#5-%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB)

##1. はじめに
本記事では、JavaScriptの「演算」について記載する。
##2. 演算とは？
:::note
・計算すること。運算。
・数学で、ある集合の要素間に一定の法則を適用して、他の要素を作りだす操作。二数間

URLとタイトルをコピーするブックマークレット（IE非対応）

現在のページのURLとタイトル、選択範囲テキストをコピーするブックマークレット（IE非対応）を作成。テキスト形式版は以下のような形式でコピーされる。

“`text
タイトル
URL
選択範囲テキスト
“`

Markdown形式版は以下のような形式でコピーされる。

“`markdown
[タイトル](URL)
選択範囲テキスト
“`

# 現在のページをコピー（テキスト形式）

“`javascript
javascript:(function copyToClipboard(text) {var d=document,k=d.getSelection,x=d.selection,e=window.getSelection,s=new String(e?e():(k)?k():(x?x.createRange().text:0)),a=d.title+”\n”+d.URL+(s.length?”\n”+s:””);return navigator.clipboard.writeText(a).then(function() {alert(‘コピーしました’)}).catc

Reactでアプリを作成しました【5】【Todo List ②】「自分用メモ」

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##【仕様】
– テキスト入力欄にタスクを書き込んでエンターキーを押すと下のリストに追加される。
– 完了したタスクは、チェックボックスを『ON』にする。視覚効果として、完了済みのタスクは文字を薄くなる。
– タブによるフィルタリング機能もあり、『All』を選択すると全てのタスク、『ToDo』を選択すると未完了のタスクのみ、『Done』を選択すると完了済みのタスクのみが表示される。
– 下部には表示中のタスク件数が表示される。

##【コンポーネント設計する】

#####アプリの作成（実装）を始める前に、どうアプリを作成するのかを下記の点を踏まえ、考える。
– どのようにコンポーネントを分けるか。
– それぞれのコンポーネントはど

献血データをダッシュボード管理画面にグラフ表示する（Vue.js）

# はじめに

こちらの投稿を拝見しました。

https://qiita.com/rana_kualu/items/38df213f5e30326a81a8

– 100回すごいなぁと思いつつ、自分の献血のデータを確認してみたところ、**30回弱**といったところでした。100回には遠く及ばないですが、データを表示する・調べるにはまぁまぁの数かなと思いました。

– また、以前からグラフや数字がかっこよく並ぶダッシュボード(管理画面)を作成したいと思っていましたが、データとして何を表示したらよいかと思案していました。これはなかなかいいデータではないかと思ったので、献血データを一画面でグラフで見られるようにしたいと思います。

– Vue.jsのテンプレートをダウンロードして必要なところを変更しながら作成してみたいと思います。Google検索で、「Vue.js　ダッシュボード　テンプレート」といった感じで調べればいい感じのものがたくさん見つかります。

今回使用したのはこちら
[https://coreui.io/vue/](https://coreui.io/vue/)

“`

これからReact始めたい人のための今日だけでできるTODO#10 if文を利用した出しわけ

## if文を利用した出しわけ
JavaScriptの「if文」を利用した分岐処理で切り替わるボタンを実装したいと思います。

今回のコードの全容です。

“`js:App.js
import React, { useState } from “react”

const LogoutButton = (props) => (
ログアウト
);

const LoginButton = (props) => (