サロゲートペアでWindows10でサポートしない絵文字を表示する

## はじめに

普段はMac環境で開発をしているため、Windows環境について考えることがあまりない。しかし最近、Windows 10で特定の絵文字が正しく表示されない問題があることに気づいた。
色々調べて、ユニコードに「サロゲートペア」という概念があり、このサロゲートペアを用いることで問題を解決できたため、記事として残してみた。

## サロゲートペアとは

サロゲートペア(Surrogate Pair)は、直訳するとSurrogate(代理)のペアである。

### 何が代理？

これはUTF-16エンコーディングで使用される概念で、1つの文字を表現するために2つの16ビットコードユニットを使用する方法である。

例えば以下の地球の絵文字は一文字に見えるが、実際は長さ2の文字になっている。

“`js
const emoji = “🌍”;
console.log(emoji.length); // 出力: 2
“`

### なぜ必要？

Unicodeは世界中のすべての文字を表現するために作られたけど、当初は16ビット（65,536文字）で十分だと考えられていた。

しか

農業・食品系のサイトを参考にヘッダーデザインを考える

# はじめに
今回は、農業・食品系のサイトでよく使われる動きとデザインについて考えていきます。

# 参考サイト
– 食べて笑顔になる 土肥農園
https://www.dosuika.com/index.html

– 食菜卵(しょくさいらん)-たまごの八千代ポートリー
https://www.yachiyo-egg.com/

# 農業・食品系のヘッダーラフ案
農業や食品では、アイコンやアニメーションを使って視覚的に楽しそうなイメージを作り上げるサイトが多い印象です。パッと見て「楽しそう」と感じると、その後の誘導がしやすくなるなと考えました。**視覚的に見て使いやすいヘッダー作り**をモットーにして制作していきます。

## ①真ん中ロゴとアイコン付きヘッダー

### 全体のコード一覧

七五三とクリスマスは祝日ではない

# 七五三とクリスマスが祝日になった
Googleカレンダーにて七五三とクリスマスが祝日になっていました。

これはGoogleの仕様変更によるもので、「日本の祝日」カレンダーの設定で「祝日のみ」を選択すれば変わります。

以下の投稿が参考になりました。ありがとうございます！

https://x.com/tkiyama/status/1830149754657128464

# JSライブラリ「date-holidays」も影響ある
世界の祝日が取得できるdate-holidaysも同様の動きをしており、

Reactについて学んだことをまとめる

以下のUdemyの講座を受講したので、Reactについて学んだ事をまとめる。

https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=KEEPLEARNING

## Reactの要素

