Bunについて

# はじめに
新しいJavaScriptランタイムが注目を集めているので、少し試してみました。
（肉まんかわいい）


# Bunとは

Bunは、2021年9月にリリースしたJavaScriptランタイムです。
2022/8/9時点で、Githubのスター数は、約30,000あり、フロント界隈では注目されているのではないでしょうか？

## Bunについて
公式サイトによると、`Bun is a fast a

8/8に学んだこと

:::note warn
警告
自分用のメモ書きの為、誤った事が記載されている場合や端折った記載になっています。
:::

## node.jsとは
ChromeのV8JavaScriptエンジンで動作するJavaScript環境

## npmとは
node package manager node.js(javascript)で使用するライブラリを管理するツール。
npmを使用する為にはnode.jsをインストールする必要がある。他にはyarn等がある。

## javascriptのfalsyな値

* ”(空文字)
* 0
* NaN(not a number)
* null
* undefined

## MySQLどうしても起動しない
“`
sudo rm -rf /usr/local/var/mysql
brew uninstall mysql
brew install mysql
“`

## Cookieとは
サーバから送られてくる個人識別番号のこと
Cookieがないと、http通信はステートレスな(状態がない)ためwebサイト側が誰からのセッションなのか

UNKO ENCODER?をつくった(UNCODE)

# 概要
ちーすTrimsCashだよ～
文字列をエンコードし”うんこ”と”うんち”にする簡単なウェブサイトをつくったんで共有．

https://trimscash.github.io/unchiEncoder/

# コード
## html
“`html:index.html

【JavaScript】クラス関連の用語

・オブジェクトとは
　→複数の値をプロパティという名前をつけて管理できるもの
　(例)const user = {name: “シンチ”, age:24};
　　　この{}の部分のこと

・書いてて思ったけどやっていくうちに覚えていく気がするから、
さくさく勉強進めちゃおう。

【JS / TS】スプレッド構文は、オブジェクトや配列を展開するだけじゃない

# 1.はじめに

スプレッド構文って、オブジェクトや配列を簡単に一括で表示する程度の認識しか持っていませんでした。

スプレッド構文について、知らなかったことがあったので、アウトプットします。

少し長い記事ですが、スプレッド構文についてまとめるとこのボリュームになりました。
気になるところだけでも見て頂ければなと思います。

間違って解釈している所ありましたら、ご指摘いただけますと幸いです。

