JavaScript(TypeScript)のconsoleについておさらい【前編】

コードを組む時にlog()やdebug()をよく使うのですが、他のconsoleの仕様をあまり知らないな…と思ったのでざっくりまとめてみました。

:::note warn
筆者の確認環境は vue3系(TypeScript) × chrome です。
純粋なJS環境ではないのでどこかしら挙動が異なるかもしれません。
予めご了承下さい。
:::

# console.log()
>　一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

“`ruby
console.log(出力したいオブジェクト・文字列など任意の値);
“`

個人的に一番よく使ってます。
ソース内で取得値確認のため仕込む事が多いです。

# console.debug()
>　ログレベルが debug のコンソールへメッセージを出力します。

“`ruby
console.debug(出力したいオブジェクト・文字列など任意の値);
“`

logと出し分けしたい時にこれも割とよく使います。
逆に言うとこれ以降の物に関しては実業務でほぼ使った記憶がありませ

jq 1.7の新機能ー数値精度

[JSON](https://datatracker.ietf.org/doc/html/rfc8259)処理のコマンドラインツールである[`jq`](https://stedolan.github.io/jq/)が、5年ぶりにアップデートしました。現在の最新は1.7.1（2023年12月リリース）です。1.6からいろいろと改定や新機能の追加があって、ますます楽しくなっています。

全容は[Github上のリリースノート](https://github.com/jqlang/jq/releases)を見ていただくとして、今日は改良された数値精度を試してみます。

### これまでは

`jq`は、[IEEE 754](https://ja.wikipedia.org/wiki/IEEE_754)の倍精度形式（binary64）で数値を表現します。この仕様では、仮数部（A × 10^BのAの部分）は10進数でだいたい16桁くらいまで、指数部（Bの部分）は308くらいまで正確に表現できます。それ以上では、丸め誤差が発生します。

たとえば、次で用いている円周率のπは小

同期・非同期処理の実行順序を見てみよう！

# はじめに

「ITインフラの仕組み」を読んでいく中で、同期・非同期についてのテーマがあり、改めて非同期処理について調べていたところ、色々な気づきがあったので今回記事にまとめてみました！

非同期処理とは？から、実行される際のキューとタスクの関係についても動画でまとめているので、よかったらみてください！

# 非同期処理とは

ある処理が終了するのを待たずに、別の処理を実行することを非同期処理といいます。非同期処理を日常生活でのやり取りに置き換えるとこんな感じです。

家族の例

– お母さん→息子に対して、「洗濯物干しといて」と指示
– 指示してる間に、お母さんは洗い物をやってしまう
– 洗い物が終わったタイミングで、息子の作業が終了。「洗濯物干し終わったよ〜」と言われる

もし、これを同期処理に置き換えると…

– お母さん→息子に対して、「洗濯物干しといて」と指示
– 指示してる間、お母さん待機
– 息子の作業が終了。「洗濯物干し終わったよ〜」と言われる

同期処理だと、待機時間が発生するわけです。
とても非効率ですね。

これと同じような事がWeb上で起きた場合、一度リクエス

【JavaScript】分割代入

O’reillyのJavaScript 第7版を読んで、
今まであまり使用していない技術がいろいろ載っていました。

今回はその中の**分割代入**についてまとめてみました。

# 分割代入とは
そもそも分割代入とは何でしょうか。

MDN web docsには次のように記載されています。
> 分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
>
> — [分割代入 – JavaScript – MDN Web Docs – Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

# 使い方
説明文だけでは分かりづらいので、使い方の例を見てみましょう。

## 配列の代入
“`js
let [x, y] = [1, 2];

console.log(x);

【React】exportとexport defaultの違い

# exportとexport defaultの違い
Reactコンポーネントをエクスポートする際に、`export`と`export default`の違いがあります。

1\. **export** : このキーワードを使用して、モジュール内の関数、クラス、変数などを名前付きでエクスポートします。名前付きエクスポートでは、エクスポートされたコンポーネントをインポートする際に、エクスポートされた名前を使用してアクセスします。例えば、次のように使用します。
“`js
// MyComponent.js
export class MyComponent extends React.Component {
// コンポーネントの定義
}
“`
“`js
// 別のファイルでインポートする
import { MyComponent } from ‘./MyComponent’;
“`
2\. **export default** : このキーワードを使用して、モジュールのデフォルトエクスポートを定義します。デフォルトエクスポートでは、モジュール内で一つだけのエクスポートを行うこと

【React】コンバータとは

# コンバータとは
JavaScriptにおける「コンバータ」という用語は、広範囲にわたる機能やデータ形式の変換ツールや処理方法を指す場合があります。具体的には以下のようなものがあります。

1\. **データ型変換器** : JavaScriptではさまざまなデータ型がありますが、これらを相互に変換する機能を提供するものです。例えば、文字列から数値への変換や、数値から文字列への変換、配列からオブジェクトへの変換などが含まれます。

2\. **単位変換器** : 数値を異なる単位に変換する機能を提供するものです。例えば、長さの単位をメートルからフィートに変換する、重さの単位をキログラムからポンドに変換するなどの機能が含まれます。

3\. **フォーマット変換器** : データのフォーマットを変換する機能を提供するものです。例えば、日付や時刻のフォーマットを変更する、JSON形式からXML形式に変換するなどの機能が含まれます。

4\. **画像/動画コンバータ** : 画像や動画の形式を変換する機能を提供するものです。例えば、画像のサイズを変更する、JPEG形式からPNG形式に変換

【JavaScript】pure functionとは

# pure functionとは
JavaScriptにおける「pure function（純粋関数）」とは、次の2つの特性を持つ関数のことを指します。

1\. **副作用のない** : 純粋関数は、外部の状態を変更せず、引数の値だけに依存して結果を返します。つまり、関数内でグローバル変数の変更や、引数以外の外部のデータへのアクセス、ファイルの読み書き、ネットワークリクエストの送信などの副作用がないことが求められます。

2\. **同じ入力に対して常に同じ結果を返す** : 同じ引数が与えられた場合、純粋関数は常に同じ結果を返します。関数が外部の状態に依存しないため、同じ入力が与えられれば常に同じ結果が得られることが保証されます。この特性は、関数の予測可能性を高めます。

# 使用方法
純粋関数は、プログラムの理解やテスト、デバッグを容易にし、並行処理や再利用性の向上にも役立ちます。また、関数型プログラミングの中心的な概念であり、関数型プログラミングの原則に従うことで、より堅牢で保守しやすいコードを書くことができます。

例えば、以下は純粋関数の例です。
“`js
functi

【JavaScript】論理AND演算子とは

# 論理AND演算子とは
JavaScriptの論理AND演算子は、二項演算子であり、`&&`という記号で表されます。この演算子は、二つのオペランド（条件）を取り、両方の条件が真である場合に真を返し、そうでない場合は偽を返します。

# 使用方法
具体的には、次のような形式を取ります：
“`
条件1 && 条件2
“`
`条件1`と`条件2`がどちらも真であれば、結果は真（true）となります。そうでない場合、つまりどちらか一方または両方が偽であれば、結果は偽（false）となります。

例えば：
“`js
var x = 10;
var y = 5;

if (x > 0 && y > 0) {
console.log(“両方の条件が真です”);
} else {
console.log(“少なくとも一つの条件が偽です”);
}
“`
この場合、`x`と`y`がどちらも0より大きいので、両方の条件が真となり、”両方の条件が真です”というメッセージがコンソールに表示されます。

# まとめ
論理AND演算子は、条件文や制御フローにおいて特定の条件が複数必要な場合

【JavaScript】三項演算子とは

# 三項演算子とは
JavaScriptの三項演算子は、条件演算子とも呼ばれ、条件式を評価してその結果に応じて値を返す演算子です。一般的な形式は以下の通りです：
“`
条件式 ? 式1 : 式2
“`
条件式が真であれば、式1が評価されます。条件式が偽であれば、式2が評価されます。その結果、三項演算子は式1または式2のどちらか一方を返します。

# 使用方法
例えば、以下のようなコードがあります：
“`js
var age = 20;
var message = (age >= 18) ? “成人です” : “未成年です”;
console.log(message);
“`
この場合、`age`が18以上であれば`message`には”成人です”が代入され、それ以外の場合は”未成年です”が代入されます。

# まとめ
三項演算子は、単純な条件分岐を短く書くのに便利であり、コードの可読性を向上させることができます。しかし、複雑な条件分岐や複数の式を含む場合は、他の方法（例えばif文やswitch文）を使用した方が理解しやすい場合があります。

【小ネタ】p5.js（バージョン 1.9.1）で createCapture() を使う際に左右反転を簡単に適用する方法： { flipped:true }

p5.js公式の以下のページを見ていたときに、ふと見かけてきになった内容を記事にしてみました。

●reference | createCapture()
　https://p5js.org/reference/#/p5/createCapture

具体的には、以下の `createCapture(VIDEO, { flipped: true })` という部分です。


上記の公式サンプルのページだけでなく、p5.js Web Editor でも以下の内容で試してみたら、動作確認ができました。
※ 記事執筆時点で、p5.js Web Editor でのスケッチの新規作成を行うと、最新版の 1.9.1 が使われます

“`javascript
let capture;

function setup() {
createCanvas(640

多分これを見るのが一番早い React Native Expo 環境構築 for Windows 【JavaScript】

“`
最終更新日: 20240303
“`
本題だけ見たい人はこちらに飛んでね！
[環境構築スタート](#環境構築)

#

# 記事の目的
この記事を見るだけでー
ReactNativeExpoの環境構築ができることを目的にしています！
質問事項があれば記事へのコメントもしくは[@rioLi0N](https://twitter.com/rioLi0N)にDMなど気軽にどうぞ！

# ターゲット層

1. Windowsで開発している（MAC高いから持ってない苦学生です:sob:）
2. TypeScriptじゃなくてJavaScriptを開発したい
3. ReactNative「Expo」で開発する

# バックボーン！！！
CEO「Android向けアプリ完成したね！」
僕「はい！」
CEO「ところで、iOS対応もしたいんだけど相談できる？」
僕「なるほど！いけます！」

それから色々あり調査などをした上で
下記の要件を満たすReactNativeExpoを採用することにしました！
“`
1. クロスプラットフォーム言語なので保守作業が楽になる
2. 企業の技術ス

オブジェクト URL を File または Blob オブジェクトに変換する方法

JavaScriptのオブジェクトURLをFileオブジェクトまたはBlobオブジェクトに戻す(変換する)方法を紹介します。 `URL.createObjectURL()` の逆を行います。

※ これは2020-02-04に個人ブログで公開した記事を移植したものです。

## オブジェクト URL とは

オブジェクトURLは、JavaScriptで次のようにメゾットを呼び出すことで生成されます。

“`js
URL.createObjectURL(object);
“`

https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL

ファイルを処理したり、ユーザーからファイルを受け取るライブラリなどで、オブジェクトURLで返ってきますが、データを処理したいのでFileオブジェクトやBlobオブジェクトに戻したいケースがあります。

しかし、File APIには `URL.createObjectURL(object);` の逆が用意されていません。

例えば、 [`react-dropzone`](htt

JavaScript: base64 decode最適化もどき

色々な実装でbase64文字列の復号速度を検証していきます。特に難しい事はせず、どの組み込み関数やObjectを利用するかの違いが焦点となります。返り値はUint8Arrayとします。
“`js
//復号関数群
let u8map=s=>{s=s.replace(/[^A-Za-z\d+/]/g,””);
for(var a=64,b=”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”,c,d=s.length,A=new Uint8Array(123),B=new Uint8Array((d+2>>>2)*3-[0,0,2,1][d&3]);A[b.charCodeAt(–a)]=a;);
for(b=0;a>16,B[b++]=c>>8&255;
re

【vue.js】v-forで連想配列のインデックス番号を取得する方法

## 課題
vue.js(v3)で連想配列を扱うが場面あり、データの数を連番で出力したくなった。
## 前提
例えばこういう連想配列があったとして、
“`javascript:hoge.vue
let obj ={
‘key1’:val1, //1番目
‘key2’:val2, //2番目
‘key3’:val3 //3番目
}
“`
これらをテーブル形式で出力したいのでvue.jsのv-forで以下のように書いた。
“`javascript:hoge.vue

// key1,2,3が出力

// val1,2,3が出力

{{ index }}	{{ Arrays }}

“`
ここにthを追加し

クリップボードにコピー機能実装

クリップボードにコピー機能実装

簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)

EsLintのルールを幾つ知っていますか？

:::note
EsLintのRule、Configのライブラリについてまとめました
リンクも多用してるのでハブとして使って頂けると嬉しいです！
:::

# 1. 背景
過去に業務でレビューする際に「コーディングルールで〇〇なので、▲に修正してください」と指摘することがありました。
これはレビュワーの負担にもなりますし、実装者もコーディングルールを覚えるのも最初は慣れないので仕方がないです。
コーディングルールを極力リンターに任せたいなと思い、この度便利なルールを調査しました！

# 2. EsLint

:::note
Version v8.57.0
:::

## recommended
https://eslint.org/docs/latest/rules

✅がついているルールがrecommendedです。

抜粋します、便利なものば

【個人開発】漫画好きが漫画とアロマをお勧めする診断アプリを作りました📚

## はじめに
はじめまして、1歳子持ちのshikimum(@abbyE424214)と申します。
完全異業種からエンジニアに転職するためオンラインスクールに入り学習をしていました。
私は漫画が大好きで、漫画に勇気をもらったり慰めてもらったり、セリフを真似したりと、影響受けまくりの人生を送ってきました💪

もっとたくさんの人に漫画を読んでもらいたい、人生を変える1冊に出会って欲しいという思いから、その人にあった漫画をおすすめするアプリを作成しました📚

**「漫画の処方箋」**
ユーザーの疲れタイプに合わせて、あなたにあった漫画とアロマをお勧めします。

https://www.comic-health.com/

[](https://gyazo.com/03568b9efa89d71279e9c0877b08a8ca)

https://github.com/shikimum/portfolio

## 使い方
### **1.診

【JavaScript】async/awaitで発生したエラーのキャッチについて理解を深めたい

# はじめに

`async/await`を使ったときのエラーのキャッチでこんがらがったのでまとめます。

多分前に書いた記事の続編的なやつですが、これ単体でも読めます。

https://qiita.com/nanasi-1/items/9bedc88b992ec470f808

:::note warn
私は`async/await`や`promise`に詳しくないため、記事の内容に誤りがある可能性があります。
もし間違いを見つけた場合は、コメント等で指摘してくださると助かります。
:::

## 環境

この記事に書いてあるJavaScriptコードは、以下の環境で実行しています。
この環境以外で同じ動きをするかどうかは、私にはわかりません。

* MacOS Sonoma 14.1
* Chrome 121.0.6167.160 （たぶん）

また、当然のようにtop-level awaitが出てきます。

# エラーのスロー

まずは`async`をつけた関数内でエラーをスローしてみます。
といっても、スローする方法は二つあります。

* `throw`キーワードを使った

画面内に要素があることを検知

目次をハイライト表示をさせたくその雛形をメモします。
下記のコードは画面内に要素があればactiveを付与、無ければ除去します。

“`js
const targetContent = document.querySelector(“.target-content”)

const options = {
root: null,
rootMargin: “0px”,
threshold: 0
}
const observer = new IntersectionObserver(callback, options);
observer.observe(targetContent)

function callback(entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
targetContent.classList.add(“active”)
} else {
targetContent.classList.remove(“active”)

【JavaScript】forEach, map, filter, reduce, findを正しく理解する

## はじめに
こんにちは。現在バンクーバーで未経験からエンジニア就職を目指している@JamesCroissantです。今はReact×TypeScriptを利用したフロント周りの開発中心の勉強をメインで行っています。

## きっかけ
JavaScriptを復習していて、自分自身しっかり理解していないと感じたので、コーディング面接対策として自分が調べたことをまとめます。

## この記事の対象者
・JavaScript, React初心者
・forEach, map, filter, reduce, find関数の違いがざっと抑えたい人
・JavaScriptのコーディング面接対策をしたい人

## この記事の目標
・forEach, map, filter, reduce, find関数の違いを理解する
・Reactのアプリ開発で使えるようにする

## forEach
forEachは配列の各要素に対して関数を実行するが、__新しい配列を返さない__。
“`js
const numbers = [1, 2, 3];

numbers.forEach(function(nu