JavaScript関連のことを調べてみた2020年11月20日

react-hook-formの基本

久しぶりの投稿になります。今後は週一記事以上は書けるように頑張ります！今回はreact-hook-formについての記事です。公式ドキュメントの内容を、自分なりにまとめてみました。より詳しく知りたい方は公式ドキュメントも見てみて下さい！

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

## react-hook-formとは
inputとかのformに関係するデータを使う時に、Stateを使わなくて良くて、レンダリング回数を減らせる！

## インストール

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

## npmの場合
npm install react-hook-form
“`

以上！TypeScriptの型定義も含まれてます。

↓↓↓簡単な例

“`react
import React from ‘react’;
import { useForm } from ‘react-hook-form’;
import { ErrorMessage } from ‘@hookform/erro

【React】React Tableで行をクリックした際のonclickイベントハンドラを設定する方法

メモとして残します。

みんな大好き、[React Table](https://github.com/tannerlinsley/react-table/tree/v6 “reactTable”)ですが、行をクリックした際のイベントハンドラの設定方法メモとして残します。

#■やり方
下記の通り`getTdProps`プロパティに設定をします。

“`jsx
{
return {
onClick: e => {
//if(column.id !== ‘col-check’){
// 基本的な処理
// return
//}
}
}
}}
/>
“`

ちなみに、`getTrProps`というプロパティもありますが、このプロパティ

if (hoge) {~ 比較演算子を使わないIF文がどこまでを「true」とするのかを徹底的に検証してみた【テキスト版】

#前提
“`React
if (text) {
return true
} return false
“`

これは、私が実務で初めてこの書き方を目にした時、
「えっ、これ比較演算子書き忘れてるやん」って思ったんだけど（バカ、俺のバカ！）

こういうちゃんとした書き方があることを知り、
ちょっとした衝撃を受けた時のこと。

その後、
私も弱輩ながらこの書き方をマネし初めたが、
色々と上手く行かない…
　

そんなことから、一体この書き方が
####どの時が「true」で
####どの時に「false」を返すのか
を検証してみたところから始まる。

　
　
　
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
前回の記事で記述したが、
今回は動画にも起こしてみようと思ってたけど、
書いてみたら動画があると見辛そうなレイアウトになったので
次回【動画版】として掲載しようと思う。

[→前回の記事　【公開】Qiitaに投稿したYoutube動画を自動再生させる！](https://qiita.com/takada_impl/items/8

【Moment.js】日本語の時刻表示から午前・午後を判定する方法

## 前提
[Moment.js](https://momentjs.com/)で時刻表示を扱う場合は、まず時刻のフォーマットを指定して、文字列をmomentオブジェクトに変換しなければなりません。

以下のように第2引数で指定してあげましょう。

“`typescript
// 第2引数が大事！
moment(’13:00′, ‘HH:mm’);
“`
これで準備はOKです。

## コード
「午前」や「午後」という形にフォーマットする際は`A`または`a`を使います。
日本語の場合は「午前」も「午後」も漢字なので、どちらを指定しても大丈夫です。

“`typescript
moment.local(‘ja’);

const noon = moment(’12:00′, ‘HH:mm’).format(‘a’);
console.log(noon) // => 午後

const midnight = moment(’24:00′, ‘HH:mm’).format(‘a’);
console.log(midnight) // => 午前
“`

ただし、英語の場合は`A`と

【個人開発】日常用のメモ帳アプリ（PWAアプリ）をリリースしてみた

# はじめに

– 日常のメモにマークダウンは重量級過ぎた。
– テキストエリアをチョッピリ便利にしたくらいの感じが丁度いい。
– 作りました。

https://time-note.app/

# 見栄え感

# 技術スタック

– TypeScript
– vue + compositionAPI （仮想DOM + 状態管理）
– google drive api （データ保存）
– IndexedDB + CacheAPI （キャッシュ、ログアウトで全削除されます）
– service worker （PWA）
– firebase remote config （アップデートのお知らせ）
– firebase hosting （配信）
– webpack + eslint + prettier

# UIとUXに全力投

ほぼ未経験Webエンジニアが入社半年でしたことまとめ（2020/11）

#言語

・PHP
・HTML
・JavaScript
（・MySQL）

#やったこと

・Web開発用の開発環境構築（XAMPP設定など）（なんだかんだ３，４回した気がする）
・変数や配列など基礎的な内容を理解
・Ajax勉強
・オブジェクト指向の勉強
・セキュリティ少し学んだ
・DBについて少し学んだ
・より良いコードが書けるようにリーダブルコードを読んだ
・リーダブルコードを英語で読みたいと思い、原書を購入（まだ読んでない…）
・mapboxのチュートリアル的なページを確認
・HTMLとJavaScriptにmapboxAPIを組み合わせて、マップ情報を活用したHTMLファイル作成（指定場所の面積計算など）
・エンジニア数十人が書いたエッセイ集みたいな本を買って読んだ
・メルカリ創業の本を読んだ（サクセスストーリー感があって非常に面白かった）
・kotlinとswiftをすこし内容みてみた
・UdemyでswiftとJavaScriptのコース（英語）を受講（現在進行中）

#感想
・幅広く興味を持っていい経験ができた気がする
・mapboxに触れられたのはよかった
・Udem

馬鹿な。。。貴様は配列じゃない、、、オブジェクト、、、だと！？

# あ…ありのまま 起こった事を話すぜ！

おれは今　配列のデータを　ほんのちょっぴりだが　参照した

だが　配列のデータを参照できなかった

な…　何を言っているのか　わからねーと思うが　

おれも　何が起きたか　わからなかった…

頭がどうにかなりそうだった…　配列にデータがねぇだとか

そんなチャチなもんじゃあ　断じてねえ

もっと恐ろしいものの片鱗を　味わったぜ…

# 配列とオブジェクトってなんなんだ・・・・
なんか見た目似てるし、データ複数管理できるし、それぞれの違いってなんなんだよ。。。。。

# 配列
* 複数の値をまとめて管理する
* データの要素を“`[ ]“`を使って囲む
* 要素と呼ばれる“`0“`から始まる数字でデータを管理

“`js
const name = [“佐藤”,”鈴木”,”高橋”];
console.log(name);
// 出力結果： Array [“佐藤”, “鈴木”, “高橋”]

//要素を指定
console.log(name[0]);
// 出力結果： “佐藤”

console.log(name[1]);
// 出力

[Javascript]オブジェクトを定数に代入する

#オブジェクトを定数に代入する
定数itemにオブジェクト内の値を代入する
console.logで出力するとオブジェクト内の値をまるっと表示させる事ができる
#オブジェクトの値を取り出す
1行目は先ほどと同じようにitem定数に値を代入する
2行目でitem.nameでオブジェクト内のnameの値のみを出力する
![151236560518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72

三項演算子の使い方（独り言）

突然なのですが。
プログラミングを書いていて、こんな時はありませんか？

・処理の条件をifが使いづらい状況でも使いたい
・スマートに書きたい

こんな時は、三項演算子がおすすめです。

では実際にどのような時に使うのか？
どんな記述の仕方なのか？

例を見ていきたいと思います。co

“`
const test = “hoge”
return(

{ test ? “trueの処理” : “falseの処理”}

)
“`
このような書き方が「三項演算子と呼ばれるものです。」

今回の例でいうと、testという変数にhogeというString型の文字が入っています。
ifの処理でいうと、この処理はtrueと判定されるのでUIに出てくる文字は【trueの処理】とでてきます。

上の例を参考にして、もう少し分岐を多くすると

“`
const num = 100

{num < 99 ? "numは99より小さいです" : num > 1000 ? “numは1000より大きいです” : num === 100 ? “numは100です” : “h

Discord招待リンクをランダムに生成するボット

#はじめに

このボットはDiscordの招待リンクをランダムに生成できます。
生成したリンクは全部有効な招待であるわけではなく、大体無効な招待です。

このような感じです。

これを使えば、誰かのサーバーに入ることができるかもしれません。

*免責事項：これはただ教育のためのサンプルです。

# コード

| パラメータ | 意味 |
| — | — |
| l | リンクの長さ |
| c | リンクの字母の構成元素 |

l は生成するリンクの長さ、今Discordの招待リンクは8桁です（昔は6桁です）。
c はリンクの生成の条件、これを変えると、リンクの生成するモードは変わる。

例えば、

“`js

var c1 = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz”;

ハンバーガーメニューを開いても背景が透けない！？

ハンバーガーメニューを開いた際に、なぜか背景が透けなかったので原因を分析してみました。

元のコード
—

“`html:index.html

5歳娘「パパ、型ガードって何？」

## とある休日

娘（**5歳**）「ねえパパ」

ワイ「なんや？娘ちゃん」

娘「あのね」
娘「**TypeScript**を勉強してたら、**型ガード**っていう概念が出てきたんだけど」
娘「**型ガード**って何？」

ワイ「ああ、それはな」
ワイ「片面がクッキーで、もう片面がチョコのやつや」
ワイ「ほんで、チョコの面は**船の絵**みたいになってんねや」

娘「食べてみた〜い」

よめ太郎「それ**アルフォート**やないかい」

ワイ「Oh…よめ太郎…」

よめ太郎「そうやなくて」
よめ太郎「**型ガード**の話をしてんねん」
よめ太郎「変われ、わしが説明する」

## 選手交代

よめ太郎「そんで娘ちゃん」
よめ太郎「具体的にどういうタイミングで**型ガード**が気になったん？」

娘「ええとね」
娘「実は今、遊園地の**オンライン申し込みシステム**を作っててね」
娘「その遊園地では、12歳以下の子供は**料金が半額**になるから」
娘「あるユーザーが**12歳以下かどうか**を判定する関数を書こうとしてたの」

> 関数名： isChild
>
> – ユーザー

Vue.js、Firebase、axiosでパパッと掲示板！

# この記事の概要
超簡単な掲示板アプリをパパっと作成します。
細かいことはいいからとりあえずVue.jsで何かアプリを作ってみたいという方にオススメです。

# 目標物

***
# 開発環境

・macOS Catalina 10.15.7
・@vue/cli 4.5.6
・npm 6.9.0
・node v10.16.0

# 前提
・node、npm、vue-cli環境が整っている。
・firebaseのアカウントを作成している。
***

# firebaseのプロジェクト作成。
[firebase](https://firebase.google.com/?gclid=Cj0KCQiAqdP9BRDVARIsAGSZ8Al9ifR9EwAx4up5ikW0LE6fsiemc964Gh_UaU3n1jqC-GvF_xvwOJIaAgddEALw_wcB)に行き
【コンソールへ移動】
→【プロジェクトの作成】または【プロジェクトの追加】

プロジェクト

GASでプログラミング入門 Vol.7

# GASでプログラミング入門 Vol.7

社内サークルにてエンジニアから非エンジニアの方向けにプログラミングを教えるという活動を行っています。
今回はその教材第7弾です。
前回の記事は[こちら](https://qiita.com/YoshinagaYuta/items/c3cf64078edcd0df5fd7)

## 前回の演習問題の解答例

(1). 下記のプログラムを実行すると事前に意図した表示とは異なって表示されるプログラムになってしまっていました。意図した表示になるようにプログラムを修正して下さい。
また修正する際にはなるべくグローバル変数を使用しないように配慮して修正して下さい。

“`js
function myFunction(){
num = 1;
myFunction2();
console.log(“myFunction内でのnumは” + num + “です。”);
}
function myFunction2(){
num = num + 1;
console.log(“myFunction2内でのnum

【Visual Studio Code】コーディングに全集中できるショートカットキー

#VScodeショートカットキー紹介

VScodeでコーディングに全集中できるショートカットキーを紹介します！！

#Zenモード

`command + K` を押して、間を開けてから`Z`を押すとコードの画面のみにできます！

通常の画面に戻すときも上記と同じです。

?VScodeショートカットキー紹介

✨Zenモード

コーディングに全集中したい時は、

『cmd + K』 を押してから 、間を空けて、『Z』を押すとコードの画面のみで作業できます?戻す時も同じです。

参考：https://t.co/hvd5jWFQsJAddEventListenerでイベントをキャンセルする機能を実装したい

## やりたいこと
ページの入力フォームから情報を入力して送信する際、入力によってはアラートを出して情報を送信させないようにする機能を`AddEventListener`を使って実装したい。
今回は下記のような入力フォームがあって、2つのセレクトボックスからそれぞれ入力する情報を選択する。
もし各セレクトボックスから同じ選択肢を選んで「合体」ボタン（submitボタン）を押した場合、
アラ

元記事を表示

ECMAScriptでは一つの日付文字列形式しか定義してない

ユーザーが記事を投稿して、それを表示するというシンプルなシステムを作っている時の話。
ある日、IEで記事投稿の時刻表示が出ないと連絡があった。
コードを調べてもIE特有で表示できない部分がぱっと見では分からず、調べてみると`new Date()`にちょっとした落とし穴があったのでまとめ。（どちらかというと落とし穴があったのではなく自分から引っ掛かったが正解かも…）

### 問題点
当初の記事の時刻表示をするコードが以下

“`js
var content = ”;

var date = new Date(dateString); // APIで取得した日付の文字列をもとにDateインスタンス作成
if (date.toString() !== ‘Invalid Date’) {
content += ‘

‘;
// APIで受け取った日付を”YY.MM.DD HH:mm:ss”にする
content += date.getFullYear().toString().slice(-2) + ‘.’ + (date.getMonth() + 1) + ‘.’

Javascriptで現在時刻をyyyy/mm/ddの文字列で取得する方法

# Javascriptで現在時刻をyyyy/mm/ddの文字列で取得する方法

Javascriptで現在時刻をyyyy/mm/ddの文字列で取得する方法について備忘録的に記載します。

# Javascriptで現在日時の取得

Javascriptで現在日時の取得は

“`
new Date();
“`

を使ってDate型で取得出来る。これをyyyy/mm/dd形式に編集する場合、以下の様に年月日に分解してから連結する。

“`
let date = new Date(); // 現在日時の取得
let year = date.getFullYear(); // 年の取り出し
let month = date.getMonth()+1; // 月の取り出し
let day = date.getDate(); // 日の取り出し

window.confirm(year + “/” + month + “/” + day); // 現在日付表示
“`

現在日時が2020年10月10日の場合『2020/10/10』と表示される。
但し、現在日時が2021年1

【JavaScript】数値の表現

私自身の備忘録でもあります。
JavaScriptで数字を出力させる際、単に数字が並んでいるだけではなく
読みやすく、もしくは、簡素にする為の数字の表現方法です。

##数字を3桁毎にカンマを打って表示
###“.toLocaleString()“

“`js:test.js
const num = 12345;
num.toLocaleString();
“`
次のようになります。
**12,345**

##小数点以下切り捨て
###“Math.floor(hoge)“

“`js:test.js
const num = 123.456;
Math.floor(num)
“`
次のようになります。
**123**

##小数点以下切り上げ
###“Math.ceil(fuga)“

“`js:test.js
const num = 123.456;
Math.ceil(num)
“`
次のようになります。
**12