JavaScript関連のことを調べてみた

実装から学ぶ useMemo

# はじめに
ReactHooks の1つである `useMemo()` を理解するため、 React の実装を読んだまとめです。
React の再レンダー時の余計な計算を減らすために useMemo を使うことがありますが、どんな仕組みで動いているのでしょうか。

React のバージョンは 19.0.0 です

# コードを読む

まずは ReactHooks から見ていきましょう。

“`ReactHooks.js
export function useMemo(
create: () => T,
deps: Array | void | null,
): T {
const dispatcher = resolveDispatcher();
return dispatcher.useMemo(create, deps);
}
“`

`dispatcher` の `useMemo` を呼び出しています。
マウント時には mountMemo が実行されます。

“`ReactFiberHooks.js
const HooksDispatc

SvelteでWeb Componentsを作ろう

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

## :writing_hand: Web Componentsって何？

Web Componentsは、再利用可能なカスタム要素を作成するための一連の技術です。

主に「Custom elements」「Shadow DOM」「HTML templates」から成り、それらを組み合わせてカスタム要素を作成します。

これらの技術はW3Cで標準化されており、コンポーネント化されたカスタム要素はライブラリに依存せず利用できます。

## :thumbsup: Web Componentsを利用するメリット

Web Componentsを使う上で、以下のようなメリットがあります。

– ライブラリに依存しない
– Web Componentsはライブラリに依存せず利用できる
– ライブラリの流行り廃りに依存し

【JavaScript】ダークモードの判定

# はじめに

CSSでメディアクエリを用いてダークモードを判別するというのはよく知られた手法ですね。
この記事ではJavaScriptでそれをする方法を紹介します。

## この記事の対象者

– ある程度HTML, CSS, JavaScript(要するにWebフロントエンド)の基本的な知識があり、JavaScriptでダークモードを判別したい。

## 前提知識

– JavaScriptの基礎的な文法と仕様を理解している

# 実装

`window`に生えている`matchMedia`を用いることでメディアクエリを評価することができます。この場合はCSSのメディアクエリと同様`prefers-color-scheme`でテーマを判定します。

## ダークモードかどうか判定するだけ

“`javascript
function isDarkMode() {
return window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches;
}
“`
この`isDarkmode`関

コードで蘇る「千と千尋の神隠し」：プログラミングによる名前の浮かび上がり演出

# 何を作ったのか
お見せしたほうが早いかと。

[デモページ](https://lab.nghmst.com/floating_characters)
（マウスもしくはApple Pencilといったスタイラスペンで各マスに文字を書き、右上の赤いボタンを押す）

結構すごくないですか？

こんな感じで、映画「千と千尋の神隠し」の千尋が湯婆婆に名前を捉えるシーンを再現してみました。作ってみて、なかなかおもしろかったので記事にしてみました。

# どうやって作っているか
これがどのように作られているか、簡単に解説します。

## 技術構成
本アプリは以下のライブラリを使用しています。
– Next.js　・・・Webアプリのフレームワークです
– tailwindcss　・・・Webアプリのcssライブラリです
– Three.js ・・・3d描画ラ

フォームなどの日付選択をカレンダー表示して、表示する方法　HTML＆JavaScriptのみ！

# 今回やりたいこと
先日、JavaScriptの記事を書きました。
今回もJavaScript関連の記事を書きます:writing_hand_tone1:

そして、今回やりたいことは、コチラ↓↓↓
カレンダーから、日付を出力させて、選択したら、
日付を取得して、それを表示させたい！:date:
カレンダーアイコンを押すと、カレンダーが出力されます！


そして、選択した日付が、「選択された日付:」の横に出力されるUIを実現させたいです！
![image.png](https://qiita-im

【Javascript】よく使うオブジェクトの操作を覚える

# はじめに
Javascriptでよく使う構文を勉強していく中で、よく使うオブジェクトの操作について勉強しましたので、共有いたします。
他にも、オブジェクトの操作でよく使うものがありましたら、共有くださると幸いです。

# オブジェクト操作一覧

勉強していた中で特によく使うと言われているオブジェクト操作一覧についてご紹介します。

### プロパティ追加
プロパティを追加する際には、`obj.キー = 値`もしくは`obj[“キー”] = 値`で追加します。このとき、キーは追加するオブジェクトに**存在していない**ことが条件です。
また、記法のうち`obj.キー`を**ドット記法**、`obj[“キー”]`を**ブラケット記法**と呼びます。

“`js
// オブジェクト作成
const obj = {
name: “Yuto”,
age: 26,
};

// プロパティ追加(ドット記法)
obj.country = “Japan”;
console.log(obj); // { age: 26, country: “Japan”, name: “Yuto”

配列の各要素ごとにカウントする方法【Ruby JS】

# はじめに

配列の各要素ごとにカウントする方法について記述していきます。

今回はHashの形でreturnします。

# Rubyの場合

簡単です。`tally`メソッドを使用します。

