【JavaScript】===（厳密等価演算子）と==（等価演算子）の違い

### 目次

[1.やりたいこと・現在のコード](#1やりたいこと・現在のコード)
[2. 環境](#2環境)
[3. 調査](#3調査)
[3-1. ===（厳密等価演算子）](#3-1厳密等価演算子)
[3-2. ==（等価演算子）](#3-2等価演算子)
[3-3. nullとundefinedについて](#3-3nullとundefinedについて)
[3-4. undefinedの例](#3-4undefinedの例)
[4. 最終的なコード](#4最終的なコード)
[5. まとめ](#5まとめ)
[6. 参考](#6参考)
[7. 最後に](#7最後に)

### 1.やりたいこと・現在のコード

idを取得してオブジェクト内にあるかどうか比較→ないときにオブジェクトに追加したいです。

先輩からは「==と===は異なる」とアドバイスがありました。

“`javascript
function countContents( id ) {
if ( id in Obj == false ) {
//オブジェクト(Obj)にidが含まれないときは追加する
countO

Webフロントエンドのpolyfillをbabelの利用・core-jsのダイレクト利用・swcの利用など、複数方式での比較を行ってみた

## はじめに

JavaScriptにおけるpolyfill(ポリフィル)とは、例えば `Promise` オブジェクトが使えないIE11でPromiseを使えるようにするなど、使いたいAPI(オブジェクト, メソッド等)がない環境にそれらを使えるようにする役目を果たすライブラリ及びその機構のことです。

polyfillをしたことの無い人にとっては、どのライブラリがどんな役目を持っていて、自分が望むpolyfillを実現するためのconfigの構築は難しいものと思っています。

そこで、polyfillを実現する複数の方法において、どのようなケースでどのような機構を使ってどのようなconfigを作れば良いのか、以下書き連ねておきます。

## 想定読者

* babelを噛ませてpolyfillさせたい人
* core-jsを直接読み込ませてpolyfillさせたい人
* swcを使ってpolyfillさせたい人

## polyfillを実現するためのconfig一覧

以下の私のリポジトリで検証したものをピックアップしていきます。

https://github.com/sho

【React / Next】ドラッグ&ドロップで画像を複数選択してアップロードする

個人の備忘録です。

# 環境
– react: 18.2.0
– next: 12.2.3
– react-dropzone: 14.2.2
– @chakra-ui/react: 2.2.4

# やりたいこと
– 複数の画像ファイルをページにドラッグ&ドロップする
– 選択された画像をプレビュー表示する
– プレビュー画像は削除可能
– 選択された画像を DB へアップロードする
– ライブラリは `react-dropzone` を使用

# 完成イメージ

# install
– まずは、`react-dropzone` を install

“`
yarn add react-dropzone
“`

# サンプルコード
“`tsx:Contents.tsx
import { Img } from ‘@chakra-ui/

JavaScript textLength as halfWidth

JavaScript で半角幅としての文字列長を調べた件です。日本語のみ考慮してます。

# 課題

input type=”text” の size や textarea の cols に文字数にて横表示幅を指定すると、これらは半角が前提なので、全角文字が入ると困った挙動になります。

“`html:



赤青黄色
赤青黄色
“`


text は見切れますし

JavaScriptのasync/awaitって何？

JSのコードで登場するasync,awaitについてふわっと雰囲気を理解するための備忘録

ずばりasyncとawaitとは

• async…非同期関数を定義するときのキーワード
• await…async関数内で使う式

具体的なコードでいうと、
“`javascript:sample.js
async function sample() {
console.log(“start”); //即時実行される
const res = await waitFor2Sec(); // waitFor2Secは2秒後に値を返す関数とする
console.log(res); // 2秒後にこれが表示される
}
“`

こんなかんじ。
いや別にawaitとか使わなくても、2秒後に実行されるじゃん。await使う意味あるの？
と思いきや、awaitの便利なところは、厳密には2秒待っているだけじゃないってところにある。

awaitは、**2秒間の処理を実行開始し、終了を待たずに次のawaitを

雀魂の外部ツール

:::note info
[他の投稿はこちらからご覧ください。](https://twitter.com/i/events/1548441969244139520)
:::

:::note warn
利用規約に違反する行為を助長する目的はありません。
:::

雀魂の外部ツールについて、簡単にまとめました。

# 雀魂牌譜検討サポーター

https://chrome.google.com/webstore/detail/mahjongsoul-review-suppor/kdmfnkdgpialmejpgflfllkjakolamcc

2022年7月に公開されたばかりの [Chrome](https://chrome.google.com/webstore/detail/mahjongsoul-review-suppor/kdmfnkdgpialmejpgflfllkjakolamcc) と [Edge](https://microsoftedge.microsoft.com/addons/detail/mahjongsoul-review-suppor/jopdfhm

RailsとJavaScriptでマルチセレクタかつオートコンプリートを実装する

# 実装デモ

# 機能説明
予約に対して、メンバーを複数アサインする機能。
Reservationと、Memberが多対多でアソシエーションされている。
メンバーのアサインを複数、かつ、入力補完（検索）しながらインタラクティブに選択肢を表示させる。

リポジトリはこちら

https://github.com/kakeruAoyama/myapp

# 環境
“`
$ ruby -v
=> ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
$ rails -v
=> Rails 7.0.3.1
“`
TailwindCSSをつかって実装していきます。

# アプリケーションの作成
“`
$ rails new myapp –css t

JavaScriptとは何か？歴史の勉強備忘録

# はじめに
JavaScriptとは何か？歴史の勉強備忘録

# JavaScriptとは
JavaScriptエンジンによって事前コンパイル無しで実行されるプログラミング言語
コンパイルなしとは機械語に変換しないでJavaScriptエンジンを通して実行される
## JavaScriptエンジンとは

解析→機械語を用意→実行の手順をしている
主なJavaScriptエンジン
・V8
・SpiderMonkey
・JavaScriptCoreなどなど
それぞれのエンジンはブラウザに含まれている

ChromeはV8
FireFoxはSpiderMonkey
EdgeはV8
SafariはJavaScriptCore

## JavaScriptの歴史
|年月 |内容 |
|—|—|
|1995年 |NetscapeがJavaScript(LiveScript)を作成し、
Netscape Navigator2に搭載
・NNは当時のシェア80％越えのブラウザ
・SpiderMonkey
・買収やブラウザのオープンソース化を経て、現在のFireFoxに<

Next/Reactで関数内の変数が予期せず初期値になることについて

以下のような変数を関数コンポーネント内部で定義したとします。その後に `// ..`でuseEffectで`imagesOnWaitingList`にAPI経由で取得した値を配列に格納することがありました。その変数を後でボタンクリックイベントなどで参照すると、`imagesOnWaitingList`が何らかのタイミングで空`[]`になることがあり、原因がわからず時間がかかりました。

“`
const Home: NextPage = () => {
let imagesOnWaitingList: Array = []
// ..
}
“`

## 解決策と原因

関数コンポーネントの外側で変数を定義することで解決しました。関数コンポーネントのレンダリングの仕組みはわかりませんが、おそらく他のstateful valueが更新されたタイミングで関数コンポーネントが呼ばれると理解しています。そのため、stateful value出ない変数の初期化処理を関数に含めた場合、複数回関数コンポーネントがコールされて予期せぬ

kintoneの添付ファイルフィールドから画像をURLとして取得

#　fetchで書いて関数化してみた

async function getImageURL(fileKey){
const url = ‘https://ドメイン.cybozu.com/k/v1/file.json?fileKey=’ + fileKey
const header = new Headers({‘X-Requested-with’:’XMLHttpRequest’})
const init = {method: ‘GET’, headers: header, mode: ‘cors’, cache: ‘default}
const res = await fetch(url, init).catch(err => console.log(err))
const blob = await res.blob().catch(err => console.log(err))
const imgURL = (window.URL || window.webkitURL).c

未経験で独学中

・pythonを勉強するが。。
だめです。未経験で募集がありません。

私は、工業高等専門学校の機械科を専攻していたのですが、意外にもプログラミングとかかわることが多く、卒業研究で「機械学習についてやってみてくれ」と言われ、pythonを独学で学びながら取り組むことになりました。
最終的には、サル、犬、猫の判別ができる画像識別のプログラミングを参考書などを見ながら作成。識別できたから何ができるんだ。。。？というのが最初の意見でした。

　その後は、機械系の修理部門に就職し、4年間働いた。4年間働いても自信もっていえるスキルはほぼゼロに等しい。。。人手不足の中働いているとほしくなってくるものは自動化。機械学習で画像で覚えさせできそうじゃね。。？4年もプログラミングを忘れ、ゲームと仕事に打ち込んでいたら、まあ、知識は0よね。
　エクセルの自動化から行い少しづつプログラミングの楽しさがわかり、またpythonを思い出しながら環境構築を行った。かといってビッグデータはないし、なにも作れなくない？？？

世の中の機械業界はだんだん人口が減っているため人手不足や人件費などを削減した部分と現場からわ

TypeScript(JavaScript)によるカタカナ五十音順の行を判定

### コード

“`typescript
const handleNameCode = (str: string): string => {
const kana: Map = new Map([
[1, ‘アイウエオ’],
[2, ‘カキクケコガギグゲゴ’],
[3, ‘サシスセソザジズゼゾ’],
[4, ‘タチツテトダヂヅデド’],
[5, ‘ナニヌネノ’],
[6, ‘ハヒフヘホパピプペポバビブベボ’],
[7, ‘マミムメモ’],
[8, ‘ヤユヨ’],
[9, ‘ラリルレロ’],
[10, ‘ワヲン’],
])

for (let i = 1; i < 11; i++) { // パラメータカタカナの行を返す if (kana.get(i)?.indexOf(str) !== -1) return i.toString() } // 数字、ひらがなの場

DockerでVue+Node(Koa)+Nginx+MongoDB環境を作る

## この記事のアピールポイント

– 初心者に最適
– フロントエンド開発者に最適

## 0.事前準備

##### インストール

以下のソフトウェアと環境のインストールが必要です。

– Docker以及docker-compose（必須）
– Docker图形化界面（なくてもよい）
– Node.js（必須）
– MongoDB图形化界面（なくてもよい）
– yarn （なくてもよい，npm，pnpmを使っても構いません）

##### 知識

Dockerコンテンツの説明と構築がメインとなりますので、
フロントエンドとバックエンド開発の説明は特にしません。
なので、以下の知識はあった方がいいです

– Dockerの基礎知識
– Mongodbの基礎知識
– Nginxの基礎知識
– フロントエンド（vue，react..），バックエンド（node，koa..）の基礎知識

##### 環境

– OS：Windows 10
– エディター：VS Code
– Node.js：v16.3.0
– Docker：v20.10.13

##### demo

文

【Google MAP】2点間orクリックによる多地点間の距離を取得する(直線距離)

# はじめに
GoogleMAPで距離を知りたい、ということはよくあります。普通に、GoogleMAPで「出発地」「目的地」「移動手段」を入力すれば、簡単にルートと距離を知ることができます（本当に素晴らしい時代です）

基本的にはそれで事足りてしまうのですが、自分でさっとクリックやドラックで地点を指定し、直線距離でだいたいどのくらい、と知りたいことがたまにあったりします。

そこで、GoogleMapsAPIを使用して、直線距離ではどのくらいなのかを求めたいと思います。その次にルートを考慮して距離を求めていきたいと思いますので、その第1段階となります。

基本的に参考にするのは、Google Developersです。

https://developers-jp.googleblog.com/2019/12/how-calculate-distances-map-maps-javascript-api.html

距離の計算について難しいことはわからなくても、参考サイトを見ながら簡単にできます。初学者にはとてもありがたいです。

# 作成するもの
– 【プログラム1】 2地点間の距離

NHK-FMのJAZZ

[NHKのAPI](https://api-portal.nhk.or.jp/)を使って向こう一週間のJAZZの放送の一覧を作ってみました。

NHK番組表APIのジャンルID(genre)の説明のARIBのpdfのURLがリンク切れになってるうえに、一般向けには[STD-B10](https://www.arib.or.jp/kikaku/kikaku_hoso/std-b10.html)は売り物で1万円以上します。^ ^;

世の中には親切な人がいて、一覧を上げてくれていてJAZZは0403でした。

“`html