JavaScript関連のことを調べてみた

DOMイベント入門 [JavaScript]

DOMの中でも、DOMイベントについてまとめていきたいと思います。

イベントを使うことで、

・ユーザーがクリックしたとき
・ホバーしたとき
・ドラックしたとき
・サブミットしたときなどに特定の処理を行えるようになります。

つまり、

:::note info
**ユーザーが行ったアクションに対して反応する**
ために欠かせないのが、DOMイベントになります。
:::
DOMイベント自体は大量に種類があるので、
今回はDOMイベントの書き方に絞ってまとめていこうと思います。

## 目次：

– [1. イベントの書き方(インラインイベント)](#1-イベントの書き方インラインイベント)
– [2.イベントの書き方(JavaScriptファイルから定義する)](#2-イベントの書き方javascriptファイルから定義する)
– [3. イベントの書き方(addEventListenerを使った書き方)](#3-addeventlistenerを使った書き方)

## 1. イベントの書き方(インラインイベント)

イベントを書く方法は主に３種類あります。
それぞれ説明していきます

【Figma Plugins】ユーザー間で同期したくないデータを保存する

## はじめに

FigmaのPluginを開発する際、ユーザー間で同期さたくないデータを保存したいなと思ったことはありますか？
そんな時に使うのが、「**figma.clientStorage API**」です。

この記事では、「**figma.clientStorage API**」について解説しようと思います。

## figma.clientStorage API とは？
**figma.clientStorage API** は、データをユーザーのローカルマシンに保存できます。
ドキュメントに保存されるデータ（[`setPluginData`](https://www.figma.com/plugin-docs/api/properties/nodes-setplugindata/)）とは異なり、ユーザー間で同期されないのが特徴です。

`Window

Qiita予約投稿機能を作ってみた

エンジニアとして働いていると度々お世話になるQiita記事。その有難さには頭が上がりませんが、私のエンジニア歴も1年に達しQiitaの投稿を少しずつ始めた中で一つだけ不満がありました。
**Qiitaにはなぜ予約投稿機能がないのだろうか？**
…ということで、JavaScriptの練習をかねてQiitaの予約投稿機能をChrome拡張で作ってみました。

## 使い方

https://chromewebstore.google.com/detail/qiita%E4%BA%88%E7%B4%84%E6%8A%95%E7%A8%BF/fdlailgogjlojolaiehgpkhbcikjgdeh?hl=ja&utm_source=ext_sidebar

1.上記リンクより拡張機能を追加してください。
2.拡張機能を有効にすると、Qiita記事編集ページに予約投稿ボタンが現れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519892/4c48bc78-a002-0450-

【個人開発】公式サイトのマンガ更新情報を検索機能付きで作ってみた

## 公式マンガ検索サイト「まんさく！」をリリースしました。

https://search-manga.com
### 開発経緯
友人と話している際にジャンプやマガジンなど公式で公開されている漫画が一覧になってるサイトあったらいいよねーという話になり、更新作品がまとまって検索機能なんかもあったら需要あるんじゃね？と思い開発を始めました。
## システム
### 主に使用した技術スタック
– NextJS
– TypeScript
– Shadcn/ui
– Supabase
–

iframeの反乱

# はじめに
私の参画している現場の使用でiframeを通して、別ドメインのwebアプリを開きlocalstrageからとあるデータを取得する必要があり、実装を黙々と進めていました。
その時に私がiframeからお叱りを受けたので、そちらを備忘用として記しておきます。

# TL;DR
iframeから別ドメインのlocalstorageにはアクセスできない

# 概要
Aシステム、Bシステムという2つのシステムがあり、とある機能を実装するためAからBの画面をiframeで呼び出す必要がありました。iframeからBのlocalstorageにアクセスし、必要な情報を取得してAに渡すという魂胆です。

“`js
function sendDataToParent() {
// Bシステムから

JavaScript: 重みつきSplay木による圧縮

1991年4月頃にPhilip G. Gageが考案(作者はこの手法をAdaptive Huffman frequency compressionと呼称)。木の変形法はsplay符号風ですが、節点に重みを加えることで適応型huffman符号並みに均衡がとれた木となります。符号長の変化が素早いため情報の変化に追随しやすいです。いい事ずくめで人気を独占しそうですが、多分 DDJ Data Compression Contest(1991年)以外での使用例はないでしょう。
## 実装
そんな前置きはどうでもいいかもしれないので、本題にすり替えていきます。何はともあれ、木を表すobjectの定義から。
“`js
// 配列もどき
function Hit(){}//頻度
function Up(){}//親節

/*
重みつきsplay木
@max: 重み最大値
@up: 加重値
@cs: 記号の最大値
*/
function Tree(max,up,cs){
this.F=new Hit;
this.U=new Up;
this.inc=up||1;
this.max=max||1

【環境構築】TypeScript, Node.js

## 環境
以下の環境で構築していきました。
・macos Sonoma
・MacBook Air M1

## 前置き
今回 TypeScriptの学習をする機会があったのでその備忘。
これから環境構築をしようと考えている方々に、方法を共有しようと思い書きました。

### はじめに
#### Homebrew
まず、Homebrewのインストールを行いましょう。
以下のリンクからインストールが行えます。

https://brew.sh/

パスワードやエンターを求められるので、都度入力しましょう。
インストールが完了したか、以下のコマンドで確認してください。バージョンが表示されれば完了しています。
“`
brew –version
“`

### Node環境の構築
TypeScriptを使用するためにはNode.js環境が必要です。Node.jsはTypeScriptコンパイラを実行するために必要となってきます。
以下の手順で環境を構築しましょう。[構築済みの方は次へ進んでください](#TypeScriptの環境構築)

まず、　.zshrcファイルがあるか確認し

kintone レコードに投稿されたコメントをslack通知する

## はじめに
kintoneでレコードに対してコメントをすると、kintone上では通知が来ます。コメント内容をslackの特定チャンネルに通知する方法を試しました。

## どのような背景があって作成したのか？
コミュニケーションツールにはslack、CRMにはkintoneを使用しています。
kintoneレコードのコメントに投稿される内容に意外と重要なものが多く、これまではコメントをした人しか内容を把握しておらず他メンバーは検知にムラがありました。情報格差が起きないよう、チームメンバーが見ることのできるslackチャンネルに通知し即確認できるようにしました。

## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

“`javascript:test.js
(function() {
‘use strict’;

var triggerEvents = [
// レコード詳細画面を表示し

kintone 特定ステータスで別アプリにレコードを新規作成する

## はじめに
kintoneアプリ①でレコードが特定条件を満たした際に、kintone REST APIを使用してアプリ②にレコードを新規登録する方法を試しました。
新規登録する際には、アプリ①のレコード情報を引き継ぐように作成しています。

## どのような背景があって作成したのか？
営業案件が受注した場合に、契約情報を管理するアプリに営業情報を手動登録しており、その作業の抜け漏れ防止を目的として自動起票させました。

## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

“`javascript:test.js
(function() {
‘use strict’;

var triggerEvents = [
// // レコード詳細画面で、プロセス管理のアクションが実行された時
“app.record.detail.process.proceed”
];

kintone.

useEffectについて知る

## はじめに
useMemoを記事にして、自分の中でhooksについて再確認しようということで今回はuseEffectについて記事を書いていこうと思います。
未熟な身ですが、一生懸命わかりやすい文章を残せるよう努力いたしますので、お暇なとき一瞥していただければ幸いに思います。
また記事内で間違えた記述や誤植があればご指摘いただけると嬉しく思います。

## useEffectとは
React公式ドキュメントによると
「 useEffect is a React Hook that lets you synchronize a component with an external system. 」
と記述されています。
意訳すると「コンポーネントと外部のシステムを同期させるために用いる。」とのことです。

データの取得やDOM操作、タイマー設定などレンダリングに関係しない副作用を実行するために用います。

### 特徴
“`js
useEffect(setup, dependencies?)
“`
第一引数には実行したい処理、第二引数には依存させたい値を入れておきます。
####

【備忘】window.location.reload() を使用したことで想定外の処理順となった

\
こんにちは新人エンジニアの三上と申します。
Vue.js を使用した実装の際に、思いがけず詰まってしまったことを備忘として残しておきたいと思います。

## window.location.reload() について
window.location.reload() を呼び出すことで、現在のページのURL を再読み込みすることが出来ます。
これに合わせて、ページ読み込みの際の処理を追加することで、ファイルを分けることなくページ内要素を更新することが出来ます。

では、実際にwindow.location.reload()を利用した実装を以下に例示しようと思います。

~~~Vue.js