“`rb
arr = [“apple”, “banana”, “apple”, “orange”, “banana”, “apple”]
tallied = arr.tally
# => {“apple”=>3, “banana”=>2, “orange”=>1}
“`

https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/tally.html

# JSの場合

最も美しいのは、`reduce`メソッドを使用し`tally`メソッドを再現することだと思います。

“`js
function tally(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}

paizaプログラミング問題をやってみた：Cランク

## はじめに

少し前から自己研鑽のためにLeetCodeという競技プログラミングの問題を解いています。
paiza×Qiita記事投稿キャンペーンを機にpaizaの問題を解いていこうと思い、コードを公開します。

前回はDランクの問題だったので、今回はCランクの問題です。
言語はJavaScript（TypeScriptがなかった…）を選択しています。

Dランクはこちら

https://qiita.com/tkmsk/items/146653302d1b75156238

## 宝くじ

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});

JSON オブジェクトの中に空文字のキーや値があるかどうかを判定する

JSON オブジェクトの中に空文字のキーや値があるかどうかを判定する関数を作りました。（便利な関数ややり方があるかどうか探してみても見つからなかった。。。）

再帰処理を入れているので、json の階層が深くなった際のデータにも対応している（はず）

json の中身を見ていって、key または value に空文字が一箇所でもセットされていると true を返します。（それ以外の場合は false が返ります。）

“`js
// 入力用 JSON オブジェクト
const inputJSON = {
key1: “value1”,
key2: 12,
key3: true,
key4: {
key4_1: “valueA”,
key4_2: “”, // これがあると true が返る
key4_3: {},
“”: “”, // これがあると true が返る
“”: “xxx”, // これがあると true が返る
},
key5: ‘””‘,
key6: {},
key7: [],
key8: “

[paiza]1番小さい数字

# 初心に返って
どんどん、解いていこうね～

https://paiza.jp/works/mondai/d_rank_skillcheck_sample/min_num

# これからも解いていく可能性を信じて
まだまだ問題いっぱいあるっぽいので、やろうという気持ちがあるうちに。。。
全問題で共通となるパラメータの取得部分はもうindex.jsに書いてしまって、
処理の部分をmodule化してindex.jsから呼び出すようにしてみた

“`javascript:index.js
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

const lines = [];
const reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});

reader.on(‘line’, (line) => {
lines.push(line);
});
// paizaで公開されてる

#03 [Angular] Standalone components

## Introduction

Components declaration that we have learned is adding your components to the `imports` array in the `@NgModule` . It doesn’t bother us when we just develop a TODO app or some small-scale project for study or mainly for **fun**. When having a large scale project, Angular’s declaration can make the import list as long as you want. Or you **don’t?** Maybe you can try the new staff from Angular 14, **standalone components**.

As the name they call “standalone”, allow specifying comp

[paiza]すごく普通に書いてみた

# こういう問題大好き
[コレ](https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7)に挑戦

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7

# Node(index.js)で正攻法で書いてみた
ちなみに標準出力から値を取得するって部分は、[paizaで公開されてるサンプル](https://paiza.jp/guide/samplecode.html)をそのまま使いました。
“`javascript:index.js
// [問題文（原文）]
// 整数が書かれた複数のカードの中から3枚を選び、
// そこに書かれた整数の和が7で割り切れるかどうかで運勢を決めようというものです。
// カードは必ず異なる3枚を選ぶ必要があり、
// 全てのカードには全て異なる数字が書かれています。
// — ここから paizaで公開されてるサンプル
process.stdin.resume();
process.stdin.setEncoding(‘

SharePoint サイトのタイムゾーンを取得する方法

SharePoint サイトのタイムゾーンを確認するには、「サイトの設定」にアクセスする方法がありますが、もしあなたに「サイトの設定」にアクセスする権限がない場合は、 JavaScript を使って確認することができます。

## JavaScript コードとその使い方

タイムゾーンを確認したい SharePoint Online サイトにアクセスし、そのサイトにあるなにかしらのリストにアクセスします。

そして、ブラウザの DevTools を開き、以下のスクリプトを実行します。

“` JavaScript
(async function(){
let response = await fetch(
_spPageContextInfo.webServerRelativeUrl + “/_api/web/RegionalSettings/TimeZone”,
{
method: ‘GET’,
headers: {
‘Accept’: ‘application/json;odata=verbose’,

Amazonサイトの広告(スポンサー)を非表示にしてみよう

# はじめに
Amazonのスポンサー表示ってウザいですよね。chrome拡張機能で非表示にしようという話です。

すでに広告ブロッカーはchromeウェブストアに行けばたくさんあります。けど、よく分からない人が作った拡張機能は怖いです。なので自分で作ろうということになりました。ちょー簡単実装なのでコピペで使えます。

# とりあえず
下の左画像がオリジナルのスポンサー箇所をピンクにしてみました。右画像が今回作った拡張機能の結果です。
「腕時計 電波」で検索しているのに目覚まし時計が先頭のスポンサー。ひどい。アマゾンさん、それはないでしょ。

とりあえずピンクにしてどんな所がスポンサーなのかを確認してから使用すると良いです。ピンクのままで使用しても良いと思います。

謎のUncaught SyntaxError: Unexpected token ‘<' エラーについて

# Uncaught SyntaxError: Unexpected token ‘<' エラー Laravelで開発をしていたら突如コンソールに ``` Uncaught SyntaxError: Unexpected token '<' at Function ()
at template.js:259:12
at t.exports (_apply.js:13:25)
at attempt.js:29:12
at t.exports (_apply.js:15:25)
at _overRest.js:32:12
at t.exports (template.js:258:16)
at t.value (Template.js:14:21)
at station-list.js:11:4
at station-list.js:1:20573

“`

というエラーが起き、データがうまく出力されないといった現象に遭いました。

これがまた厄介でローカル環境では表示されるのに開

【Prisma】findManyで100万規模のデータを取得する

# :sunny: はじめに

今回は約100万件ほどのデータを**生SQLクエリ**ではなく**Prisma（ORM）でデータ取得をする**というところに焦点を当てて、実装までに当たった問題点や内容のご共有ができたらと思います。

# :four_leaf_clover: 環境

* TypeScript：4.7.4
* Prisma：5.9.0
* Provider：MySQL

# :gear: 実装したコード

“`TypeScript:service.ts
type DataType = {
id: number
name: string
createdAt: Date
}

async getData(): Promise<{ result: DataType[] }> {
const batchSize = 150000
let lastId = 0
let results: DataType[] = []
let specificData:

Canvasで画像を描画する

# はじめに
Canvas API を使用すると、ブラウザ上で画像やテキストを描画できるのですが、画像を切り取ったり、拡大・縮小したり、マウスクリックした状態でドラッグして移動したり…
といった色々なことができます。

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

弊社のいくつかのプロダクトでは、これらの技術を用いて合成画像を出力し、お客さんへ届けるという仕組みを構築しています。

本記事では、Canvas で画像を描画するための、非常に基本的な使い方を紹介します。

# まずは画像を描画する

canvas要素は、二次元描画コンテキストを提供します。
これは、図形、文字、画像、その他のオブジェクトを描画するのに使用します。

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D

今回、横と縦が300 * 400のねこちゃん画像を描画します。
描画される範囲（枠）のサイズは広めの800 * 600としておきます。

`

【TypeScript/JavaScript】Knipで不要なコードを簡単に削除する方法

# はじめに
TypeScript/JavaScriptのプロジェクトで不要なコードを検出し、削除するツール「Knip」について紹介します。
# Knipとは？
`Knip`は、TypeScriptやJavaScriptのコードベースから不要なコードを検出するためのCLIツールです。

以下のような不要なコードを検出することができます。

+ package.json の dependencies / devDependencies に含まれているが、実際には使われていないパッケージ
+ exportされているが、どこからもimportされていない変数、関数、型
+ 使用されていないファイル

これらの不要なコードを検出し、整理することでプロジェクトのメンテナンス性を向上させることができます。
# Knipの使い方
`Knip`の使い方は非常にシンプルです。
以下のコマンドを実行することで、プロジェクト内の不要なコードを検出できます。
“`sh
# インストール
npm install -D knip typescript @types/node

# 実行
npx knip
“`

自己紹介ページのフッターを編集ー2

お疲れ様です。

前回自己紹介ページのフッターに貼っている画像を、アニメーションを使ってじわりと表示するようにし、今日はその画像が順々に表示されるようコードを書きなおそうと思っていたのですが、冷静に考えると

「このページが表示された瞬間に画像たちがじわっと表示されてるから、スクロールしてたどり着くころには全部表示されてるし、これって意味ないんじゃ…？」

ということに気が付きましたので、かなり前に使った監視の observe を使っていきます:sweat_smile:

“`diff_javascript
const imgItem = document.querySelectorAll(‘.item’);

// 監視対象が範囲に交差したら実行する
const showItem = (entries) => {
for(let i = 0; i < imgItem.length; i++){ const keyframes = { // 定数keyframesで画像の透明度を指定する opacity: [0, 1], }; // 再生時間の指定 co

MIPSで様々なプログラムを書いてみる

# 概要
大学でアセンブリ言語を学んでいるので学んだ知識を共有できたらなということでJavaScriptとC言語で書かれたプログラムを色々[MIPS](https://ja.wikipedia.org/wiki/MIPS%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3)アセンブラで書いていきます。今回は再帰関数をやっていきます。

# 1から任意の数nまでの合計 – その壱
数学のように書くとこのようになります。
“`math
\sum_{n=1}^{n}k
“`
コードを見てもらった方が早いでしょう。
以下にJavaScriptとC言語のコードを載せておきます。

JavaScript

“`javascript:sum.js
function sum(n, res){
if(n<1) return res; else return sum(n-1,res+n); } ```