ハンバーガーメニューの動きについて

# はじめに
今回は、[前回](https://qiita.com/uukasuzuki_/items/6ca5e902467d0cc93277)制作したコードを用いて、ハンバーガーメニューの動きパターンを２つ考えてみました。

# くるっと回転するハンバーガーメニュー

See the Pen 要素が表示されているか親／祖先要素の状態も含めて jqueryの is(“:visible”) をノーマルjsだけでサクっと判定する

jQueryでは、[is(“:visible”)](https://api.jquery.com/visible-selector/) で要素の表示状態が簡単に取れていた。親要素を辿って表示状態を見て１つでも非表示であれば子孫も見えないと判断してくれたのに、脱jQueryしたことで途端にparentElement追う面倒くさい再帰ロジックを書く羽目になっていた。

[getBoundingClientRect()](https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect) や [IntersectionObserver()](https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver) などは、今の画面上の可視領域上での要素の表示判定なので目的に適ってない。

結論から言うと調べ方が足りんかった。というか新機能のアップデート[^1]をウォッチしてなくて自分の脳みそもアップデートしていないだけだった。

んで、ついさっき

【Javascript】Symbol型について図解を用いて解説する

# はじめに

先日、動画にてJavascriptの勉強をしている中で、見慣れない型を見つけました。それが**Symbol**という型になります。
そもそもSymbolって何なのか？どういった場面で使えるのか？といったことについて気になったので、今回はSymbol値についてアウトプットしていこうと思います。

# Symbol型とは？

Symbol型は、文字列型(String型)や整数型(Int型)などが含まれるpremitive値の一種になります。そこで、String型との違いや実装方法、利点について下記で説明します。

### 全体観

String型とSymbol型の違いは下記のようになります。

上図のように、同じ値同士で比較する場合、String型は「true」になるのに対して、Symbol型は「false」に

新生児の一回分の哺乳量を計算するJavaScriptPGM

新生児の一回分の哺乳量を計算するJavaScriptPGM

サンプルサイト: https://nanjomiyako2.github.io/CalcMilk/

githubURL:https://github.com/NanjoMiyako2/CalcMilk

銀河の中心にブラックホールを置き、その周りを多数のカラフルなパーティクルが回るゲーム。



### 画面左上にブラックホールを置き、その周りを多数のカラフルなパーティクルが回るゲームです。
スペースキーを押すとゲームが始まります。

“`python
import http.server
import socketserver
import tempfile
import webbrowser

html_content = “””

CodeMirror6を用いたHTMLエディターの導入

## 概要
Ruby on Railsをベースとしたアプリ制作時に、Codemirror6の導入で苦戦したため、導入方法をまとめました。

Codemirror6は公式マニュアルに`Getting Started`のセクションが無く、どこを見たらいいのか分からないので、初心者にはかなりとっつきにくい文献という印象でした。

結論として、以下の`Bundling Example`のセクションを見ながら進める事でEditor構築することが出来たので、こちらの流れに沿って説明します。

https://codemirror.net/examples/bundle/

また、今回の説明ではRuby on Railsを使用していますが、Codemirrorの実装は基本Javascriptしか触ってないので、本記事を読むために必要知識はJavascript（+ Node.js）となります。

## エディターの導入
### 1. CodeMirror＆HTMLパッケージのインストール
公式文書ではJavascript用エディターを導入していますが、今回私はHTML用エディターを実装したいので、H

GA4の導入をGitHub Pagesで試してみる【Google Analytics4】

# はじめに

Google Analytics 4 (GA4)はwebサイトのログの分析に使えるツールだ。
Googleから提供されており、無料で使える。
試しにGA4使ってみたいなーと思ったものの、自分は本格的なwebサイトなんて持ってないことに気づいた。

そこでGitHub Pagesを使って簡易的なWebサイトを作ってそこにさくっとGA4の導入をしてみよう。
本当は収益を得られる自分のサイトを用意してから導入する方がよさそうだが、今回はまずGA4の導入方法を掴んで、具体的なビジネスモデルなどは後々考えよう。

# GitHub Pagesの設定

Webサイトを作る方法はいろいろあるが、エンジニアであればGitHubの機能であるGitHub Pagesを使うのが簡単だ。

以下の説明を見ながらまずは土台となるWebページを作ろう。

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

アカウントはすでにあるものとして、適当なリポジトリを

Alpine.jsについて

## はじめに

こんにちは、@yuki_itoiです。
最近転職をしたのですがフルリモートワークで作業をしており、運動不足に悩まされそうな予感がしています。
案件に参加してAlpine.jsというフレームワークで書かれたソースを初めて見ることになり、勉強がてら記録に残したいと思います。

## 基本概念

Alpine.jsは、2019年12月にCaleb Porzio氏によって公開されました。
公式ドキュメント
https://alpinejs.dev/
>Alpine is a collection of 15 attributes, 6 properties, and 2 methods.

15の属性、6のプロパティ、そして2つのメソッドとのことです。
Vue.jsやReactと比較してとてもコンパクトな印象を受けました。
学習曲線も穏やかそうですね。
また、Vue.jsに似たディレクティブシステムを採用しており、`x-data`、`x-bind`、`x-on`などのディレクティブを使用してHTMLに動的な振る舞いを追加します。
Vue.jsを使うまでもないけど何かJSのフレ

Dog APIでAPIの呼び出し練習をする

APIっていうのがあるやん。なんなんあれ。どうやって使えばいいんや。

①フェッチというやり方でリクエスト？をAPIに送る
②リクエストに応じてレスポンスが返ってくる
③レスポンスの内容をなんか解析する
④解析できたものから情報を取り出す
⑤取り出した情報をHTMLに埋め込む

っていう動作をすれば
どこに画像のurlがあるのか、とか気にせずに情報を取ってくることができるらしいわ！

試しにDog APIを用いて練習してみようやないか。
次のコードでは毎回違う犬の画像がランダムで表示されるんや。
“`html

ランダムに犬の画像が表示されます

“`

“`javascri

配列（Array()オブジェクト）の基礎知識

## アジェンダ
配列は `Array()` オブジェクトを使用して作成され、様々なプロパティやメソッドを提供します。
この記事では、`Array()` オブジェクトの基礎から配列操作の詳細まで簡単にまとめます。

## `Array()` オブジェクトの基礎

`Array()` は JavaScript の組み込みオブジェクトの一つで、複数の要素を格納するために使用されます。配列は、整数のインデックスを持つリスト状のデータ構造で、各要素にアクセスして操作することができます。

“`javascript
// 配列の作成
let arr = new Array(1, 2, 3, 4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
“`

## `Array()` コンストラクタの使用方法

`Array()` コンストラクタは、以下のように様々なパラメータを受け取ります。

– **指定した要素で配列を作成**: 複数の要素をパラメータとして渡し、それらの要素を持つ配列を生成します。

“`javascript
let arr = new A

画像を和色のみの構成に変換する html を公開してみる

画像を和色のみにした場合に
どんな見た目になるかどうかを
軽くチェックするための html を
作成しましたので
皆さんの役に立てばと思い
公開してみようと思います。

[本体はこちら(BOOTH)](https://giftedstyle.booth.pm/items/6002643)
[本体はこちら(Google Drive)](https://drive.google.com/file/d/1MReoq0hTMXFdpS28ha2z-vklwN1-l_3w/view?usp=sharing)

[洋色バージョンはこちら](https://drive.google.com/file/d/1j606X7SGYo3SqLfla0iqvL1NouyvDL4Y/view?usp=sharing)
[セーフカラーバージョンはこちら](https://drive.google.com/file/d/1B9ov__zccNbMertMr1yUYAQPh_fOheto/view?usp=sharing)

***

このアプリケーションの見た目
![image2.png](https://qiit

React初心者から始めるReactチュートリアル

## はじめに

Reactは、ユーザーインターフェースを構築するための強力なJavaScriptライブラリです。このチュートリアルでは、Reactの基礎から応用まで、段階的に学んでいきます。

## 第1章: Reactの基本概念

Reactの主要な概念であるコンポーネント、props、stateについて説明します。

“`jsx
function Welcome(props) {
return

こんにちは、{props.name}さん

;
}
“`

コンポーネントはReactアプリケーションの基本的な構成要素です。propsを通じてデータを受け取り、UIの一部をレンダリングします。

## 第2章: 開発環境のセットアップ

Node.js、npm、Create React Appを使用して、Reactプロジェクトを始める方法を学びます。

“`bash
npx create-react-app my-app
cd my-app
npm start
“`

これらのコマンドで新しいReactプロジェクトを作成し、開発サーバーを起動できます。

#

【Publisher】Spreadsheet with Chart

# Introduction #
This time, I will convert an Excel report with charts into a web-based spreadsheet. Here is how the converted spreadsheet looks:
Now, let’s review the steps.
[Related Article](https://qiita.com/Miki_Yokohata/items/51c6d0c48e3ff172a3ac)
# Excel Worksheet #
I created three tables using Sharperlight table formulas with SAP Business One. The first table is defin

Automating Calendar Event Notifications with Google Apps Script and Slack: A Step-by-Step Guide

Google Calendar and Slack are indispensable tools for managing schedules and team communications. By integrating these two, you can automate sending notifications about calendar events to a Slack channel, ensuring everyone stays informed. This article will guide you through creating a Calendar Events Notification App using Google Apps Script and Slack.

## Table of Contents

1. **Introduction**
2. **Setting Up Your Environment**
– Required Tools and Accounts
– Obtain the Group Calendar ID

Google Apps ScriptとSlackでカレンダーイベント通知を自動化する方法の紹介

Google CalendarとSlackは、スケジュール管理やチームコミュニケーションに欠かせないツールです。この二つを統合することで、Slackチャンネルにカレンダーイベントの通知を自動化し、全員が最新情報を把握できるようにすることができます。本記事では、Google Apps ScriptとSlackを使用してカレンダーイベント通知アプリを作成する方法を紹介します。

## 目次

2. **環境設定**
– 必要なツールとアカウント
– グループカレンダーIDの取得
– Slack Webhookの作成
3. **Google Apps Scriptプロジェクトとスクリプトの作成**
– スクリプトの記述
– Slack通知機能の実装
– 毎日のイベント通知
– 新規・更新イベントの確認・投稿
– デバッグ用ボーナス機能
4. **Apps Scriptのトリガー設定**
– 毎日のイベント通知トリガー
– カレンダー更新時のトリガー
5. **結論**
– リソース

## 環境の設定
### 必要なツールとア

【いらすとや図解】はじめてのレンダリング

# この記事に関して
ブラウザのレンダリングについて書いていきます。
細かい仕様とかは抜きにしてざっくり概要を書いていきますのでわかりやすくなっているかなと思います。
ブラウザのレンダリングから、具体的な問題への対処法、将来を見越した設計の基本などを今後書いていく予定です。
この記事は下記の本をベースとして書いています

https://gihyo.jp/book/2017/978-4-7741-8967-3

# この記事の対象者
– レンダリングってなんですか？という方
– フロントエンドのパフォーマンスになんとなく意識(興味)を持った方

# この記事で取り扱わないこと
– React.jsやVue.jsといったフレームワーク特有のレンダリング
– 細かい仕様等に関して(わかりやすさを重視しているため)

# 関連記事
(準備中)

# レンダリングの流れに関して
ブラウザにURLを打ち込んでから、ウェブページが表示されるまでにどういった超ざっくり説明すると以下の4つの工程になります。これがレンダリングと呼ばれるものです

– Loading(リソースの読み込み)
– Scrip

RustとWebAssemblyでドット絵フィルター作ってみた_修正版

# はじめに

下記で作ったドット絵フィルターを友人に見せたところ

友人「解像度低い映像になっただけやん。。。😑」

と言われたのでリベンジも含めて修正版を投稿します。

https://qiita.com/shisojuice/items/7142c594afd6bdc79b13

前回の成果物のフィルター


# プロジェクトの作成

前回作成したドット絵フィルターが微妙な理由は、

色合いがドット絵調ではなかったことがあげられる。😑

なので今回は、色をなるべくドット絵調に近づけてみる。

そもそもドット絵の色って何だろうと思い調べたところ、

下記のようなファミコンカラーパレット(ファミコン52色)と呼ばれる色があるみたいなので

これをベースに色を変更してみる

ファミ

【GDevelop】数字をカンマ区切り（の文字列？）にする

# はじめに
絶対に公式関数でありそうな気がする、数字のカンマ区切り。

調べても調べても自作拡張機能とかの話ばかりで、なんかスッキリしないのでJavaScriptでの記述を探しました。

ChatGPTのある時代で良かった。

# 答え

右クリック「追加」「JavaScript」から。

条件の無いとこで大丈夫でした。

（画像）

「JavaScriptに渡すオブジェクトを選択して下さい」は無視して良いっぽいですね。

（ソースコード）
“`javascript
// カンマ区切りにする関数
function formatNumberWithCommas(x) {
if (x < 10000) { // 10000未満なら小数点以下1位まで表示 return x.toFixed(1).replace

ESLintをeslintrcからFlat Configに移行する際の最新手順 (2024年8月版)

## 記事を書くことにしたきっかけ

ESLintの設定ファイルのフォーマットが別物に変わろうとしています。
現在は過渡期となっており、ネットで調べていると古い情報もありました。

自分が移行した際にハマったポイントや、最初から知っておけたらよかったと思ったポイントをこの記事にまとめてみます。

## この記事を読む際の注意事項

状況は日々アップデートされています。
この記事の情報は古くなっていくと予想されますので、最終更新日と他の情報を照らし合わせながら読んでください。
(気が付いたら最新情報に更新していきたいと思っていますが、どうしても遅延はあると思います)

## 動作確認で使用したバージョン

– ESLint 9.9.0

## ESLintの設定ファイルのフォーマット

### これまで (ESLitnt 8系以前)

– 設定ファイル名: `.eslintrc.js` `.eslintrc.json` `.eslintrc.yml`
– 設定フォーマット名: `eslintrc`
– 呼び方: “eslintrc”や”Legacy”と呼ばれることが多い
– 公式ドキュメ

1, 2, 3 発射。ロケット打ち上げゲーム。



### スペースキーを押すと発射。ロケット打ち上げゲーム。

“`python
import http.server
import socketserver
import tempfile
import webbrowser

html_content = “””