- 1. シンプルなWebフロントフレームワーク、Astroって知ってる？
- 2. JavaScript の console.log()
- 3. ChakraUI を使って 単一コンポーネント内に複数モーダルを組み込もうとしたら詰まった件
- 4. 【TypeScript】const アサーションと型エイリアスを組み合わせた型定義 （enum の代替手段）
- 5. 【Figma Widget】Figma Widgetで非同期処理を行う
- 6. 【TypeScript】typeof や keyof を組み合わせた型定義
- 7. ClaudeやChatGPTにリポジトリを丸ごと読み込ませるコマンドを作りました！
- 8. JavaScript: 圧縮とかPPM star(3)
- 9. javascript-algorithmsでアルゴリズムを学ぼう！
- 10. javascriptで行う画像処理
- 11. RustとWebAssemblyでドット絵フィルター作ってみた
- 12. （1冊ですべて身につく）ローディング画面を作成する
- 13. よくわからないPromiseとかいうやつを紐解く
- 14. TypeScriptの基本について調べてみました。
- 15. 添付ファイルの虫眼鏡アイコンが一覧画面にも欲しい（プリザンター）
- 16. Vueで始めるi18n対応
- 17. 【Vite x React】学習記録アプリ作成からデプロイ・テストまでを実施
- 18. Error: Invalid project selection, please verify project *** exists and you have access.
- 19. `f(data)` 形式だとオプショナルチェーン（`data?.method()`）が無いので、ユーティリティを用意しよう
- 20. スプレッド構文について
シンプルなWebフロントフレームワーク、Astroって知ってる？
:::note warn
この記事の内容は、あくまでも**私個人の意見や好み**の話です。一意見としてお聞きいただければ幸いです。また、時節が変わるにつれて私個人の好みも変わっていくことがありますので、その点は悪しからず。
:::**[Astro](https://astro.build/)というWebフロントエンドのフレームワーク**をご存知でしょうか。自分も最近知って使うようになり、とても気に入ってしまったので、その紹介をしていきたいと思います。
## Astroを知る前
**Webフロントエンドのフレームワーク**といえば皆さんは何を思いつきますか。Vue, React, Svelteなどなどいろいろとあるかと思います。私も最近はほとんどReactを使って開発をしていました。ただそんな中で感じていたのは、**ちょっとした静的なページを作りたいときに、React使うのは重たいなぁ**といった感覚です。APIと頻繁にデータをやり取りするだとか、ログイン機能があるだとか、そういう所謂**Webアプリ**であればReactで実装するのはやりやすいです。でも、たとえばブログとかポ
JavaScript の console.log()
JavaScript の console.log() で開発者ツールの Console に JavaScript オブジェクトや html 要素 (DOM) を出力すると、JavaScript のコード上で console.log(x) とした時点での内容ではなくて、ブラウザの開発者ツールの Console タブを開いた時点での内容が表示されるという話を書きます。
上の画像の JavaScript のコードの (1) を見てください。obj = { prop: 123 } という JavaScript オブジェクトを作成してから即 console.log(obj) とし、その後で prop の値を 456 に書き換えています。しかしながら、コンソールを開いて見ると prop が書き換えられた後の 456 という結果が表示されています。
ChakraUI を使って 単一コンポーネント内に複数モーダルを組み込もうとしたら詰まった件
# はじめに
みなさん、こんにちは。**torihazi**です現在、Rails 7 x React 18 x ChakraUIを使用して Xクローンを作成しています。
そこでタイトルのことをやろうとしたら詰まったので、その解決策的なものを書き残そうと思います。
# 現状
まず目指していたものはXのPCから開ける画面のこれです。
このとき “アカウント作成”を押したらこんなモーダルが、
“ログ
【TypeScript】const アサーションと型エイリアスを組み合わせた型定義 （enum の代替手段）
# はじめに
TypeScript には、**const アサーション**と**型エイリアス**を組み合わせて型を定義する方法があります。この記事では、具体的な例を通じて、この手法を実践的にどのように活用するかを解説します。
# const アサーションとは？
**const アサーション**は、オブジェクトや配列のリテラルで使用します。以下のように、`ActionType` は `const` で定義した定数であるため、再代入することはできません。ただし、定数内のプロパティは変更できます。
“`typescript
const ActionType = {
Get: 0,
Post: 1,
Put: 2,
Delete: 3,
};const ActionType = null;
// 定数であるため、’ActionType’ に代入することはできません。ActionType.Post = 10; // プロパティは変更は可能
“`
そこで**const アサーション**の出番です。`}` のあとに `as const` を記述することで、後から
【Figma Widget】Figma Widgetで非同期処理を行う
## はじめに
みなさんは、Figma Widget を開発する際、非同期処理を行いたいと思ったことはありますか？
この記事では、Figma Widgetで非同期処理を行う方法について解説しようと思います。
## 非同期処理を行う
非同期処理を行うには、`waitForTask` という関数を使う必要があります。
`waitForTask` 関数は、引数に `Promis` を受け取り、`Promis` が解決されるまでウィジェットを維持します。
“`ts
waitForTask(task: Promise): void
“``waitForTask` 関数の主な使用方法は、ウィジェットが挿入されたときにデータをフェッチすることです。
`useEffect` と組み合わせることで、iframe 経由でネットワークリクエストを行い、その
【TypeScript】typeof や keyof を組み合わせた型定義
# はじめに
本記事では `typeof` や `keyof` を組み合わせて型を定義する方法とその注意点について紹介します。TypeScript では独自の型を定義する方法として、`interface` と `type` がありますが、本記事では `type` を使用します。
# 型エイリアス
**型エイリアス**は、既存の型に別名を付けることができる機能です。`type` キーワードを使用して、型エイリアスを宣言します。型エイリアスは、コードの可読性を向上させ、複雑な型定義を簡略化するために使用されます。“`typescript
// 型エイリアスの宣言
type StringOrNull = string | null; // | で繋げてユニオン型を定義let subtitle_1: StringOrNull = “Foo Bar”;
let subtitle_2: StringOrNull = null;
“`# keyof や typeof を組み合わせた型定義
本題である `typeof` や `keyof` を組み合わせた型定義を紹介します。
ClaudeやChatGPTにリポジトリを丸ごと読み込ませるコマンドを作りました！
Claude を使ったコーディング体験が素晴らしかったので、より簡単に Claude と一緒にコーディングするための Node.js コマンドを作りました。
リポジトリの直下で以下を叩くと `repopack-output.txt` というファイルが出来上がります。
“`bash
$ npx repopack
“`そのまま Claude に次のようなプロンプトと一緒に送ると、
“`txt
このファイルはリポジトリのファイルを1つにしたものです。コードのリファクタをしたいのでまずコードを確認してください。
“`全体の内容を理解した上で、リファクタリングなどを進めることができます。
具体的な内容を提案すると、それに従って良い感じのコードを生成してくれます。Claude だと Artifacts 機能で複数のファイルが出力できるため、
JavaScript: 圧縮とかPPM star(3)
PPM star編第3話。圧縮力を高めるためにPPMd等で使われている技術を組み込んでいきます。**遺伝法、SEE**、そして新たに**二次記号推定**(Secondary Symbol Estimation, SSE)の3つです。
“`js
function Suffix(){this.root=this.point={size:0,cs:-1,sum:0,o:0}}function update(sa,s){
var a,b,e,m,n,r,t,
f=sa.fit,p=sa.max,q=sa.med,l=sa.min,
o=l,u=f?l.sum+l.cs:0,v=f?f.hit:0,
c={size:p.size+1, cs:-1, sum:0, o:0};
for(;p!==q;p=p.dad){
m=p.sum+1,n=2*v*(6+m),m+=u;
// inheritance
n=n>m*6?3+(n>m*9)+(n>m*12)+(n>m*15):(p.sum++,n>m)+(n>m*3);
t={char:s, hit:n, son
javascript-algorithmsでアルゴリズムを学ぼう！
https://github.com/trekhleb/javascript-algorithms/blob/master/README.ja-JP.md
“`text
このリポジトリには、JavaScriptベースの一般的なアルゴリズムとデータ構造に関する多数のサンプルが含まれています。各アルゴリズムとデータ構造には独自のREADMEがあります。 関連する説明、そして参考資料 (YouTube動画)も含まれています。
“`
すごい！データ構造、アルゴリズム、aradigmによるアルゴリズムという項目に分けられておりそれぞれの項目内でさらに各要素に初心者、上級者のタグがつけられている。
内容的には初心者用のデータ構造とアルゴリズムに関する入門書では乗っていないような内容も含まれているため、学びごたえもありそうで良いと思います。
Repository名の通りjavascriptで実装されているので他の言語に書き直したりしても面白そうです。
javascriptで行う画像処理
## 前書き
画像処理について学んだ事をjavascriptのプログラムとともにまとめて行きます。
GitHubにもコードをあげているので興味があればご覧ください。
https://github.com/kengo2003/image-process-nextjs## 目次
1. [使用技術](#使用技術)
2. [グレースケール化](#グレースケール化)
3. [明るさ](#明るさ)
4. [濃淡の反転](#濃淡の反転)
5. [ポスタリゼーション](#ポスタリゼーション)
6. [平均化フィルタ](#平均化フィルタ)
7. [ラプラシアンフィルタ](#ラプラシアンフィルタ)
8. [エンボス処理](#エンボス処理)
9. [今後](#今後)
10. [参考文献](#参考文献)## 使用技術
・javascript
・Nextjs## グレースケール化
グレースケール化は、カラー画像を白黒画像に変換するプロセスです。RGB（赤、緑、青）の各の各値を一定の割合で組み合わせて、輝度情報を算出し、1つにまとめます。
このプログラムではBT.601はSDTVの規格の計算式を使
RustとWebAssemblyでドット絵フィルター作ってみた
# はじめに
webcamの映像にドット絵フィルターをかける方法をまとめておきます。
ドット絵化とモザイク処理の違いについて(Gemini1.5proより)
“`
・ドット絵化（ピクセレーション）
各ブロック（ドット）内のピクセルを平均化して、そのブロック全体を 単一の平均色 で塗りつぶします。
ブロック内の色の情報は失われ、均一な色のブロックになります。
レトロゲームのような、ドットがはっきりとした表現になります。・モザイク処理
各ブロック内で ランダムに1つのピクセルを選択 し、そのピクセルの色でブロック全体を塗りつぶします。
ブロック内の色の情報は完全に失われるわけではなく、一部のピクセルの色がブロック全体に反映されます。
プライバシー保護などの目的で、部分的に画像を隠す場合に用いられます。
“`# プロジェクトの作成
まず、HTMLとJavascriptで映像をCanvas要素に描画する。
前回作成した下記記事を参考にする。
https://qiita.com/shisojuice/items/d5906127e031354db800
Ru
（1冊ですべて身につく）ローディング画面を作成する
お疲れ様です。
今日は、昨日から勉強していたローディング画面を作成終えましたので、まとめです。
１枚目が画像を読み込んでいる間に表示されるローディング画面で、2枚目が読み込まれた画像です。
 の [第 10 回 15:25 ⑤添付ファイルに貼り付けたPDFを編集画面上で表示できますか？（サンプル有り）](https://www.youtube.com/watch?v=GPl5n71Tlt4&t=925s) で、そのものずばりの解決策が紹介されていました……_
:::プリザンターでは、添付ファイルのハイパーリンクをクリックするとファイルがダウンロードされますが、次の記事で紹介されている通り、ハイパーリンクの左横に表示されている虫眼鏡アイコンをクリックすると、ダウンロードではなくブラウザーで添付ファイルの内容を表示することができます。
https://qiita.com/hmine-implem/items/3603bee4773ac5509bd9#1%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3
Vueで始めるi18n対応
# はじめに
Vueを用いてサイトを作っていると、多言語対応が必要となるシーンや多言語対応をやりたくなってしまうことがよくあります。そんなときに使える手法を備忘録として残しておきます。
# 実装方法
vue.jsアプリケーションを多言語対応する上で最もよく使われているであろうvue-i18nというパッケージを用いて進めていきます。## vue-i18nの導入
[公式のガイド](https://kazupon.github.io/vue-i18n/installation.html#compatibility-note)に従ってパッケージを追加します。“`bash
npm install vue-i18n
“`## 言語別のjsonを用意する
切り替えたい言語に応じた言語別のjsonファイルを用意します。まず`./src`配下にi18nディレクトリを作成して、
“`bash
mkdir ./src/i18n
“`言語別にjsonファイルを作成します。
“`json:./src/i18n/ja.json
{
“message”: {
“
【Vite x React】学習記録アプリ作成からデプロイ・テストまでを実施
# はじめに
ViteとReactを使用して、簡単アプリを作成しました。# 作成したアプリ
### 概要
学習した時間や学習した内容を簡単に記録できるアプリ
### 使用言語
React, Javascript
### DB
Supabase
### テスト
Jest
React Testing Library
### その他
FireBase
Github
## 実装機能
学習内容と学習時間を入力できます
入力した内容を同時反映して確認ができます
` 形式だとオプショナルチェーン（`data?.method()`）が無いので、ユーティリティを用意しよう
オプショナルチェーンって、便利ですよね？
“`tsx
publishedAt?.toDateString();
“`「publishedAt を `toDateString()` で文字列に変換する。ただし、publishedAt が nullable（undefined / null の可能性あり）である。」
のように、`data.method()` 形式の、変換するタイプの処理で変換元が nullable のときに、コードを短く簡潔にできるので便利ですよね？
ただ、JavaScript には、 `f(data)` を同様にシンプルにするような機能がありません。
—
以下のコードを見てみましょう。
“`tsx
import type { FC } from “react”;import { pipe } from “remeda”;
type Props = {
slug: string;
title: string;
publishedAt: Date | undefined;
};const dateTimeFormat = new
スプレッド構文について
スプレッド構文とは
– 配列の値を展開する
– 引数を配列として取得するを行うことができる。
今回は展開するパターンの例
“`js
const a = [1,2,3,4,5]
const max = Math.max(…a)
console.log(max)
“`Math.maxメソッドは複数の値から最大を返すメソッド。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max
一つ一つ設定すると大変なので、配列を…で展開するのがスマート
