JavaScript関連のことを調べてみた2021年06月23日

Node.jsのnpxでBusiness Card(電子名刺)を作る方法

##はじめに
先日、仕事でご一緒した方が、npxを使ったBusiness Cardで自己紹介をされていて、素敵だな〜と思ったので、真似させていただき作ってみました！！

##デモ
まず、早速デモをご紹介します。

ターミナルで

“`npx misa335“`

と入力してみてください。

このように表示されるはずです！

“`javascript
`♥･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♡･*:.｡ ｡.:*･ﾟ♥
Misako Kondoh

GitHub: https://github.com/misa335
Twitter JP: https://twitter.com/misas2pink
Twitter EN: https://twitter.com/__misakd
Qiita: https://qiita.com/__misakd
LinkedIn: https://www.linkedin.com/in/misa-k-engi

ReactでTextareaの高さを可変にする

## 問題点
textareaのstyleにline-heightを指定すると
入力された値が1行の時でも、余分に余白ができてしまった。。。

textareaの高さを入力された行数によって、可変にしたい。

## 結論
textareaのrow属性を動的に指定して、実現できた。

## コード(React_classコンポーネント)

#### constructor()

“`
constructor(){
super();
this.state={
text:”サンプルテキスト”
}
}
“`

#### 高さを計算する関数

* textarea内の改行は`\n`で取得できる
* 入力値を`\n`で分割すれば、改行数が取得できる

“`
calcTextAr

input type=dateの未入力時の「年/月/日」「yyyy/mm/dd」を非表示にする

　input type=dateの値が未入力のときに「年/月/日」「yyyy/mm/dd」と表示されたままになるのが見にくい、未入力のときは空欄のままにしてほしいという要望があり、いろいろ調べたけれど設定で変えることはできないようなので、強引ですがJavaScriptで文字色を変えるという方法で対処しました。

※「年/月/日」「yyyy/mm/dd」等の表記はブラウザに依存するため変更できません。これも属性値で変更出来たら楽なのになあ。

“`javascript
// 初期表示時の文字色変更
$(window).on(‘load’, function ()
{
$.each($(‘input[type=date]’), (index, datebox) =>
{
datebox.style.color = (datebox.value) ? ‘black’ : ‘white’;
}
);
}
);

$(function ()
{
// フォーカス取得時は入力用にいったん色を付ける
$(‘input[type=date]’).focus(

[日付の表示]yyyy/mm/ddのフォーマットにしたい

備忘録。

WebアプリでTo-doリストを作成中。
アイテムを作成した日付を付与し、アイテムと一緒に表示させたい。

その際、**日付のフォーマットをyyyy/mm/ddにする** 。←本記事で書くこと
（※9以下の数字には左に0を置きたい）
↓
日時の前に「00」、後に「slice(-2)」を置くことで実現！

※Nuxtで書いているので;省略などJsの文法無視しています
※　記事作成日：　2021年06月21日（日本）

“`Javascript
const d = new Date()
const fmt = d.getFullYear()

// document.write(d)
// => Mon Jun 21 2021 11:32:57 GMT+0900 (日本標準時)

// 年の表示
document.write(fmt) // => 2021
document.write(‘/’)

// 月の表示
document.write(d.getMonth() + 1) // => 6
document.write(‘/’)

// 月の表示（9以下の数字で左に

今更ながらRedux Toolkitに入門してみた①

# はじめに
今更ながらですがRedux Toolkit入門編①です。
②ではRedux Toolkitの主な機能を紹介し
③ではそれらを踏まえてTodoリストの作成をします。
間違っているところがあれば指定してくれると助かります！
この記事ではTypeScriptを使って行うのでTypeScriptを軽くわかった方向けになります。
また下記で行っているテンプレートの作成は最新版で少し中身が変わっている点があるのでご了承ください。

# そもそもReduxって何?ってなる人向け
Reduxは状態を管理してくれるフレームワークです。
開発の規模が大きくなるほど開発が容易になったりすることができるので大規模な開発においてよく使われていたりします。

###Reduxの流れ
– ユーザの操作により、componentのstateが変更される
– Action Creatorによって、Actionを生成する
– そのActionをdispatchする(Storeに送信)
– ActionとstateをReducerが受け取り、storeのstateを更新する
– 最後にstoreから更新された

配列vsオブジェクト(使い分けについて)

##はじめに
現在JavaScriptを学習＆復習をしています。
プログラミング学習においてこれとこれの使い分けは？という疑問が生まれてくると思います。
その中の一つである複数のデータを一つにまとめるデータ、配列とオブジェクト。
使い分けとそれぞれの特徴について深ぼれたら良いなと思います。
　結論、一つにまとめるデータですが配列とオブジェクトは持っている機能が違う為、データを処理する際にどちらが向いているのか考える必要があるのですが、判断するのはなかなか難しい場合もあります。

##選びやすい分類方法
　あくまでもイメージですが
エクセルなどの表計算を思い出してください。
あるデータをJavaScriptで使うときに、そのデータをエクセルに入力するとして、
「縦に並べて入力したいか」「横に並べて入力したいか」を思い浮かべてください。
そのデータを縦に並べたくなるのであれば、配列が向いています。

##配列
###例　都道府県などのリスト

|1|北海道|
|:—:|:—:|　
|2|青森|
|3|沖縄|
↓

“`