### JSX(JavaScript XML)記法
ReactはJSX記法を用いてコードを記述する。
JavaScriptの中にHTMLのような形でコードを書くことができる。
“`jsx
import { StrictMode } from ‘react’;
import { createRoot } from ‘react-dom/client’;

const rootElement = document.getElementById(‘root’);
const root = createRoot(rootElement);

const AppHoge = () => {
return (
<>

Hello!

);
};

root.render(

26卒 エンジニア就活 アウトプット

# この記事について

この記事は、思考の整理と理解を深めることを目的に、これまでインターンやハッカソンで習得してきた技術についてまとめたものです。

以降、何か新しい技術を学んだときや体験談を書こうと思ったときには、随時追加していきたいと思います。

## 開発履歴

### 個人開発
[所属ゼミのホームページを作った時の話（ポートフォリオ）](http://qiita.com)

– Reactコンポーネント
– Chakra UI
– Bootstrap
– ナビゲーションバー
– ハンバーガーメニュー（レスポンシブ対応）
– Swiper（スライダー）
– グリッドレイアウト

### チーム開発

[ニフティ株式会社の5daysインターンで「プロバイダ比較サイト」を開発した話](http://qiita.com)

– Seeder（DBマイグレーション＆シーディング）
– flask-mail（メール通知機能）
–

ネット記事を大量に読む人のためのRAC（アールエーシー）

## はじめに

RAC（アールエーシー）の実践としてネット記事を読みやすくするブックマークレットを作りました。

最初に、RAC（アールエーシー）とは何かについて説明します。次に、作ったブックマークレットについて説明します。

## 本記事の対象者

– RAC（アールエーシー）とは何かを知りたい人。
– 大量のネット記事を効率的に読みたい人。

## RAC（アールエーシー）とは何か

RAC（アールエーシー）とは、コンピュータープログラムであるJavaScriptがウェブページの記述であるHTML構造やCSS構造を書き換えることによって、人がネット記事を読む行為を補助する機械であり、正式名称は読式補助演算機（Reading Assistant Computer）です。

ネット記事を読む行為自体にRAC（アールエーシー）は不要だが、RAC（アールエーシー）抜きでは読むスピードが低下してしまうため、実質的にはネット記事を大量に読む人にとって必要不可欠なツールです。

ブラウザの標準機能であるブックマークレットやブラウザ拡張機能であるTampermonkeyやStylus、およびそれ

suffix（サフィックス）の活用で、SVGアニメーションにレスポンシブに対応する

SVGアニメーションは、ウェブサイトに動きと魅力を加える素晴らしい方法です。しかし、異なる画面サイズに対応するレスポンシブデザインでは、SVGアニメーションの実装が難しくなることがあります。今回は、「suffix（サフィックス）」を使って、レスポンシブなSVGアニメーションを簡単に実現する方法を紹介します。

## suffixとは？

suffixとは、単語や文字列の末尾に付け加える部分のことです。今回のコンテキストでは、モバイル用のSVG要素のIDに付ける「_sp」という文字列がsuffixになります。

## レスポンシブSVGアニメーションの基本戦略

1. デスクトップ用とモバイル用に異なるSVGを用意する
2. 画面サイズに応じて適切なSVGを表示する
3. JavaScriptでアニメーションを制御する際、suffixを使って適切な要素を選択する

## コードの実装

まず、HTMLの構造を見てみましょう：

“`html

PrettierのPre-commit Hookを入れる正しいやり方

# 1. 概要

フォーマットが不正のソースコードをgitブランチに混入しないよう、PrettierのPre-commit Hookを使ってコミットする前に自動的にフォーマットを行いたい。

色んなweb記事やオフィシャルサイトに古い情報があるため、混乱してしまうが、`2024年10月`現在の正しいやる方をこの記事にまとめる

この記事はprettier設定が終わっていることを前提とする。

# 2. 予備知識

## 2-1. Pre-commit Hookはなに？

gitが色んなhook機能を提供されていて、その中の１つはPre-commitである。名前の通り、コミット前に指定された処理が実行される。

プロジェクト直下の.git/hooksフォルダに色んなhookの雛形があり、ファイル名の`.sample`を消せば使える。

“`ls
applypatch-msg.sample fsmonitor-watchman.sample pre-applypatch.sample pre-merge-commit.sample pre-rebase.sample prepar

javascriptをサイトで実行する

# このページの作者が使うサイトは？
p5.js一択です！
p5.jsだと動きが見られるから、
なにかのアニメーションや図形、ゲームを作る時に使えます！

https://editor.p5js.org/
# 使ってみよう

“`
function setup() {
createCanvas(400, 400);
}

let mouseX_m = 0;
let mouseY_m = 0;
function draw() {
background(220);
rect(mouseX_m, mouseY_m, mouseX-mouseX_m, mouseY-mouseY_m);
mouseX_m = mouseX;
mouseY_m = mouseY;
}
“`

右の薄灰色の背景があるところでマウスを振ったりしてみてください！

このような動きを作れます。
いろいろいじって遊んでみてください！

暗黒 異世界での、FPV ドローン空撮 フライトシュミレータゲーム。




コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行され

JavaScriptで蟻本 データ構造 Union-Find木判定

# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・データ構造のUnion-Find木p94 についてです。

# 問題
“`
以下２つのUnion-Find木を結合せよ

入力：
親:[0,1,1,0,6,1,6,4]
木の深さ:[0,1,1,0,2,1,2,2]

