MapLibre GL JSで魔法陣を出現させる

:::note info
これは [MIERUNE AdventCalendar 2022](https://qiita.com/advent-calendar/2022/mierune)　18日目の記事です。
昨日は @Kanahiro さんによる [THREE.jsでGPGPUにより頂点を操作しパーティクルをアニメーションする](https://qiita.com/Kanahiro/items/8927619c64831972c1d2) でした。
:::

↓こんな感じにMaplibre GL JSで地図上に魔法陣が出現する演出を作りたいと思います。

育児に「ぴよログ」使ったのでログファイルをJavaScriptで扱いやすくしてみた

https://qiita.com/advent-calendar/2022/iotlt

アドベントカレンダー2022IoTLTの17日目です！

[IoTLT](https://iotlt.connpass.com/)は登壇したことありましたが、最近は全然ですね…

アドベントカレンダーを参加をきっかけにまた登壇目指したい！

## ぴよログとは

https://www.piyolog.com/

育児に便利なログアプリ

自分が一番便利だなってものが、ミルクを飲ませた時間のログですね

嫁さんが夜中あげててくれて、朝方自分が起きてミルクあげようとしたとき、何時間前にあげたのかとか、寝ている嫁さんをいちいち起こさなくていいのがすごくいいです

### ログの出力


公式ではPDFで出力可能とありますが、

![](https://storage.googleapis.com/zenn-user-upload/54aadae

について

# はじめに

SvelteKitにはいくつか特殊なHTML要素が用意されています。
今回はその中でも`` `` ``に焦点をあてて解説したいと思います。

# ``

``タグに`on:click`などのイベントリスナーを追加できるように、
`window`に対してもイベントリスナーを追加することができます。

例えば`keydown`リスナーを追加し、押したkeyを表示してみます。

“`vue:+page.svelte

key = event.key}>

あなたが押したのは { key } ですね！

“`

![window.gif](https://qiita-image-store.s3.ap-northeast-1.amazo

リーダブルコードを読んで過去書いたコードを振り返る(表面上の改善編)

本記事は、[ハンズラボ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/handslab) 18日目の記事です。

# はじめに
断捨離していたら新卒の時に購入した[リーダブルコード](https://amzn.asia/d/0Oz7MMh)を見つけたので読んでみました。
本記事では、リーダブルコード第1部「表面上の改善」の内容を自分の解釈を踏まえて、過去に書いたコードや読んだコードを振り返ります。
# 本題
## 理解しやすいコード
以下は、三項演算子を入れ子で使っているパターンです。
ワンライナーで書かれていてとてもトリッキーなことをしているように見えます。
このコードを最初見た時、意味がわかりませんでした。

“`js
this.isDirty ? this.validFunc ? this.validFunc(this.modelValue) : this.errMessage ? false : true : null;
“`
三項演算子はかっこいいし便利ですが以下の書き方の方が読みやすいと思いま

pureなjsでGraphQLのrequestを投げる方法（Lambda@Edgeなど）

Lambda@EdgeからとあるエンドポイントにGraphQLのqueryを実行したい場合がありました。
Lambda@Edgeにはレイヤーをアタッチすることができないので、Lambdaのランタイムに組み込まれている方法でhttpリクエストを飛ばす必要があります。
（正確にはコードとライブラリをまとめたzipが1MB以下に収まるのであれば、そのzipをデプロイすることでサードパーティのNodeライブラリも利用することができるようになりますが、実装時点では調査が足らず不可能だと思っていました。詳しくは下のリンクをご参照ください。）

https://aws.amazon.com/jp/blogs/networking-and-content-delivery/leveraging-external-data-in-lambdaedge/#:~:text=Include%20your%20data%20in%20your%20function%20deployment%20package

今回はとある事情から、ランタイムとして`Node.js`のv16系を利用していました。
Nodeのh

[Day18] ジェネレータ, 高度なイテレーション

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 12.1 ジェネレータ
### 知らない単語
– データストリームとは
　　　　　- データの入出力の経路や入力・出力それぞれにおけるデータの流れそのもの

### 学んだこと
ジェネレータは、要求に応じて複数の値、または無限の数の値を返すことができる

– ジェネレータ関数

ジェネレータを作成するには、特別な「function*」、ジェネレータ関数を使用する必要がある
“`javascript
function* generateSequence() {

YouTubeAPIでコメントからタイムスタンプを取得してみた

# はじめに
この記事は[N/S高等学校 Advent Calendar 2022 ](https://qiita.com/advent-calendar/2022/n-s-highschool)18日目の記事です。

https://qiita.com/advent-calendar/2022/n-s-highschool

Vtuberなどの歌枠アーカイブを見ていると、「あの曲どの配信で歌ってたっけ…」となる時ありますよね。
そんな時にそのVtuberが歌った歌を一覧で表示出来ると便利だな、と思い作ってみました。
今回は、VERSEⁿ所属のアルバ・セラさんの歌枠配信からタイムスタンプを取得してみます。

https://www.youtube.com/@albasera2426

格好いい曲も可愛らしい曲も歌いこなす、おすすめのVsingerです。

# 作ったもの
先にコード全体を貼っておきます。
“`javascript:comment.js
var apikey = ‘APIキー’;
import fetch from ‘node-fetch’;
var list =

Deno入門[テスト編]

この記事は筆者の[ソロ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/panda) 18日目の記事です。

Denoの公式ドキュメントの内容を実際に動かしてみてDenoに入門してみたのでその備忘録の続きです。Deno入門の最後はテストコードを書いていきたいと思います。

[Deno入門[インストール、環境構築、ファイル実行、標準ライブラリ]](https://qiita.com/JY8752/items/9cd6c05394bf955bdd75)
[Deno入門[CLIコマンド、モジュール、環境変数、Webフレームワーク]](https://qiita.com/JY8752/items/a00866917626a8719ebb)
[Deno入門[npmモジュールの使用]](https://qiita.com/JY8752/private/d177e176a7544b693a34)
[Deno入門[prisma + oakで作るAPI]](https://qiita.com/JY8752/private/1987

ReactHooksについてまとめる（Effect Hooks）

# 概要
Effect Hooksを使用することで、関数コンポーネント内で副作用を実行することができるようになります。
副作用とは、データ取得や更新、コンポーネント内のDOMの変更といったものが当てはまり、「関数の外に影響してしまうもの」です。

> Effectsは、Reactパラダイムからの「逃げ道」なので、外部システムとやり取りがない場合は必要ないかもしれません。

## useEffect

useEffectを使用した例
“`jsx
import { useEffect } from ‘react’;
import { createConnection } from ‘./chat.js’;

function ChatRoom({ roomId }) {
const [serverUrl, setServerUrl] = useState(‘https://localhost:1234’);

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
conn

Web上でSSL証明書を発行【Certbot】

コマンドしなくてもレッツ円栗プトで発行できるようにしてみました。

See the Pen
Untitled by John Doe (@04)
on CodePen.