Tailwindで青枠を消す方法

# 起こっている問題
Tailwindを使っていると、ボタンを押したときに青枠が出てきます。
設定しなくても勝手に出てくるので、消す方法を探しました。

# 修正方法
“tailwind.css“の下記のコードをコメントアウトします

### 修正前
“`css:tailwind.css
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
“`

### 修正後
“`css:tailwind.css
/* button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
} */
“`

# 終わりに
これで青枠が

コンポーネントのmemo化

## 再レンダリングのタイミングと対象
1. stateが更新されたコンポーネント
2. propsに変更のあったコンポーネント
3. 再レンダリングされたコンポーネントの配下コンポーネント
※organismsが再レンダリングされるとmolecules・atomsも再レンダリングされる。

## 問題
今回取り上げる問題は3つ目のタイミング。
親のstateが更新された際に、子コンポーネントの再レンダリングを回避する。
そのために使うのがmemo。

“`
memo( ここに子コンポーネントの関数を入れる )
// 例
import {memo} from “react”
const test = memo( ({text}) => {
return

{text}

} )
“`
memoを付けたコンポーネントはpropsに変化が無い限り再描画されない。
※上記の例だとtextに変化がない限り再レンダリングは起きない。

【JavaScript】スコープの学習の振り返り②

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/d643787e022ff22e3cfc

#目的

* スコープについての理解を深める

#本題
###1.レキシカルスコープ

**コードを書く場所によって参照できる変数が変わるスコープのこと**です。

**実行中のコードからみた外部スコープのこと**という意味もある。