結果
親:[0,6,1,0,6,1,6,4]
木の深さ:[0,1,1,0,2,1,2,2]
“`

## 図示

# コード部分
“`javascript
//
/**
* Union-Find木の根を求める。
* @param par{Array} 各要素のの親
* @param x{Number} 求めたい要素
*/
const find = (par,x) =>{

気を付けてください。あなたは常に、頭上のカメラで監視されてます。頭上のカメラ視点なので車庫入れも安心。


コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

### 気を付けてください。あなたは常に、頭上のカメラで監視されてます。

ウェブカメラへのアクセスを許可すると、ウェブカメラの映像が球体にマッピングされ、カーソルキーで球体の回転を操作できるようになります。
このコードにより、球体の回転をカーソルキーでリアルタイムに操作でき、ウェブカメラの映像が球体の表面に貼り付けられた状態を楽しむことができます。

### 頭上のカメラ視点で描画するコード。

“`html

SpringBootでとりあえず業務アプリを自作してみた ～TOP・ユーザ検索編～

前回までで、作成したアプリをWEBアプリとして公開しました。

その後、少し機能を追加してみたのでまとめます。

トップ画面
—
ユーザの登録機能を作成しました。
最初はログイン画面に設置していましたが
ログイン後の画面に設置しなおしました。

トップページにはまだ何も置いていません。
お知らせ機能とか、カレンダーとか置きたいなと思っていますが
これから徐々に機能を増やしていきたいなと思っています。

前回までの記事でも記載しましたがログイン機能はSpringSecurityを使用しました。

手を動かしてコーディングをするのが数年ぶりなのと
SpringBootでアプリを作成するのが初めてなので
色々探り探りで躓きながらですが作成を進めています。

右上の「山田 太郎」はcontrollerから受け取ったログインユーザの名前が出るようにし

【備忘録】Promise.allの引数をflatMapで作成する

## 背景
“awaite Promise.ALL”と”flatMap”メソッドを用いて、引数に設定した全てのPromseオブジェクトにおける非同期処理のresolveを待つ処理を書くことがあったので備忘録としてまとめます。

## Promise.ALLとは
Promise.ALLは、引数に設定してるPromiseオブジェクトを返す非同期関数の全ての結果がresolveになった際、結果を返すというものです。

### 基本構文
“`javascript:index.js
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results);
})
.catch((error) => {
console.error(error);
});
“`

今回は上記のpromise1, promise2, promise3をflatMapで作成していきます。

## flatMapとは
flatMapとは、mapのような形で、配列をループして新しい配列を組み

数分でスクロールスナップのウェブサイトを作成 – fullPage.js（超簡単！）


もし、モダンで美しいウェブサイトを超速で作りたいなら、fullPage.jsをチェックしてみてください。

fullPage.jsはJavaScriptライブラリで、React、Vue、Angular用のバージョンもあり、わずか数分で全画面のスクロールスナップサイトを作成できます。

[こちらが例です](https://alvarotrigo.com/fullPage/ja/)。でも、それだけじゃありません。すべての機能を知りたいなら、[もっと多くの例](https://alvarotrigo.com/fullPage/examples)もチェックしてみてください。

では、fullPage.jsの使い方を簡単に説明しましょう。

## **何を創るのでしょうか？**

このチュートリアルでは、4つのセクションがあるページを作成します。

3つは全画面で表示さ

if文駆逐計画 〜30代疲れ目エンジニアの条件分岐作法〜

もう長いことコードを書いていると、「ああ、これまたif文か」と思う瞬間、増えてこない？
それ、わかるよ。若かったあの頃はif文で全てが解決できると思ってたんだよね。あの頃はね。

if文は、ロックみたいなもんさ。無骨で力強く、ガシガシとパワーコードを弾いてる感じでパワーコードを書いてた。
だけど、年を重ねてくると、if文もだんだん胃もたれしてきて、「これ、もう少しいい感じに書けないかな？」って思うことが増えてくるんだよ。
今日はそんな30代の疲れ目エンジニアのための話。

—

### 三項演算子、君は僕の愛だ

まず最初に言わせてほしい。僕は三項演算子が好きだ。いや、正確には**愛している**。`?`と`:`が生み出すあの短さと簡潔さ、条件分岐が一行で完結するところが最高なんだ。これだけでコードがぐっとスマートになる。

例えば、こんなコード(SWRのサイトから引用)：

“`jsx
import useSWR from ‘swr’

