- 1. D3 v7 棒グラフのいろいろ
- 2. Googleカレンダーの変更をLINEに通知するようにするのを全部ブラウザ経由でやる／Google Apps Script(GAS)+Line Notify
- 3. オプショナルチェーン ?.
- 4. ReactのuseStateによるステート管理と再レンダリングの仕組み
- 5. 色々な言語の Dictionary のキーの型の扱いについて調べてみた
- 6. Reactからsupabaseにデータを追加できない
- 7. ChatGPT と始める React
- 8. 「もっと見る」ボタンのJavaScript実装ガイド
- 9. PixiJSのv8.xが移行が難しすぎる件について
- 10. connect-flashのメッセージが消える
- 11. 最近 Hono で外部連携用の AWS Lambda 書いています
- 12. Safariのアドレスバー（タブバー）が原因によって、vhで指定した要素の高さが変わってしまう問題の対処
- 13. JavaScriptでランダムな13桁のJANコードを生成する方法
- 14. Next.jsのApp Router対応のnext-export-i18を使った場合にCypressでuseTransrationをモックする
- 15. input[type=”date”] で今日を選択する
- 16. react-hook-form と zod による、基本的なバリデーション付きフォーム
- 17. 【JavaScript】Hoistingとは
- 18. 【JavaScript】プリミティブ型とは
- 19. 【JavaScript】スコープの種類
- 20. 【JavaScript】スコープとは
D3 v7 棒グラフのいろいろ
D3 では棒グラフを描くことが多いと思います。今回は都道府県罰人口の棒グラフを描くことで、様々なテクニックを見ていきたいと思います。
データは以下のサイトからCSVをダウンロードして使います。
[社会・人口統計体系 – e-Stat（政府統計の総合窓口）](https://www.e-stat.go.jp/regional-statistics/ssdsview/prefectures)【関連記事】
[React 再入門 (React hook API) – Qiita](https://qiita.com/sand/items/7a6ef787d11c3ebabf08)
[D3 v7 入門 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)
[D3 v7 グラフ – d3-sc
Googleカレンダーの変更をLINEに通知するようにするのを全部ブラウザ経由でやる／Google Apps Script(GAS)+Line Notify
なんか最近IFTTTでやってたGoogleカレンダーのLINEへの追加通知が動いてなかったのでGASのみでやろうとしたところ「clasp とかいるんか…今手元に開発環境ないんよなぁ」「全部ブラウザ使うならどんな手順になるん？」となったのでまとめてみました。
# 1.LINE Notifyに登録してアクセストークンを発行する
以下とかを参考にやります。https://zenn.dev/protoout/articles/18-line-notify-setup
# 2.なんか適当にGoogleスプレッドシートのファイルを作って、Apps Scriptを開く
下記画像みたいな感じで。ファイル名は適当で。
# 3.コードを貼り付ける
コードはこちらから拝借させていただきました。
(コードにはSlackへのエラー通知も含まれますが、本記事の手順に
オプショナルチェーン ?.
## 形式
“`js:JavaScript
sample?.hoge.piyo.huga()sample.hoge?.piyo.huga()
“`
`?.`の左側（上記なら`sample`と`hoge`）で`undefined`か`null`がありえる時の記載を簡略化## 特徴
* `?.`で表現
* 対象が`undefined`か`null`の場合の記載を簡略化可能
* 対象が`undefined`か`null`の場合に`undefined`が返る
→これによりエラーによる処理停止を回避## 使用例
“`js:JavaScript
AppInfo?.control.gacha.enabled ? 処理1 : 処理2“`
1. `AppInfo`が`undefined`又は`null`でないかを判定
* （結果はOKとする）
1. `control`内の`gacha`内の`enabled`へアクセス
* （`enabled`内には`true`・`false`どちらかを記述）
1. `enabled`の結果で分岐
* `true`なら処理1
ReactのuseStateによるステート管理と再レンダリングの仕組み
## はじめに
京都のWeb系ベンチャ企業でエンジニアをやってます有堀です。実務では主にJavaScript, phpを使用しています。## 対象者
この記事は、Reactにおける状態管理とコンポーネントの再レンダリングについて学びたい方を対象としています。基本的なJavaScriptの知識とReactの基礎を理解していることが前提となります。useStateフックの概念と使用方法をより深く理解したい方に特におすすめです。## 環境
“`
OS: macOS Sonoma 14.4
開発環境: Visual Studio Code (VSCode)
Reactバージョン: React v18
“`## 内容
Reactでは、コンポーネントの状態管理と再レンダリングの挙動がJavaScriptの基本的な書き方とは異なる仕組みに基づいています。本記事では、その違いを具体例を交えて解説します。## 状態の管理
### useStateを使用しない場合
“`
const Example = () => {
let displayVal; // 入力欄の値を格
色々な言語の Dictionary のキーの型の扱いについて調べてみた
Dictionary や object のキーに複数の型を指定した場合、どういった扱いになるのかが非常に気になったので、自分の知っている範囲の言語で試してみました！
# Python の場合
“`python:Python
a = {}
a[1] = “int”
a[1.0] = “float”
a[“1.0”] = “str”
# => {1: ‘float’, ‘1.0’: ‘str’}
“`int と float は同一視されるようです。Python では `1 == 1.0` が成立するので、これは合理的な気もしますね。使う側は非常に安心できます。他にも、True, False, Fraction, Decimal なども同一視されるようです。
> Numeric values that compare equal have the same hash value (even if they are of different types, as is the case for 1 and 1.0).
https://docs.python.org/3.5/lib
Reactからsupabaseにデータを追加できない
# 初めに
現在Reactを用いて学習記録アプリを制作しています！
制作の過程でインプットタグに挿入したデータをsupabaseに追加するという機能を実装しようとしたのですが、うまく動作しなかったので共有します。# 問題点
学習内容を入力するフォームと学習時間を記録するフォームを設置して、その横にある登録ボタンを押すとリストに名前が追加されるという機能の実装を試みました。
ですがボタンを押してもコンソール上にはエラーしか返ってきません…
結論から言うとボタンを押した時に動作する、supabaseにデータを追加する関数が間違っていました。
以下が間違っていた関数です。
“`react
export const addTodo = async (title, time) => {
const { data, error } = await supabase
.from(“study-record”)
.insert([{ title: title, time: time }]);if (error) {
throw error;
}
ChatGPT と始める React
### **user**:
ChatGPT先生、Reactについて教えてもらっていいですか？
—
### **assistant**:
何だって私に教えて欲しいの？まぁ、仕方ないわね、知りたいなら。Reactは、Facebook社が開発したJavaScriptライブラリよ。主にシングルページアプリケーション（SPA）の開発に利用されていて、ユーザーインターフェースを構築するために使われるの。
Reactの特徴の一つがコンポーネントベースのアーキテクチャ。この設計思想があるから各コンポーネントは独立していて、再利用可能になるのよ。なぜあなたにこんなに詳しく教えなきゃならないのだか……自分で勉強するモチベーションになったらいいわね！
—
### **user**:
ありがとうございます。初学者がReactを学ぶためのコード例を教えてください。
—
### **assistant**:
はぁ、そんなに私に頼らないで自分で調べたら？まぁ、でも仕方ない。簡単なコード例を教えてあげるわ。これがReactの基本的な”Hellow world”の例ね。
“`j
「もっと見る」ボタンのJavaScript実装ガイド
# 初めに
こんにちは！taisei_code です。
私がWeb制作会社で勤務していた時、「もっと見る」ボタンの実装に関する多くの記事がjQueryに関するものであることに気づき、JavaScriptについての解説記事を執筆することにしました。jQueryの利用はコード量を減らして便利にするものですが、初学者にはJavaScriptの基本概念への深い理解が特に重要です。この基礎が、**将来Reactなどのライブラリーやフレームワーク**を学ぶ過程で非常に役立ちます。
# ゴール
# 実装要件
– 初期表示で最初の 3 つの要素を表示し、それ以降の要素を非表示にする。
– 「more」ボタン
PixiJSのv8.xが移行が難しすぎる件について
## はじめに
Nodejsで[ytdl-core](https://github.com/fent/node-ytdl-core)を使って取ってきたYoutube音声を再生して自動でAudioSpectrumを作るアプリを作ろうとしたときPixiJSでSpectrumを描画しようとしたら詰まったのでメモ。## 環境構築(Preact)
自分が行ったとおり([Codespaces](https://github.com/codespaces)で[bun](https://bun.sh/)をつかって)やっていきますので所々違うかもしれませんがまあそこは自分で調整して下さい
“`bash
npm i -g bun
bun create preact
bun add pixi.js
“`解説 読みたい人向け
“`
npm i -g bun
“`
普通にbunのinstall
“`
bun create preact
“`
bunでpreactプロジェクトの作成
bunのところをnpmに変えても動くのかな？しらんけど
connect-flashのメッセージが消える
Express3系でFlashメッセージを表示する為、connect-flashというパッケージを追加して、（勝手に）罠にハマったので共有しておきます。
https://www.npmjs.com/package/connect-flash
サンプルコードを見ながら、下記のようなコードを書いて動作チェックしました。
“` app.js
app.get(‘/flash’, function(req, res){
req.flash(‘info’, ‘Flash is back!’)
res.redirect(‘/’);
});app.get(‘/’, function(req, res){
console.log(req.flash(‘info’)); // デバッグ用にメッセージを仕込んだ
res.render(‘index’, { messages: req.flash(‘info’) });
});
“`“` index.ejs
<% if (messages){ %><%= messages %>
<% } %>
“`
最近 Hono で外部連携用の AWS Lambda 書いています
## AWS Lambda のハンドラは辛い
こんにちは！AWS Lambda初心者です！
[AWS Lambda](https://aws.amazon.com/jp/lambda/) と言えば、サーバレスかつ非常に安い価格で無限にスケールアウトできる処理を書けることで有名ですが[^1]、 [2022年04月の Function URL アップデート](https://aws.amazon.com/jp/blogs/aws/announcing-aws-lambda-function-urls-built-in-https-endpoints-for-single-function-microservices/) でAPI Gatewayなど用いなくてもラムダ単体かつ無料でHTTPリクエストを処理できるURLを持てるようになり、かなりの神サービスになりました。
[^1]: 正直AWS内での広範な扱いを見ていると、AWSの便利なマクロ拡張関数といったほうが適切な気はします
弊社でも [Function URL](https://docs.aws.amazon.com/ja_jp
Safariのアドレスバー（タブバー）が原因によって、vhで指定した要素の高さが変わってしまう問題の対処
# はじめに
***vh*** は以下のように要素の高さを指定することで、ユーザが使用するデバイスのビューポートに応じて、動的に指定した要素の高さを変更することが出来ます。
“`css
.container {
height: 50vh;
}
“`ただここに問題があり、Safariのアドレスバー（タブバー）が出現するとビューポートが変更されたとみなされ要素の高さが変わってしまいます。
これではアドレスバーの表示、非表示が繰り返される度に、要素の高さが変わってしまい、画面がガクガクとなることで体験が非常に悪くなります。
対処することが出来たので、この記事では対処法を共有したいと思います。
# 対処法の紹介
対処法は難しくありません。
まず、以下のコードをガクガクとなってしまっているコンポーネントに追加します。
“`javascript
useEffect(() => {
const setVH = () => {
const vh = window.innerHeight * 0.01;
document.documentE
JavaScriptでランダムな13桁のJANコードを生成する方法
検索しても、あまり良さそうなサイトが見つけられなかったため、[こちらのサイト](https://www.gs1jp.org/code/jan/check_digit.html)の「GTIN（JANコード）標準タイプ（13桁）のチェックデジットの計算方法」を参考に作成しました。
## コード
“`javascript
const createFakeJanCode = () => {
// 12桁のランダムな数字の文字列を生成
const randomString = Math.random().toString(10).slice(-12);// ランダムな数字の配列
const numberArray = […randomString].map(Number);// 奇数番目の要素の合計①
const oddSum = numberArray
.filter((_, index) => index % 2 === 1)
.reduce((sum, nextValue) => sum + nextValue);// 偶数
Next.jsのApp Router対応のnext-export-i18を使った場合にCypressでuseTransrationをモックする
Next.js において、exportを使ってサイトを公開する場合の多言語化で [next-export-i18n](https://www.npmjs.com/package/next-export-i18n) を利用する場合、
next-export-i18n は Next.js のルータの仕組みを使っているため、
CypressのコンポーネントテストではRouterをモックする必要が出てきます。next-export-i18n の 2.x.x では、基本的にPage Routerのみに対応していたため、
以下のように next/router をモックすることで、テストが可能でしたので共有いたします。“`ts
import * as Router from “next/router”;
const router = {
query: {
id: undefined,
lang: “ja”
},
pathname: “/”,
push: cy.stub()
};
cy.stub(Router, “useRouter”).returns(r
input[type=”date”] で今日を選択する
HTMLの `` は、ユーザーにカレンダーから日付を選択させる便利な方法を提供します。
しかし、この要素のvalue属性は `”yyyy-mm-dd”` の形式で日付を受け取る必要があります。これは、JavaScriptの `new Date()` が返す日付オブジェクトと直接互換性がないため、少し手間がかかります。
この記事では、現在の日付をフォーマットし、要素の値として設定する方法を詳しく説明します。
## HTMLの準備
まず、日付入力フィールドと「今日」ボタンを含む簡単なフォームを作成します。ボタンをクリックすると、フィールドに現在の日付が設定されるようにします。
“`html
“`
## JavaScriptでの日
react-hook-form と zod による、基本的なバリデーション付きフォーム
## はじめに
本記事では、React 用のフォームライブラリ「react-hook-form」と「zod」の使い方を解説します。react-hook-form と zod を使えば、最小限のコードでバリデーション付きフォームを実装できます。
本記事を読むことで、以下のことが学べます。
– react-hook-form の基本的な使い方
– zod を使った基本的なスキーマ定義とバリデーション
– refine を使った高度なバリデーション
– TypeScriptでの記述時の型のポイント※ コードのみの説明にするため、[Water.css](https://watercss.kognise.dev/) による最低限のデザインになっています。
## react-hook-form のみでシンプルなフォームを作る
まずは、名前とメールアドレスだけの簡単なフォームを作ってみましょう。react-hook-form では、`useForm`フックを使ってフォームの状態を管理します。
; // undefined
var x = 5;
console.log(x); // 5foo(); // “hello”
function foo() {
console.log(“hello”);
}
“`このコードでは、変数`x`と関数`foo`が使用される前に宣言されていますが、実際には宣言された位置と異なる箇所で使用されています。JavaScriptのhoistingにより、実
【JavaScript】プリミティブ型とは
# プリミティブ型とは
JavaScriptのプリミティブ型は、データの基本的なタイプを表します。以下は、プリミティブ型の主な種類です：1. **文字列 (String)**:
– テキストデータを表現します。ダブルクォーテーション (`”`) またはシングルクォーテーション (`’`) で囲まれます。2. **数値 (Number)**:
– 数値データを表現します。整数や浮動小数点数などの数値を扱います。3. **真偽値 (Boolean)**:
– 真(true)または偽(false)の値を表現します。条件式や制御構造などで使用されます。4. **undefined**:
– 変数が宣言されているが、値が代入されていないことを表現します。5. **null**:
– 値が存在しないことを表現します。変数が存在するが、何も参照していないことを示します。6. **Symbol**:
– ES6で導入された、一意の識別子を表現します。主にオブジェクトのプロパティキーとして使用されます。これらのプリミティブ型は、JavaSc
【JavaScript】スコープの種類
# スコープの種類
JavaScriptにおけるスコープは、大きく分けて次の3つのタイプがあります。1. ブロックスコープ（Block Scope）:
ブロックスコープは、一般的に `{}` で囲まれた範囲を指します。JavaScriptでは、`let` や `const` キーワードで宣言された変数はブロックスコープを持ちますが、`var` キーワードで宣言された変数はブロックスコープを持ちません。“`javascript
{
// ブロックスコープ
let blockVar = “I am a block scoped variable”;
const blockConst = “I am a block scoped constant”;
var globalVar = “I am a global variable”;
}console.log(blockVar); // エラー: ブロックスコープ外からはアクセス不可
console.log(blockConst); // エ
【JavaScript】スコープとは
# スコープとは
JavaScriptにおけるスコープ（scope）とは、変数や関数が参照可能な範囲を指します。スコープは、変数や関数が定義された場所によって決まります。JavaScriptでは、主に次の2つのスコープがあります。1. グローバルスコープ（Global Scope）: グローバルスコープは、どこからでもアクセスできる最も外側のスコープです。スクリプト内のどこからでもアクセス可能な変数や関数がグローバルスコープに定義されます。ただし、モジュール内や関数内で `var` や `function` を使わずに変数や関数を定義すると、それらはグローバルスコープではなくモジュールスコープやローカルスコープになります。
“`javascript
// グローバルスコープ
var globalVar = “I am a global variable”;function globalFunction() {
console.log(“I am a global function”);
}
“`2\. ローカルスコープ（Local Scope）: ローカルスコープ
