Notion APIでロールアップのカラムを検索できないメモ

“Notion APIでロールアップのカラムの検索をする”という記事を前に書いてましたが、Notion APIでロールアップのカラムを検索できない事象が発生していました。

https://qiita.com/n0bisuke/items/b9977f08d9e001bc08ea

## 事象

“`js
//色々省略

console.log(res.results[21].properties[‘課題カテゴリ’]);
console.log(res.results[21].properties[‘カテゴリ(自動化用)’]);
“`

“`json
{
id: ‘XXxW’,
type: ‘rollup’,
rollup: { type: ‘array’, array: [], function: ‘show_original’ }
}
{
id: ‘%7Cyt~’,
type: ‘formula’,
formula: { type: ‘string’, string: null }
}
“`

## インテグレーションへの権限付

jsでチェックボックスの状態によって背景色を変える

JavaScript苦手すぎるのでメモ。
かなり基礎的な部分から説明しているので初心者向けです

## やりたいこと
チェックボックスがオンの時　→　背景色青
チェックボックスがオフの時　→　背景色無色
にする

## サンプルコード
“`html:index.html

ここの背景色が変わります。

“`
id=textの部分の背景を変えていきます。

“`javascript:check.js
const check = document.getElementById(“check”); /*checkの情報を取得*/
check.addEventListener(“change”, changeBackgroundColor);

function

JavaScriptを使用したレスポンシブハンバーガーメニュー

# はじめに
今回は、一からシンプルなハンバーガーメニューを制作しました。JavaScriptとCSSを組み合わせて、レスポンシブにも対応しています。

# 全体のコード一覧

See the Pen
JavaScriptを使用

Laravelを1日でマスターしたい人向けチュートリアル

## Chapter 1: Laravelの紹介
Laravelは、PHPで書かれたオープンソースのWebアプリケーションフレームワークです。MVC（Model-View-Controller）アーキテクチャに基づいており、開発者が効率的にWebアプリケーションを構築できるように設計されています。豊富な機能と優れたドキュメントが特徴です。

## Chapter 2: 開発環境のセットアップ
Laravelを使用するには、PHP、Composer、およびLaravel自体をインストールする必要があります。以下のコマンドで新しいLaravelプロジェクトを作成できます：
“`bash
composer create-project –prefer-dist laravel/laravel myApp
“`

## Chapter 3: Laravelのディレクトリ構造
Laravelのディレクトリ構造は、アプリケーションの異なる部分を整理するために設計されています。主なディレクトリには、`app`、`config`、`database`、`resources`、`routes`など

僕だけのオープンワールド というゲーム。




#### 視点の先に画像を配置するだけのシンプルすぎるゲームです。
applle vision gorgle

JavaScript Primerを読んだ

## はじめに
今回JavaScriptの学習するにあたりJavaScript Primerという教材を読みました。
本記事はJavaScript Primerを読んでの感想になります。
## よかったところ
* 基本文法の使い方が一通り学べてボリューム的にも十分な量なため辞書的な使い方もできると思います。
* 文法の推奨される使い方や非推奨な使い方の解説もされているため実践的です。
* JavaScriptは毎年のように新しいバージョンがリリースされますが、それに合わせて書籍もアップグレードしてくれるため最新の情報を解説してくれます。
* 古いバージョンの書き方の解説もあるため既存のシステムで古い書き方のものを見る際にも役に立ちます。
## 学んだこと
* JavaScriptにおける基本的な文法の使い方。
* 非同期処理
* メインスレッドがJavaScriptの処理で占有されると処理の間スクロールができなくなるなど、ユーザーにとって不便になる。それを防ぐためにある処理を行っている間にまた別の処理を行うことを非同期処理と呼び、これによってUXの低下を防ぐ役割があります。

タグを用いたシークバーの書き方

# TL;DR
備忘録。タグを用いて進捗を表現するのは楽

# Introduction

タグはタスクの進捗状況を表すためのHTMLタグです。[: 進捗インジケーター要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/progress)

たとえば数ページに渡るフォームなどでの入力進捗を出したり、ファイルなどがアップロード中であることを表示したり、いろいろな進捗に関わる目的に利用できるタグだと思います。
そういった多様な目的のなかで例えば任意のポイントの進捗を得たい場合があるのではないかと思います。端的にはメディアのプレイバックの位置をシークしたりとか、一連のプロセスの任意の場所に再度移動したい場合があると思います。
そういった目的を``タグを用いたクリック＆ドラッグで操作できるような実装を備忘録として乗せたいと思います。
ReactやVueでの書き方とかは追記しますが一旦Vanillaで書いておきます

## ``タ

MediaWikiの[[File:~]]にAttachRefプラグイン風の添付ボタンを表示させる

PukiWikiのAttachRefプラグインをMediaWikiで再現するスクリプトです。

WIKIWIKI.JPで採用されていてとても好きだったプラグインです。
シンプルで直感的なのでMediaWikiに馴染みのない人でもアップロードしてくれるかも？

## 仕様
[[File:～]]構文で“class=upload“を付けておくと、その画像が存在しない場合、直接アップロード可能な「添付」ボタンが表示されます。

また、ライセンステンプレート名をclassに同時に追加しておくと、アップロード時のライセンステンプレートを指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102207/f27250a4-cfdc-767e-b431

英単語になるカラーコードを総当たりで探す

# やりたかったこと
カラーコードで使用するアルファベット6種類6文字で、英単語になるものがいくつあるのか知りたい。
検索したところ総当たりで調べた結果は見つけられなかった。
→ せっかくなのでプログラムを書いて調べてみることにしました。

※先行記事：

https://qiita.com/shigemaruu/items/e4492455c973719da181

# 方針
* Node.jsを使って作成し、コマンドラインで呼び出すと結果が表示されるようにする。
* カラーコードに使える6種類6文字の組み合わせをすべて調べて、辞書に存在するものを抽出する。

# やったこと
### パブリックドメインの英和辞書を取得
こちらからJSON形式のものをお借りしました。

https://kujirahand.com/web-tools/EJDictFreeDL.php#google_vignette

### 準備
ディレクトリ作成、package.jsonの作成
“`
$ mkdir colorcodeapp
$ cd colorcodeapp
$ npm init
“`
辞書の

楽譜描画のためのフォント仕様: SMuFL 準拠フォントの使用に関する覚書

# はじめに

一素人が SMuFL について調べたメモをここにまとめる.
コード例などは HTML+JavaScript で挙げるが、別の環境でもフォントの扱い方などの違いを考慮すれば同じような計算で同じ結果を得られるはずである.
この記事では実験用のフォントファイルとして [Bravura の otf ファイル (ver.1.392)](https://github.com/steinbergmedia/bravura) を使用した.
ソースコードの内容に関する説明があまりない点、この記事の内容には多くの誤りが含まれるだろうことを先に断っておく.

# SMuFL とは

[SMuFL の公式サイト](https://www.smufl.org/) によれば、

> SMuFL is a specification that provides a standard way of mapping the thousands of musical symbols required by conventional music notation into the Private Use A

.envファイルとは何なのか？

# はじめに
現在Reactとsupabaseを使用してTodoアプリを制作しています。制作している中で.envファイルというものが出てきたのですが、.envファイルとは何か分からなかったので調べてみました。

## .envファイルとは
.envファイルとはすごく簡単にいうと秘密の情報を書いておくためにファイルです。具体的には、環境変数を書くことができます。今回は下記のようにsupabaseのkeyを設定しています。

“`.env
VITE_SUPABASE_URL=https://⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎
VITE_SUPABASE_ANON_KEY=aaaaaaaaaaaaaabbbbbbbbbbbb111111111
“`

## どんな時に使うのか？
.envファイルは隠しファイルとなっているので隠したい情報などを記述できます。アプリケーションで使用する、環境変数やapiのキーなどを管理するために使用します。apiのキーなどを公開してしまうと悪用されてしまうことがあるので気をつけてください。blobとは（フロントエンド編）

# はじめに
今回、インターンでblobを扱うようになったので、今回記事を書いていきます！

**Blob**（Binary Large Object）は、クライアントサイドでファイルデータやバイナリデータを扱う際に非常に大切になります。特にWebアプリケーションの開発において、Blobを利用することで、ユーザーがローカルファイルを操作したり、データをダウンロードしたりする機能を実装できます。本記事では、クライアントサイドのBlobの基本的な使い方から、実際のユースケース、パフォーマンスの最適化までを調べたことを書いていきます。

—

## 1. Blobの基本概念

クライアントサイドでのBlobは、主にJavaScriptで操作され、バイナリデータやファイルの内容を表現するために使用されます。Blobは、テキストデータやバイナリデータ、画像、動画など、さまざまなデータ形式を扱うことができます。
Blobは、以下のようにJavaScriptを使用して簡単に作成できます。

“`typescript
const data = new Uint8Array([72, 101, 1

元記事を表示

[JS] 頻繁に使用する文字列、配列で似ているメソッドの違いを口頭で説明できますか？Part 1

# 似た動きをするメソッド
以下のメソッドたちは似た動きをするので、明確な違いを理解しておく必要がある
## slice vs splice
“`js
const arr = [1, 2, 3, 4, 5, 6];

// slice
const sliceArr = arr.slice(0, 2); // [1, 2]
console.log(arr) // [1, 2, 3, 4, 5, 6]

// splice
const spliceArr = arr.splice(0, 2); // [1, 2]
console.log(arr) // [3, 4, 5, 6]
“`
このようにsliceとspliceは~~同じく開始indexと終了index~~ 第一引数は開始indexと同じですが、第二引数はsliceは終了index、spliceは取り除く要素の数を引数として受け取っており、
返される配列は開始indexが0の時は同じものなのでよく混同しやすいです。

しかし、元の配列を確認してみるとsliceの場合は変化がありませんがspliceを使用したあとはspliceで返

元記事を表示

WindowsでのReact環境構築をしてみた

# Reactの勉強をするためにViteを利用してReactの環境構築をしてみました。

## 1.Node.jsをインストールする

1-1.[公式サイト](https://nodejs.org/en)にあるインストーラーを使用してインストール

1-2.コマンドプロンプトでバージョン確認してインストールできたことを確認
“`
node -v
npm -v
“`

### —なぜNode.jsをインストールするの？—
・Node.jsに付いてくるnpmというパッケージ管理ツールでReactで使うパッケージの管理を簡単にするため
・ローカル開発サーバーを使って開発アプリの動作を確認するため

## 2.Viteの環境構築構築をする

2-1.以下のコマンドでViteプロジェクトを作成する
“`
npm create vite@latest
“`
2-2.作成するとプロジェクト名は何にするか聞かれるので任意のプロジェクトを入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

元記事を表示

React｜todoアプリが開発できて、開発の理解が深まるサイト

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。

# 対象

– Reactのインプットが完了してお手頃なアプリを開発したい方
– フロントのみで実装したときの『データの流れ』を理解したい方

# サイトのURL

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning

# アプリのご紹介

こんなアプリが開発できます。


# 何が学べるか？

### CRUDの開発

登録（Create）・参照(Read)・更新(Update)・削除(

元記事を表示

Hydration mismatch回避にuseEffectを使うな

タイトルの通りです。

## Hydration mismatch

ReactなどでSSRを伴う開発をしていれば一度は遭遇したことがあるのではないでしょうか。
SSRでレンダリングされたHTMLと、それを読み込んだクライアントが同様にレンダリングしたHTML(相当)に差異が生じた際、console上に記録されるエラーです。

例えば、以下のようなケースです。

“`jsx
export function App() {
const now = new Date().toLocaleString();
return

now: {now}

}
“`

少し露骨ではありますが、サーバーでレンダリングされる瞬間と、クライアントでハイドレーションされる瞬間は多くの場合で一致しないので `now` の値が違うぞ、となるわけです。

## 回避にuseEffectを使う

SSR時は仮の値を表示しておいて、useEffectでマウント時に値を設定することで差異の発生を防ぐことができます。

“`jsx
import { useEffect, useState }

元記事を表示

きれいだな。花火を見るゲーム。



### スペースキーを押すと花火が見れます。（スペースキーを押すだけの簡単操作のゲームです。）

#### 花火が見れるゲーム。
“`python
import http.server # HTTPサーバーの機能を提供
import socketserver # 簡単にサーバーを構築するためのモジュール
import tempfile # 一時ファイルを作成するためのモジュール
import webbrowser # デフォルトのウェ

元記事を表示

【JavaScript】高階関数について（コールバック、クロージャ、カリー化）

# はじめに
JavaScriptの高階関数などについて概要をまとめました。
概念的で難しく、かなり理解に苦しみました（まだ全て理解できていないと思います…）。
実際のプログラミングにおいて有効利用するにはもっと習熟しなければいけないと感じました。

# 高階関数
– 関数を返す関数のこと
– 関数をその他のオブジェクトと同様に扱うことで実現されている。このようなことができるプログラミング言語は、**第一級関数**を持つ、という

# コールバック関数
– 他の関数に引数として渡される関数のこと
– 例としては、Array.prototype.map()、Array.prototype.forEach()、setTimeout()など

# クロージャ
– クロージャとは、それが内包する変数や関数などをまとめて閉じ込める役割を果たすものである
– JavaScriptの関数は入れ子にすることができる
– 内側の関数は、外側の関数のスコープ内に存在する変数にアクセスできる
– 一方で、内側の関数には、外側の関数の中からしかアクセスできない
– ゆえに、ある関数の内部は閉じられたひとつの範

元記事を表示

JavaScript: 圧縮とかLogistic Mixing

P_i(1) を i 番目のmodelが予測する次のbitが 1 である確率とする。このとき、Logistic Mixingによる最終的な予測確率 P(1) は以下のように計算される。

• x_i = stretch(P_i(1))
• P(1) = squash(Σ_i w_i x_i)

ここで

• stretch(x) = ln(x/(1-x))
• squash(x) = 1/(1+exp(-x)) (stretch の逆演算).

それぞれの予測の後、Dataを符号化する計算量を最小化するように重みが調整される。

• w_i ← w_i + η x_i (y-P(1))

ここでηは学習率(典型的な値は 0.002 から 0.01)、y は予測bit、(y-P(1))は誤予測。

## 実装
[r

元記事を表示

javascript 簡単だと思ったタイピングゲーム作成が意外と奥の深い話になります

## タイピングゲームは自体は難しくない、日本語が難しい

夏休みの自由研究として、javascriptでタイピングゲームを作ろうと思いましたが、意外なところでつまいづいたという話。

基本的にやることは３つです。
１．問題を表示する
２．基本的にaddeventlistnerでキャッチした入力をhtmlのdivのidめがけて放り込んで、一致したら正解。
３．次の問題へ

しかしここからが沼です。

“`html:typinggame.html

タイピングゲーム

hello