falseになる変数を波括弧で囲むとtrueとして判断されるので注意が必要

5分くらい詰まったのでメモ。

falseを波括弧で囲んだコードがあるとする。
“`typescript:サンプルコード
const thisIsFalse = false

if ({thisIsFalse}) {
console.log(“HOGE”);
} else {
console.log(“HUGA”);
}

console.log({thisIsFalse})
“`

実行するとこんな感じに出力される。
“`出力結果
HOGE
[object Object]
“`

[JavaScriptのif文は、`Falsy`である値以外は全て`Truthy`として判断されるらしい。](https://developer.mozilla.org/ja/docs/Glossary/Truthy)
今回の例では`Falsy`として判断される８つ全てに当てはまらなかったため、`Truthy`として判断されたようだ。

【OpenLayers】ポイントデータを表示する

## はじめに
この記事は#30DayMapChallenge2022 15日目の記事です。
テーマはFood/drinkです。
OpenLayersを使ってスターバックスのポイントデータを表示してみます。


https://30daymapchallenge.com/

## OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした

## ポイントデータを取得する
QGISのプラグイン「QuickOSM」を使って日本のスターバックスのポイントデータを取得します。
QuickOSMについては[こちら](ht

【javascript】keyとvalueが逆になったオブジェクトを作りたい【リスペクト記事】

### この記事のハイライト

“`diff_javascript
– const reverseMap = Object.fromEntries(Object.entries(greetingMessageMap).map(a => a.reverse()))
+ const reverseMap = Object.fromEntries(Object.entries(greetingMessageMap).map(([key, value]) => [value, key]))
“`

以上

—

:::note warn
批判・反論記事ではありません
:::

いつも我々を楽しませてくれる記事をたくさん投稿してくれているやめ太郎氏、先日 Twitter にてこのような投稿が。
内容は書いてある通りで、「key と value が逆になったオブジェクトを作る」ためのスニペットです。
シンプルにワンライナーで使えて、とても役に立つ TIPS ですが、自分だったらこう書くかなーという部分があったので記事にしてみました。

https://twitter.com/Yametar

Promiseとasyncとawaitをできるだけ短く解説してみる

Promise…そうそれは
簡単そうに思えてややこしく、困難そうに思えて容易い、そんなラララですよね。

Promiseについて本気出して考えてみようと思うのですが、今回は前哨戦として、短くかみ砕いた解説をしてみます。asyncとawaitに触れるにはPromiseを避けられないので、Promiseはわずかばかり丁寧に。

## Promise

### Promiseの発生

Promiseは自分で作るか、関数の戻り値で発生します。

– Promiseを返す主な関数は `fetch` とか `fs.readFile` あたりだよ
– `new Promise(関数)` で生成することもできるよ

### Promiseがもつ3つの状態

`Promise` の状態は3つ。処理中の `pending` 、成功したときの `fulfilled` 、失敗の `rejected` のいずれかです。

– 例えばfetch関数なら実行した瞬間は `pending` 。完了すると `fulfilled` か `rejected` になるよ
– 状態が fullfilledとrejectedのP

?JS初心者が作るGoogle extension V3 ⑪ -content.jsの処理-

前回の続き　→ [?JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/5e80fa8fca2fa51b7445)

完成した作品は　→　[こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)

## content.js
“content.js“では実際にタイマーの通知画面や音声、そして一番重要なポメラニアンを表示させる処理を行います。

bgから、指定した時間になったらポメなどを出して〜という指示を入れましたが、そのポメを表示するため、拡張ディレクトリ内の画像にアクセスする必要があるのでその処理を行います。

content.jsの流れはこんな感じです。
・拡張ディレクトリ内の画像や音声にアクセスする
・画像や音声をHTMLに埋め込む
・キャラクターとdialo

Javascript(React)内でタグ補完がされない

結論:Emmetをいじろう

前提:拡張機能からJavascript ES6 code snippがダウンロード済

Ctrl+「,」で設定を開き、検索欄にemmetと入力
Emmet: Include Languagesを選択して項目に「javascript」値に「javascriptreact」を入力する。

Reactの第一歩。renderって何なの？(メモ)

個人的なメモ帳代わり。自分と同様の疑問を持った方は参考にどうぞ。Qiitaの記事を書く練習も兼ねて。理解が深くなれば追記予定。

# Q.そもそもレンダリングとは何ぞや？

調べる。

## A.要するに指定したリソースをブラウザ画面に表示すること。
レンダリングの仕組みなどについては以下の参考URLから。

https://zenn.dev/oreo2990/articles/280d39a45c203e

参考URL

https://mabui.org/react-render-description/

# ・Reactには二種類のrenderメソッドがある。

### 1.ReactDOM.render()
Reactエレメントをドキュメント(生成されるhtml等の文書)にレンダリングするもの。

### 2.Reactコンポーネントのクラスで呼び出されているrender
JSXなどで定義されたReactエレメントを返す処理を行っている。

# 両メソッドとも、複数のコンポーネントを返すことは出来ない。
レンダリングが目的のメソッドなので、その他の処理を持たせないようす

Reactを扱う上でのJavascriptの基本(分割代入、スプレッド構文、論理演算子、三項演算子など)

最近業務でReactを使用しているが、Jsの基本がわかっていなかったため、コードリーディングに苦労しました。
この記事では、Reactを解読する上で欠かせないJsの構文をまとめたので、よかったら参考にしていただけると幸いです。

### 分割代入(オブジェクトや配列から値を抽出するためのもの)

オブジェクト(↓name: ‘桃太郎’のようなプロパティからなる変数を「オブジェクト」という。)
“`
const person = {
name: ‘桃太郎’,
age: 13,
birth_place: ” Japan”
}

const { name, age, birth_place } = person

console.log(name) => 桃太郎
console.log(age) => 13
console.log(birth_place) => Japan
“`

配列（[]で括り、中に数字や文字列を書き、「,」でつなげたもの）
“`
const array = [ “田中”, 21, “北海道” ]

const [ name, age, birth

【JavaScript】既存のリストを編集する方法(ToDoList)

## はじめに
JavaScriptでToDoListを作った際に、あまり参考にできる記事が見つからず、難しかったと感じたコードについて記事を書いてみました。良かったら参考にしてみてください！

## 解説
作成した既存のリストの編集ボタンを押すと文字がフォームに変わってその場で編集できるようにしてみます！さらには編集時には既存のボタンを削除し、保存ボタンにして編集内容が保存されるようにします。

#### index.js
“`javascript
// 編集ボタンクリック
const editTask = (id) => {
const currentList = todos.find((todo) => {
return todo.id === id;
});

const listParentNode = document.getElementById(`div-${id}`);
// ここでのdiv-${id}はのちに作成した親要素のidのvalueです。

// 子要素取得
const text = listParentNode.child

【Rome v10】垂直統合ツールチェーンRomeがついにstableになったよ

# Romeってなに？

フロントエンドはいまだに混沌の極みです。
○○には××、△△には□□、??には♨♨、といった具合で様々なツールを駆使しなければなりません。
異なる作者が作っている異なる思想のツールの詰め合わせなので、ツールによっては設定項目が喧嘩したり、無意味な設定があったり、設定ファイル形式が異なるなんてこともよくあります。
それらをどうにかするためにツール詰め合わせツールなんてものも現れていますが、広範に対応するため最大公約数的な設定しかなされておらず、細かく調整するには結局それぞれのツールについて深く知らなければなりません。
私は単にWebサイトを作りたいだけであって開発環境構築マニアではないので、そんな面倒なことをやりたいわけではないんだ。

ということで、そんな混沌をどうにかすべく登場したのが[Rome](https://rome.tools/)です。
最初から最後までをひとつの設計思想で貫き通すことで、設定が容易になり、無駄を省き、高いパフォーマンスを発揮します。

で、Romeは元々JavaScriptで書かれていたのですが、JavaScriptだとどうしても遅

Inertia.js&ReactでcreateRootを使って警告を回避する

最新版のReact18とInertiaを用いてLaravelとReactを共存させた時、consoleに以下のような警告が出ました。

“`
Warning: ReactDOM.render is no longer supported in React 18.
Use createRoot instead.
Until you switch to the new API, your app will behave as if it’s running React 17.
Learn more: https://reactjs.org/link/switch-to-createroot
“`

自分がこの警告に遭遇したとき、Reactコンポーネントの処理がなぜかページの読み込み時に走らないという問題に悩まされていました。警告に従って適切にコードを変更することで、この問題は解決しました。
公式ドキュメントに従って、以下のように記載しているときにこの警告が発生します。必要な部分は適宜読み替えてください。

“`react:resources/js/app.jsx
import

RSSとAWS-Lambdaを使って自社ホームページにQiita記事を掲載する方法メモ

# はじめに
RSSとAWSのLAMBDAを使って自社ホームページにQiita記事を掲載する方法のメモ
Qiitaに限らず、CORS制限のかかっているRSS取得全般で使えるのではないかと思う
本メモでは主に、
・QiitaのRSS取得ロジック（Lambda関数内）
・非同期でLambda関数呼び出し、XML形式からJsonへの変換（JS）
を記録している

株式会社Growfit HP

https://growfit.co.jp/
# 目次
1. [前提条件](#Chapter1)
1. [調べて分かったこと](#Chapter2)
1. [解決方法](#Chapter3)
1. [参考文献](#reference)

# 前提条件
・QiitaのRSS（記事情報）を取得してHtmlファイル（ホームページ）に追記したい
・Html,Css,Javascriptの構成で、バックエンドの言語とサーバー非使用

# 調べて分かったこと
・QiitaのRSSは、JSから非同期通信する際にCORS制限が

error ${url}: Extracting tar content of undefined failed, the file appears to be corrupt: “ENOENT: no such file or directory,open ${directory} のエラーについて原因を調べた

## TL;DR
同時実行できるリクエスト数が多いと、依存関係をインストール中にパス参照に失敗して `No such file or directory` となってインストールに失敗する。そのために `–network-concurrency` を小さくする（ex. 1、2、４）ことで回避できる
https://yarnpkg.com/configuration/yarnrc

shellの場合
“`shell
yarn install –network-concurrency 1
“`

yarnrcに記載する場合
“`
networkConcurrency: 1
“`

デフォルトは１５なので、並行で実行しないことで多少実行時間が遅くなってしまうことには注意。

## なぜこの記事を書くのか
表題のエラーに関する記事は大体２０１７年くらいから議論はされているものの、ちゃんと原因まで抑えた日本語のエラー記事が見当たらなかったのでまとめた感じです。できることなら、エラー原因をきっちり抑えて対処したいので。むしろ、この記事が間違っていたり正しい理由を知ってる方がいましたら、ぜ

【脱JQuery】モダンなJSの書き方

# はじめに

普段、Ruby On RailsでMPA（マルチページアプリケーション）による開発をメインに行っています。
最近「JQueryを使わない」という話しをチラホラ見かけるようになりました。その辺を調べていくうちに自分も「JQueryを使うのやめよう」と思いました。しかし、JQueryに慣れてしまっていて、プレーンなJSで書く方法がパッと出てこなかったので、その辺りを備忘録としてまとめてみました。

# JQueryでよく使っていた機能

自社内のプロダクトでJQueryの利用状況をざっと見たところ、利用されている機能としては次のものが多かったです。

– セレクタ
– Ajax
– イベント
– ループ

それぞれプレーンJSでの記述例を書いておきます。

# 単一セレクタの例

##### JQuery
“`js
const title = $(“#title”);
“`

##### プレーンJS
“`js
const title = document.querySelector(“#title”);
“`

# 複数セレクタとループの例

##### JQ

カレーパン好きによるカレーなるカレーパン記録Webアプリ

# また食べたいのにどこで買ったカレーパンか覚えていない
なんとなく立ち寄ったパン屋さんで、なんとなく買ったカレーパンが意外にも美味しくて、また食べたいなーってなることがよくあるのですが、また食べたいなーってなった時には、どこで買ったか忘れていることがほとんどなんですよね。
そんな悩みを解決してくれる、**カレーパンを記録するWebアプリ**を作りました。

# カレーパン記録アプリ
できあがったのがこちら。
※パン屋でさくっと使えるように、スマホから開くことを想定して作成しました。

https://chic-babka-bc9ee0.netlify.app

カレーパンの名前、店名や訪店日時、位置情報までをお店でサクッと入力。
家に帰ってカレーパンを食べたら、生地感やルー、具材の情報を入力。
保存するボタンを押せば、カレーパンの情報がばっちり記録されますﾔｯﾀﾈ!!

## 環境
Netlify
CodePen
Vue.js
bootstrap
LocalStorage
Web Sensor API

## コード紹介

function Layout({ children }) …の{children}って？

# この{}はなにか
ES6で追加された分割代入という書き方です。
オブジェクトから特定のプロパティの値だけを取り出せます。
# JSではこんなふうに書けます
以下の例では引数にとったobjectのproperty1の値だけを取り出しています。
“`javascript
const obj = {
property1: “hoge”,
property2: “huga”,
}

const isHoge = ({property1}) => {
return property1 === “hoge”
}

isHoge(obj)
// true
“`
# JSXではこんなふうに書けます
Reactでも、引数自体はオブジェクトとして渡ってきており、そのchildrenプロパティだけ取り出しているわけですね。

そのため
“`jsx
export default function Border({ children }) {
return (

スプラトゥーン3のスケジュールをwebでみれるやつ作ったのでメモ　

##### あくまでもメモ

## はじめに
スプラトゥーン3でステージの予定を見たいとき、NintendoSwitchOnlineアプリからイカリング3を開いてスケジュールを確認するのめんどい(家でスマホ開く習慣がない)ので、PCからブラウザで見れればいいのにと思った。

## できたもの

https://spla3-stage-schedule.vercel.app/

これ

## 作れるの？
ググったらtwitterでスプラトゥーン3のスケジュールを流してくれるbotがいた。
[スプラトゥーン3 ステージ情報bot](https://twitter.com/splatoon3_stage/)
こちらのbotの[作者さん](https://twitter.com/m_on_yu)がステージ情報のAPIを公開していたので、使用させていただくことにした。
[Spla3 API (β)](https://spla3.yuu26.com/)

### どうやって作る？
APIがあるので、一番面倒なコンテンツの準備がほぼ必要ない。
定時で更新できて、見やすくて

JavaScriptのよくやる処理を関数にまとめた

一番下にコードだけまとめてあります

## 要素の関数 (JQuery)

### 一時的にクラスをつける

“`javascript
jQuery.prototype.setTmpClass = function(_class, _ms) {
this.addClass(_class);
return setTimeout(
(() => { this.removeClass(_class); }),
_ms
);
}
“`

### 一番下にスクロールする

“`javascript
jQuery.prototype.scrolToBottom = function() {
this.scrollTop(this[0].scrollHeight);
}
“`

### 上下左右中央にスクロールする

“`javascript
jQuery.prototype.scrolToCenter = function() {
let maxScrollLeft = this[0].scrollWidth – t

英語の発音、大丈夫ですか？人知れずこっそり確認できるアプリです。　「なんで忘れるかなぁ俺の格言。それならつくる！《企画編③》」

## 音声認識は進んでいる
競馬で負けた時に作った勝負事の格言、せっかく作っても有効に使われたことが無く、それを改善するためにスマホアプリを作ろうとしています。
　　　[NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》](https://note.com/xedge748hagi/n/n1352db87dae7)
　　　[Qiita記事：芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させる
　　　アプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》](https://qiita.com/Xedge748hagi/items/7f2c0e7bff17fc38198b)
格言のような文章をパソコンではなくてスマホで手入力するのは苦手だなと思い、音声入力ツールを試しました。思ったより間違えずに聴き取って書き出してくれます。ソースコードを見ていたらこんな設定が。
　　　　　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2887131/50d0

TypeScriptの型引数におけるextendsがなかなか覚えられないのでもう一回調べてみた

# はじめに
type-challengesに挑戦中にジェネリクスとextendsの組み合わせで混乱したのでまとめます
# 目次

1. [extendsとは](#extendsとは)
1. [どうやって使うか](#どうやって使うか)
1. [【蛇足】応用](#【蛇足】応用)
1. [【蛇足】応用　まとめ](#蛇足】応用　まとめ)
1. [参考文献](#参考文献)

# extendsとは
extendsとはtype分で型引数を指定するときに型の絞り込みを行える機能のことです。
例えば、下記の例ではtype Fooに対して““という型引数を与えて型の絞り込みを行っています。
なので、“value: T“の“T“は“string型“になるということがわかります。
この場合“string型“に絞っているので“Foo“とすることはできません。
この構文では[ジェネリクス](https://typescriptbook.jp/re