““javascript
// aを定義する（スクリプトスコープ）
let a = 2;
// 関数fn1を定義(スクリプトスコープ)
function fn1(){
// 関数fn1の中に変数bと関数fn2を定義(関数スコープ)
let b = 1;
console.log(b);
function fn2(){
// fn2の中に変数cを定義
let c = 3;
}

これからReact始めたい人のための今日だけでできるTODO#16 useEffect()の利用例

`useEffect()`を利用してクリックしたらページのタイトルも変更するコンポーネントを作成していきます。
[以前作ったカウンター](https://qiita.com/tanimoto-hikari/items/35a2549aebd72a34e298)に変更を加えていくかたちで進めます。

“`js
// ここに`useEffect`を利用できるように追記
import React, { useState, useEffect } from ‘react’;
import { Counter } from ‘./Counter’;
import { Hello } from ‘./Hello’;

// 初期値の定義
const initialCount = 0;
const initialName = ‘JavaScript’;

export default function App() {
const [count, setCount] = useState(initialCount);
const [name, setName] = useState(init

これからReact始めたい人のための今日だけでできるTODO#15 useEffect()

## useEffectって？
`useEffect()`に渡された関数の実行タイミングをコンポーネントの
– マウント後
– アマウント後
– 更新後
まで遅らせることができるフックのことです。

## Reactにおける副作用について
Reactでは、React管理外でDOMを更新する処理やAPIとの非同期通信等のデータ取得などのUI構築以外の処理のことを副作用と呼びます。
`useEffect()`によって副作用の実行タイミングをブラウザが描画し終えるまで遅延させることができます。
Reactは、副作用が実行されるタイミングではDOMが正しく更新されていることが保証されています。

## useEffectの利用
`import`でuseEffectを読み込みます。

“`js
import React, { useEffect } from ‘react’;
“`

### useEffectの基本構文

“`js
const function = () => console.log(‘hoge’);
useEffect(function, [依存する変数の配列]);
`

FigmaのプラグインをWebpackで構築する

# はじめに
Figmaのプラグインを作成する環境をWebpackを使って構築する方法は、下記の公式ドキュメントで案内されてます。
[Bundling with Webpack · Figma Developers](https://www.figma.com/plugin-docs/bundling-webpack/)

ただ、上記のドキュメントの通りにやってみたところエラーが出てしまい一部手を加えたので、備忘録的に記事に残しておきます。

# 1. デスクトップアプリから新しいプラグイン作成
Figmaデスクトップアプリのメニュー、plugins > Development > New plugin から新規プラグイン作成。
今回は「Figma design」の「With UI browser APIs」を選択。

# 2. パッケージのインス

jsイベント間引き – ES2015以降 – (throttle+debounce)

## 環境

– IEを考慮しないモダンブラウザ
– webpack などビルドを使用しないシンプルなプロジェクト
– VS Code で構文チェックを有効にしても認識できる状態

> ライブラリを使うほどでないが、 throttle だけは使用したいので参考サイトを基に構文チェックで認識されるように修正

## 結論

“`js
//@ts-check

class Sample {

/** 間引き処理 */
throttle = (() => {
let time = Date.now();
let lag = 0;
let debounceTimer = 0;
let debounceDelay = 16;

/**
* 間引き (throttle+debounce)
* @param {()=>void} callback 間引き処理
* @param {number} interval 間引き間隔 (default: 200

Rails+ReactでAjaxいいねボタンを作る方法

#はじめに
Ruby on Rails と React を用いてSPAのポートフォリオを作る中でAjaxでいいねボタンを作る必要があったのでその方法をシェアしたいと思います. 細かいcontrollerやmodelの作成については書いておりませんのでご了承ください.
なお, いいねボタンのアイコンにはFont Awesomeを使用します.

“`
【動作環境】
Rails 6.1.4
react-rails の gemを使用
“`

#1. Font Awesome からハートマークをインストール

“`sh
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/free-regular-svg-icons
“`
↓公式ページの通りインストール

https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

#2. フロント側の実装

“`react
import React, { useState } fr

ある日、太郎はシャローコピーの呪いにかけられた?

JavaScriptの参照渡しの呪いにかかったので解き方を書く.

# Take1

俺の名は太郎.どこにでもいる成人男性である.

スペックはこんな感じだ.

“`jsx
const iamTaro = {
name: ‘Taro’,
gender: ‘male’,
age: 28,
};
“`

そんなある日,魔の手が彼に襲いかかる.

“`jsx
const taro2sei = iamTaro;

taro2sei.age = 97;
“`

太郎は朝目覚めるとなんだか体が重くなっていた.

やっとのおもいで洗面所につき,鏡を見ると,おじいちゃんになっていた.

太郎:「なんでえええええええええ！！！？？？？？」

“`jsx
console.log(iamTaro);
“`

このときの太郎のスペック

“`jsx
{
name: ‘Taro’,
gender: ‘male’,
age: 97, // 書き換わってしまっている！！！
}
“`

## シャローコピー（参照渡し）とディープコピー（値渡し）のおさらい

今回の原因はシャロー

javascriptでブロックゲームを作ってみる

## はじめに
若手社員で勉強会を行っているのですが、せっかくIT企業に来たのだからゲームを作ってみたいという意見があったので、学習の一環としてjavascriptでよくあるブロックゲームを作ってみました。
作成のプロセスを、どのような流れ、どのような考えで実装したかを重視して整理しました。
似たようなゲームを作成する方の参考になれば幸いです。


## ブロックゲームのルール

縦20マス、横10マスのフィールドがあります。
フィールドの上から4つのマスで構成されたブロックが落ちてきます。
プレイヤーはそのブロックを操作してフィールドの最下段、もしくはすでに固定されているブロックの上に配置、固定します。
ブロックを固定した時に、ブロックが横一列に隙間なく並んだ場合、その列を消すことができます。
ブロックを固定すると

VueもReactもやったことないのでVanilla JSでやってみたSPA

# はじめに

まずは宣伝です。
このたび保育園を地図から探せる **保育園マップ** というサービスを作りました。

– [WEB版](https://hoikumap.jp/)
– [iOS版](https://apps.apple.com/jp/app/id1574454509)
– [Android版](https://play.google.com/store/apps/details?id=jp.hoikumap)

Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。
網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。

# Vanilla JS ＆ SPAとは？
**Vanilla（バニラ） JS**というのは何もフレームワークを使っていない素のJavaScriptのことです。
ただのJavaScriptなんですが、ジョークで[フレームワーク風の公式サイト？](http://vanilla-js.com/)っぽいものがあ

unified.jsでMarkdownをHTMLに変換する

unified.jsはAST（抽象構文木）を使いテキストフォーマットを変換できるライブラリです。
remark（Markdown）、rehype（HTML）、retext（自然言語）といったフォーマットの実装があります。

https://github.com/unifiedjs/unified

今回はremarkとrehypeを使い、MarkdownをHTMLに変換してみます。

# インストール

必要なパッケージをあらかじめインストールします。

“`
npm i unified
npm i remark-parse
npm i remark-rehype
npm i rehype-stringify
“`

unifiedはES Modulesとして提供されているので、Node.jsで使うには`package.json`に次の記載を追加する必要があるようです。

“`json:package.json
“type” : “module”
“`

# Markdownをパースする

unifiedではある形式のテキストをASTに変換する処理を`Parser`が担います。

はじめてのJavaScript⑤ 条件分岐-1 「if文 / else/ else if」

#目次
[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%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%81%AE%E6%A6%82%E8%A6%81
)
[3.if文](https://qiita.com/drafts#3-if%E6%96%87
)
[4.if elseを使用した実践](https://qiita.com/drafts#4-if-else%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E5%AE%9F%E8%B7%B5
)
[5.比較演算子](https://qiita.com/drafts#5-%E6%AF%94%E8%BC%83%E6%BC%94%E7%AE%97%E5%AD%90
)
[6.else if](https://qiita.com/Stack_up_Rising/items/ee1c7dc7053d

Next.jsのrouter.pushとrouter.replaceの違いとそれぞれの最適な使い道

## この記事について
Next.jsの router オブジェクトに存在するメソッドの `router.push` と `router.replace` が似ていて、どちらを使用するのがベストなのか分からなくなる場面があった為、それぞれの違いと最適な使い道についてNext.jsの実装を参考にしながらまとめました。

## [router.push](https://nextjs.org/docs/api-reference/next/router#routerpush)

### 構文
“`js
router.push(url, as, options)
“`

### できること
指定したリンクにぺージ遷移ができます。

### 型
`router.push`の返り値の型は`Promise`で、ジェネリクスで渡している型は`boolean`です。

“`js
push(url: Url, as?: Url, options?: TransitionOptions): Promise;
“`

### 使用例
“`js
import { useRoute

「スーパーリロード」location.reload(true)は現在使えない

#キャッシュを使用しないリロードを実装したかった。

javascript スーパーリロード 等で検索すると
location.reload(true)
trueを入れるとサーバーから読み込むが多数出てきたので、すぐ実装。
しかし、動作は上手くいかず…。
いろいろ調べた結果を書きます。

##スーパーリロード不可能
“`javascript:javascript
location.reload(true)
“`

##リダイレクト設定
“`javascript:javascript
window.location.href = window.location.href
“`
こちらなら実質スーパーリロード。
キャッシュを使用せずサーバーから直接読み込みます。

“`javascript:jQery
$(document).ready(function(){
if(document.URL.indexOf(“#”)==-1){
url = document.URL+”#”;
location = “#”;
window.location.h

【js】ハンバーガーメニューでうまくいかんかったやつ

自分用メモ

ハンバーガーメニューの表示非表示に下記のコードを入れてた。
けど、PCで普通のメニューが表示されてる状態からウィンドウ幅をうにうにするとハンバーガーボタンが出てるのに押せない。

“`js:だめ.js
$(window).on(“load”, function() {
var w = $(window).width();
var x = 1024;
if (w <= x) { //1024px以下 $(function(){ console.debug('ハンバーガー開始'); $('.ハンバーガーボタン').click(function(){ $('.ハンバーガーメニュー,.ハンバーガーボタン,body').toggleClass('f_js-open'); }); console.debug('ハンバーガー終わり'); }); } else { //1024px以上 console.debug('PCでちゅわ'); } }); ``` 修正したやつ。$(window).on("load"

【typescript】2種類の値の片方がもう一方の型を決定する型を作る【Discriminated unions】

## 何がしたかった

２種類のフォームがあるとします。

その二つは収集する情報が違うので入力された値を保持するオブジェクトには別の型が付いています。

“`ts
//名前と年齢を収集するフォーム
type FormValuesA = {
name :string,
age: number
}

//名前とメールアドレスを収集するフォーム
type FormValuesB = {
name :string,
email: string
}
“`

具体的には今回この2種類のフォームのどちらでも受け入れて、
条件分岐でそれぞれ定義したvuexのstateに保存する関数が書きたいと思ってこんな感じの関数を書きました。

“`ts
type FormType = “formA” | “formB”
type FormValues = FormValuesA | FormValuesB

type FormObj = {
formType : FormType,
formValues: FormValues
}

const setFor

素のJavaScriptでローカルのXMLを読み込んで、新規のXMLを書き出す話

大本はRide with GPSからダウンロードした.gpxをGarminのOregonやeTrexで読める.gpxに変換するというお話です。

詳しい解説、実際に必要な箇所をユーザーが編集して動かせるサンプル…… そもそも何故こんなことをすることになったかの経緯はTicketnoteに書いてあります。よかったらあわせてどうぞ。
https://ticketnote.dev/ticket/DUpAHv85tU3vuFNuKE3v

—

Qiitaなので手短に。
HTMLとJavaScriptだけでローカルのXML（今回は.gpx）を読み込んで、読み込んだ内容から新規のXMLを書き出すというサンプルです。

【JavaScript】スコープの学習の振り返り①

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

#目的

* スコープについての理解を深める

#本題
###1.スコープとは

**実行中のコードから値と式が参照できる範囲のこと**
→５種類ある

###グローバルスコープとスクリプトスコープ

“`javascript
// 変数をそれぞれ定義
// スクリプトスコープ
let a = 0;
// グローバルスコープ
var b = 0;
function c(){}
// railsのbyebugみたいなやつ
debugger;
“`

ここでデベロッパーツールを使うと処理がdebuggerの部分で止まっています。

Sourcesをクリックした際に、右側のWindowでScriptと書かれた欄とGlobalと書かれた欄があります。

* letやconstで宣言されるとScriptの欄で表示されます。
* varやfunction()はWindowオ

Intersection Observer

##Intersection Observerを使ってみた。

“`javascript:javascript
const targetEle = document.querySelector(“.targetEle”);
const cb = function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(“inview”)
} else {
entry.target.classList.remove(“inview”)
}
})
}
const io = new IntersectionObserver(cb, options);
io.observe(targetEle)

“`

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考

https://qiita.com/tatsuyankm