function Profile() {
const { data, error, isLoading } = useSWR(‘/api/

【React】アプリをDBにつないでみた

# はじめに
以前作成した学習記録アプリを改良し、SupabaseというBaaSと接続して、データを永続化するように実装しました。
今回はその時の手順をまとめたいと思います。

↓前回の記事はこちらです
https://qiita.com/Daisuke_Kikukawa/items/f404a53f4e55b2a8e033

# 制作したアプリ
機能面は変わらないのですが、今回新たにDBに接続しました。
最初は、ローカルでデータを管理していた学習記録アプリを、Supabaseと連携させることで、データを永続的に保存できるようになりました。
これにより、リロードしたりブラウザを閉じても、次回アクセス時にデータが保持されるようになりました。

# 実装手順

## 1.Supabaseのセットアップ
Supabaseの公式ウェブサイト（https://supabase.com） にアクセスし、ダッシュボードから「New Project」をクリックします。
プロジェクトのダッシュボードで「Settings」→「API」を選択し、**Project URL**と**anon public**

Mind Elixir オープンソースの JavaScript マインドマップコア

Mind Elixir

https://github.com/SSShooter/mind-elixir-core

Mind Elixir はオープンソースの JavaScript マインドマップコアです。お好きなフロントエンドフレームワークと一緒に使用できます。

特徴:

– 軽量
– 高性能
– フレームワークに依存しない
– プラグイン可能
– SVG または PNG としてエクスポート
– ドラッグ＆ドロップ/ノード編集プラグイン内蔵
– ノードの要約

【色変記事】約4ヶ月でAtCoder茶から緑になりました！（非職業プログラマー）

## 目次

– [はじめに](#はじめに)
– [自己紹介](#自己紹介)
– [入緑までの振り返り](#入緑までの振り返り)
– [今後の目標](#今後の目標)

:::note info
この記事は7分で読めます。
:::

## はじめに

### この記事の目的
AtCoderという競技プログラミングサイトで緑色のランク（上位16%相当）に到達したので、どのような取り組みをしたのかを紹介します。
[参考）AtCoderのレーティングについて](https://info.atcoder.jp/utilize/jobs/rating-business-impact)

### 対象読者
– AtCoderで色変したい人
– プログラミングが上達したい人

## 自己紹介
– 職業
　- IT系
　- 主に上流工程を担当しており、仕事でコーディングすることはあまりない
　
– AtCoder歴
　- 初参加は2023年7月
　- レート200程度で放置し、2024年4月下旬から再開
　
– 数学やITに関しての背景
　- 東工大（非情報系・非数学系）出身
　- 基本情報技術者取得済

【React My TIPS】めっちゃ多用する演算子「&&」「??」のまとめ

Reactで使わない日はないといっても過言ではない演算子。
忘れないようにメモしておく。

## &&（論理AND演算子）
* 左側が`true`の場合、右側を評価し、結果を返す。
* 左側がfalsy（`false`、`null`、`undefiend`、`0`、`Nan`、`”`など）の場合、右側を評価せずに、左側を返す。
“`react:App.tsx
const Test = () => {
const array = [‘1’, ‘2’, ‘3’]

return (

{array.length > 0 && }

)
}
“`
上記の例は、配列に値が1個以上ある場合にコンポーネントを表示させる処理になっている。
例えば、地図アプリで、地図上でクリックしたデータを配列に格納。データが格納されたら、初期状態では非表示だったArrayPanelコンポーネントを表示し、データを一覧で表示させる…といった処理など、コンポーネントの表示・非表示に活用できる。

## ??（Nullis