JavaScript関連のことを調べてみた2023年10月12日

キャッシュを利用したデータ取得をSWRで簡単に行う

## 今回のゴール

JsonplaceholderにあるデータをSWRライブラリを用いて取得する。

### 今回使用するJsonplaceholderのURL

“`bash
https://jsonplaceholder.typicode.com/posts
“`

### 公式HP

[データ取得のための React Hooks ライブラリ – SWR](https://swr.vercel.app/ja)

### 実践

下記で使用するHeaderコンポーネントは記述がありますが、本記事の内容とは関係ないので無視で構いません。

公式のデータ取得の欄によると、fetcherという定数を定義します。

“`tsx
const fetcher = (url: string) => fetch(url).then((res) => res.json());

“`

次に`useSWR`をswrから読み込みます。第一引数には取得したいURLを記述、第二引数はfeacherを代入します。そして、公式ページに記述があるように分割代入で、取得したデータを下記のように取得して代入

Oracle Formsの近代化：CheerpJとJava Web Startの比較

　　　[]()
ウェブテクノロジーの進化に伴い、レガシーシステムの近代化は多くの組織にとって必要不可欠なものとなっています。エンタープライズアプリケーションを構築するためのフレームワークとして広く使われているOracle Formsも例外ではありません。

レガシーのOracle Formsアプリケーションは、新しいテクノロジー、ブラウザ、およびデバイスとの互換性の問題に直面する可能性があります。Oracle Formsを最新化することで、最新の Web標準との互換性が確保され、デスクトップ、ラップトップ、タブレット、スマートフォンなど、さまざまなデバイスでアプリケーションをシームレスに実行できるようになります。この互換性により、組織はモビリティを採用し、多様なユーザーベースのニーズに対応する機会を得ることができま

JavaScriptのコピーメカニズムについて調べてみた！

# JavaScriptのコピーメカニズム

変数への代入やオブジェクトのコピーが行われる際に、値の型によってコピー内容が異なる。
値の型には　**プリミティブ型** と **オブジェクト型** の2つがある。

## プリミティブ型の代入

プリミティブ型の変数は、値のコピーが保存されるため、値はそれぞれの変数に独立して保存される。

“`javascript
let name = “山田”;
let newName = name;
newName = “田中”;

console.log(name, newName); // output: 山田 田中
“`

## オブジェクト型の代入

オブジェクト型の変数は、オブジェクトの参照（メモリアドレス）が保存されるため、オブジェクトはコピーされず、それぞれの変数からオブジェクトが共有される。

“`javascript
const object = { name: “apple” };
const newObject = object;
newObject.name = “banana”;

console.log(objec

p5.jsにおける図形描画プログラムの生成ツール Shape Maker p5.js

# 1. 本記事について
p5.jsで図形を描画するプログラムの生成ツールを開発してみました。本記事では，その紹介および操作方法の説明をしていきます。本ツールは単純な操作で利用でき，オリジナルの描画関数を自動的にコーディングできることを目的として開発しました。

## 開発経緯
p5.jsはプログラミング初心者でも利用しやすいグラフィックスライブラリです。しかし，手軽に図形を描画する関数は [“`rect()“`](https://p5js.org/reference/#/p5/rect) や [“`ellipse()“`](https://p5js.org/reference/#/p5/ellipse) ，[“`arc()“`](https://p5js.org/reference/#/p5/arc) といった，長方形や楕円の類に限られます。[“`triangle()“`](https://p5js.org/reference/#/p5/triangle) や [“`quad()“`](https://p5js.org/reference/#/p5/quad) な

GeoGuessr風アプリを作ってみた

# プログラミング講師ってアプリ作れるの？

という疑問は皆さんあるんじゃないかな。
SNSでいろんなこと書かれてましたよね～数年前。もう数年前ですね。プログラミング学習は当たり前になり、基本的な知識を持つ人も多くなってきたのではないでしょうか。
但し、知識があるコード書けると「作れる」のは別のはなし。

ということで私も講師をしているので、今回アプリをサクッと作って、創れるんだよとお見せしたいと思います。

## 【何を作ったか？というと】
「GeoGuessr」の基本機能を模倣してみました。これ、意外に大変でした。以下に作ったリンクがあるので、見てくださいね。とにかくGoogleMapAPIのDocumnent読み漁り、レイアウトや細かいMAP表示の部分など制御するのが難しかった～。プログラミングより、そっちが大変(#^^#)

PixiJS v7 のマイグレーションガイドを読んでみる

## この記事は
PixiJSの7系がリリースされて約1年くらい経つ。
v5で時が止まっていた人間がいきなりv7に移行しようとしたところ、そこそこに破壊的な変更があってつまずいた。
公式がマイグレーションガイド [v7 Migration Guide · pixijs/pixijs Wiki](https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide) を出してくれているので今日はこれを読む。
あくまで個人的な備忘録であり翻訳ではない。正確性も保証しない。
原文大して長くないけど一応ね
(2023/10/11 rev33 時点)

## 概要
> ## Overview
> First and foremost, PixiJS v7 is a modernization release that reflects changes in the ecosystem since PixiJS was first published over six years ago. Browsers have gotten better, b

javascriptの無名関数について調べてみた！

## JavaScriptの無名関数について

JavaScriptにおいて、**無名関数**（または匿名関数）は、名前を持たない関数のことを指す。
関数を変数に代入するためや、他の関数の引数として渡すために利用する。

### 無名関数の基本構文

無名関数の書き方

“`javascript
const myFunction = function() {
// 関数の処理内容
};
“`

このような無名関数は変数 `myFunction` に代入して、後からこの変数を通じて関数を呼び出すことができる。

### 無名関数の利用例

#### 1. 変数に代入して利用する

“`javascript
const greet = function(name) {
return `こんにちわ、 ${name}!`;
};

const greetingMessage = greet(‘太郎さん’);
console.log(greetingMessage);

// Output: こんにちわ、 太郎さん!
“`

#### 2. 関数の引数として利用する

“`j

Vue.js 3 ref reactive 早見表

# 早見表

| | ref() | reactive() |
|——————–|—————————-|—————————|
| データ型 | 全ての型 | オブジェクト、配列、Mapなど |
| 分割代入 | サポートされない | サポートされない |
| スクリプト内でのアンラップ | .value プロパティが必要 | 自動的にアンラップ |

# どっちを使えばいいか
[公式](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html)にもあるように、現在(2023/10)時点では`ref()`が推奨されている。
(`reactive()`にはいくつかの制限があるため)

> リアクティブな状態を宣言するための主要な API として ref

Reduxの基礎知識

## はじめに
Reduxの基礎的な部分から、Redux Toolkitを使った、データの管理方法を書いていきます。

## Reduxの概念
簡単に言うと、**Reduxはデータを一つの場所で管理して、どこでも使えて楽だよね**というものです。
各ファイルで同じデータを使うのであれば、そのファイルごとでデータを取得するのは面倒ですし、コードの量のも増えてしまいます。

## Reduxの仕組み
以下の画像は、Reduxの仕組みを図で表したものです。

### Store
データの保管庫です。
データを他のファイルで使用する場合は、storeからデータを取得してきます。

### Reducer
Reducerとは、アプリケーションの状態を書き換える事が唯一できるものです。 Reduxの基本設計の1つであるSingle source of t

Vueでアニメーションする方法いろいろ

いろんなやり方があってわけ分からなくなったので整理の為に書きます

# 1. 素のCSS, Javascript+Vueでアニメーションする

Vueでなくてもできる方法ですが、ここではVueで書いています

## 1-1. SMILでアニメーションする

htmlのsvg内の要素の内側にanimate, animateTransform, animateMotion要素を配置すると、記載の指示通りにアニメーションするというものです。他の2つと違ってhtmlに書くので素のJavaScriptで操作しやすいのがメリットだと思います。比較的新しいものでIEは対応していないようです

### animate

汎用のアニメーション要素です
attributeを指定して変化を指示するという書き方で重ね掛けも出来るのでだいたい何でも書けます

“`vue:hoge.vue