# 2.目次
[1. はじめに](#1はじめに)
[2. 目次](#2目次)
[3. この記事でわかること](#3この記事でわかること)
[4. 環境](#4環境)
[5. スプレッド構文とは](#5スプレッド構文とは)
　[5.1. スプレッド構文とは](#51スプレッド構文とは)
　[5.2. スプレッド構文の使いかた](#52スプレッド構文の使いかた)
　[5.3. 別のオブジェクトや配列からコピー](#53別のオブジェクトや配列からコピー)
　[5.4. スプレッド構文は、オブジェクトや配列の拡張に便利](#54スプレッド構文はオブジェクトや

FAQ形式リッチリザルト用の構造化データジェネレータを作りました

FAQ形式リッチリザルト用の構造化データジェネレータを作りました。
　→FAQリッチリザルトジェネレータ

FAQリッチリザルトジェネレータの概要

各テキストボックスに入力すると、FAQ形式の構造化データがプレビュー、出力されます。


FAQリッチリザルトジェネレータの使い方

各テキストボックスに入力してください。
出力されたマークアップ（JSON-LD）をHTMLへコピペしてお使いください。
詳細については、以下で確認してみてください。

　→Next.js Tutorialをやってみた所感など

# Next.js Tutorialをやってみた所感など

Next.jsを勉強してみることにしました。

・HTML/CSS
・JavaScriptはjQueryは分かる、Vue.jsをかじった程度
・React、Next.jsはほぼ分からない

## Next.jsチュートリアル（英語）
https://nextjs.org/learn/foundations/about-nextjs

## 所要時間

コードはコピペではなく、全て手で写経、
エラーも極力ぐぐって解決、という感じでやって

8〜10時間くらいかな？

About Next.js　〜　How Next.js Works
は基本読み物だが、読みやすいです。

## 学べたこと

プリレンダリング
①サーバーサイドレンダリング（SSR）

React: 連続した状態変更をキューに加えて処理する

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[Queueing a Series of State Updates](https://beta.reactjs.org/learn/queueing-a-series-of-state-updates)」は、Reactの状態がどのように更新されるかに関するていねいな解説です。初心者にとってはもちろん、中級者以上にとっても役立つでしょう。本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。コード例の一部は、CodeSandboxに公開しましたので、興味があれば実際にお試しください。

状態変数を設定すると、レンダリングはキューに入ります。けれど、つぎのレンダリングがキューに加えられる前に、変数値に複数の操作を行いたい場合もあるでしょう。そのためには、Reactが状態の更新をどうバッチ処理するのかを理解しておくと役立ちます。

# Reactによる状態更新のバッチ処理
たとえば、つぎのコードで[+

誤解されがちなSEO対策 7選

## 前提
* この記事で紹介する内容は、Googleの検索エンジンを対象としています。
* SEOにおいて効果が期待できなくても、Googleによるページ内容理解の為であったり、アクセシビリティやユーザビリティなど他の面で意味があることもあります。なので可能な限り正しいマークアップを心がけましょう。
* 記事内で何度も登場するジョン・ミューラー氏はGoogleの中の人で、SEO関連の情報発信を行なっている方です。Twitterなどでたくさんの技術者からの質問や疑問に答えたりもしていて、SEOに携わる人達はこぞって彼の発言をチェックしています。

## 1. h1タグは1ページに1つでなければならない
SEOコンサルタントであるサイラス・シェパード氏がTwitterで以下のクイズを投げかけていました。

> GoogleはSEOのためにページの中で`

`を1つだけ使用することを推奨しているか？

Quiz: Does Google recommend using a

macOSで現在の仮想デスクトップ番号と仮想デスクトップの総数をデスクトップ間を移動したときに通知させるJXAスクリプト

# TL;DR
現在の仮想デスクトップの番号と開いている仮想デスクトップの総数を、デスクトップを跨いだときに、OSの通知欄に通知するアプリをJavascript for Automation (JXA)で作成した。


右上に注目すると、確かにデスクトップが切り替わるタイミングで通知のところが変わっている。

# Motivation
OS X(macOS)では、仮想デスクトップ（これは正確にはWindowsでの呼び方？で、OS Xでは[Spa

JSのmapをSICP風に実装してみた。

#### SICPのmap

“`scheme
(define (map f list)
(if (null? list)
‘()
(cons (f (car list)) (map f (cdr list)))
)
)
“`

実行結果

“`scheme
(print (map (lambda(x) (* x x)) (list 1 2 3 4)))
// -> (1 4 9 16)
(print (map (lambda(x) (* x 3)) (list 1 2 3 4)))
// -> (3 6 9 12)
“`

#### オレオレmap in js

同じように再帰で書くためにSchemeのlist構造にいったんして、最終的な出力をArrayにして戻した。

`MyArray([1,2,3,4]).map`などのように使う。

“`javascript
class MyArray {
cons;

constructor(arr) {

【Phaser3】JSONファイルを読み込む

# はじめに
Phaser3にて、jsonファイルでゲームのデータを管理し、読み込むタイミングがあったが注意するべき点があったので、メモ。

# 内容
Phaser3ではシーンという概念が存在し、指定のタイミングで実行される関数が用意されている（preload(), create(), update()）。
下記のように指定の関数内で処理を呼ぶことでjsonファイルを読み込み、ファイルの値を取得する。

“`js:jsonファイル読み込み
preload() {
// jsonファイルの読込
this.load.json(“key”, “./assets/json/test.json”);
}

create() {
// jsonファイルの読込結果を変数に代入
let jsonObj = this.cache.json.get(“key”);
}
“`

# 詳細
`preload()`は画面表示前、`create()`は画面生成時、`update()`は各関数が終了した後、1

JS初心者がDNSホスト情報変換ツールを作ってみた

自宅内でお遊び用にローカル用のDNSサーバーを設置してるのですが、設定ファイルの管理が面倒なのでGoogleスプレットシートのデータから設定情報に変換できるツールを作ってみました。
どこでも実行できるように完全初心者ですがHTML+JavaStipt+JQueryで作成しています。
特にJSはコーディングが拙い部分があると思いますがご容赦ください。

# つくりたいもの

上のようにホストをスプレッドシートで管理をし、そのデータから以下のような設定ファイルを生成します。
とりあえず自宅で使っているunboundやルーターの簡易DNSサーバー機能向けのコンフィグに対応させます。

“`:例：unbound
server:
local-data: “www.hoge.home. IN A 192.168.10.30”
local-d

モデル駆動型アプリでログインユーザーの値をフィールドに自動設定する方法


キャンバスアプリでは、User関数を利用してログインユーザーの情報を簡単に取得することができます。
しかし、モデル駆動型アプリにはこの標準機能がありません。この機能を利用するためには様々な方法がございますが、そのひとつとして、JavaScriptを書くことで実現が可能になります。
この記事では、モデル駆動型アプリでログインユーザーの情報を取得、設定する方法を学ぶことができます。

# メインフォームを作成する
まずは、テーブルを作成し、ユーザーテーブルと関連付けた検索列を新しく作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734401/ae32a7c7-0f10-

javaScript_constructorメソッドを使って、DateやArrayの判別

“`js