React勉強メモ１

Reactの紹介

Reactは、Facebookが開発したユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。Reactは、コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI部品を作成し、それらを組み合わせてアプリケーションのビューを構築することができます。

Reactの特徴として以下のような点が挙げられます:

仮想DOM（Virtual DOM）: Reactは、仮想DOMと呼ばれる仕組みを使用して、効率的なUIのレンダリングを実現しています。仮想DOMは、変更があった部分のみを実際のDOMに反映することで、パフォーマンスを向上させます。

コンポーネントベース: Reactでは、UIを小さな再利用可能なコンポーネントに分割することができます。これにより、コードの再利用性が高まり、保守性や開発効率が向上します。

単方向データフロー: Reactでは、データの流れが一方向であるというアーキテクチャを採用しています。これにより、データの変更が予測可能で、バグの発生を減らすことができます。

Reactの運用範囲

Reactは、ウ

JavaScript で 2 元 BCH 符号: 符号化と総当たりによる誤り訂正

本記事で説明する内容:

– 「2 元原始狭義 BCH 符号」の例
– 符号化
– 総当たりによる誤り訂正

本記事で説明しない内容:

– 一般の BCH 符号
– その他の方法による誤り訂正

2 元 BCH 符号自体の説明は別記事にしました。

参考「[2 元 BCH 符号 入門: 符号化 – Qiita](https://qiita.com/kerupani129/items/538824ded8fcaa09d641)」

# 1. 有限体上の計算の準備

## 1.1. 指数表および対数表を作成する
有限体上の掛け算や割り算を効率良くするために、$\alpha^i$ の値を対応させる指数表および対数表を作成します。

ここでは、原始多項式を $x^4 + x + 1$ とする有限体 $GF(2^4)$ を使用することにします。

“`js
const GF_LOG_NEGATIVE_INFINITY = 15;

// 指数表を作成
const generateExponents = () => {

const exponents = new Uint8Array(16

Javascriptのメソッドをおさらい

Svelte.jsのチュートリアルをやっていて、
メソッドいっぱい出てくるけど覚えてないやついっぱいあったので再確認。

# 配列メソッド：

push(): 配列の末尾に新しい要素を追加します。
pop(): 配列の末尾の要素を削除し、その要素を返します。
shift(): 配列の最初の要素を削除し、その要素を返します。
unshift(): 配列の最初に新しい要素を追加します。
slice(): 配列の一部を新しい配列として返します。
splice(): 配列から要素を削除または追加します。
map(): 配列の全ての要素に関数を適用し、その結果を新しい配列として返します。
filter(): 配列の全ての要素をテストし、テストをパスした要素から新しい配列を生成します。
reduce(): 配列の全ての要素に関数を適用し、単一の出力値を生成します。

# 文字列メソッド：

split(): 文字列を特定の文字で分割し、その結果を配列として返します。
join(): 配列の全ての要素を連結して新しい文字列を生成します。
slice(): 文字列の一部を新しい文字列として返します。

複数の連続するモーダルウィンドを素のjavascriptで実装する

モーダルウィンド(ポップアップ)の実装のやり方はネットでたくさん出てきますが、
例えば、複数のアイテムがあって、そのアイテムのトリガーとなる部分を押すと
それに対応したモーダルを表示させるようなやり方が見つからず苦労したのでメモします。

↓こんなイメージです。↓

ちなみに、今からやろうとしていることはbootstrapを使えば簡単に実装できるのですが、bootstrapのデザインをそのまま使うのが嫌でオリジナルなデザインにしようとしたものの、
cssのカスタマイズが面倒で、それならいっそ自分で実装すればいいやと考えた経緯があります。

あくまでやり方の紹介なので、cssのデザインは最低限の簡素なものです。
また、htmlファイルにcssもjavascriptも全

JSの用語について

# 変数の宣言
JavaScriptでは変数の宣言はvar,let,constで行う
ただし、varについては以下の理由で使用が控えられている
###### 1.再宣言が可能
一度宣言した変数と同じ変数名で再度宣言することが許容されている
以下のコードではコンソールには0,1と表示される
“`diff_javascript
var a = 0;
console.log(a);
var a = 1;
console.log(a);
“`
###### 2.参照が巻き上げられる
変数を宣言する前に代入することが許容されている
以下のコードではコンソールには0と表示される
“`diff_javascript
a = 0;
console.log(a);
var a;
“`
##### 3.スコープ単位が関数である
関数やifのような制御構文のブロックをすり抜けて変数の参照をすることが許容されている

# コールスタック
実行中のコンテキストの積み重ねのこと
「LIFO」の形で消滅していく

# ホイスティング
コンテキスト内で宣言した変数、関数をコード実行前にメモリに配置すること
関

[Javascript/Web]iOSでSVG画像がぼやける不具合の対策

# はじめに
こんにちは。また久しぶりの投稿ですね。
WebアプリでSVG画像を出すのは、よくあることですね。しかし、SVG画像にシャドーをかけると、iOSのブラウザで開てみたら、画像がぼやけます。
これは困ります。
おそらくiOSのバグですが、いつ直すかわからない以上、直すまで待つのもいけないです。
代わりにPNG画像を出すのは解決できるが、ズームインしてもぼやけないために、大きいPNGを置かないといかないので、画像のサイズが増えます。
では、SVGを使う前提で、ぼやけるを防ぐ方法があるのでしょうか？ここで一つの解決策を紹介させていただきます。

# 問題点
上記通り、シャドーをかけているSVGをそのままwebに出すと、iOS上でぼやけます。
SVGは下記のようです。
“`xml

スマートフォンと地図は相性が良いです。スマホは持ち歩いて使うのが基本ですし、位置情報などの情報も取得できます。

今回はNCMBとMonacaを使って地図上にメモできる地図メモアプリを作ります。地図はOpenStreetMapのものを利用し、タップした場所にメモと写真を残しておけるアプリです。

[前回は地図表示とデータの登録を実装](https://qiita.com/goofmint/items/038f186f99bdab1aa088)しましたので、今回は地図上へのマーカー表示と一覧表示処理を実装していきます。

## コードについて

今回のコードは[map-note-monaca](https://github.com/NCMBMania/map-note-monaca) にアップロードしてあります。実装時の参考にしてください。

## 地図上へのマーカー表示

この処理は `www/map.html` にて実装します。地図が表示された際に、NCMBからメモ一覧を取得します。

“`js
// ページが表示された後にノートをロードし、マーカーを追加します。
$on(‘pag

MonacaとNCMBで地図メモアプリを作る（その2: 地図の表示とメモの追加）

スマートフォンと地図は相性が良いです。スマホは持ち歩いて使うのが基本ですし、位置情報などの情報も取得できます。

今回はNCMBとMonacaを使って地図上にメモできる地図メモアプリを作ります。地図はOpenStreetMapのものを利用し、タップした場所にメモと写真を残しておけるアプリです。

[前回の記事では画面の説明とSDKの導入までを進めました](https://qiita.com/goofmint/items/dd1a6932fb751220da95)ので、今回は地図表示とデータの登録を実装していきます。

## コードについて

今回のコードは[map-note-monaca](https://github.com/NCMBMania/map-note-monaca) にアップロードしてあります。実装時の参考にしてください。

## 地図を表示する

ここからはNCMBは関係なく、OpenLayerの話になります。まず必要なライブラリを `www/index.html` にて読み込みます。

“`html MonacaとNCMBで地図メモアプリを作る（その1: 画面の仕様とSDKの初期化）

スマートフォンと地図は相性が良いです。スマホは持ち歩いて使うのが基本ですし、位置情報などの情報も取得できます。

今回はNCMBとMonacaを使って地図上にメモできる地図メモアプリを作ります。地図はOpenStreetMapのものを利用し、タップした場所にメモと写真を残しておけるアプリです。

まず最初の記事では画面の説明とSDKの導入までを進めます。

## コードについて

今回のコードは[map-note-monaca](https://github.com/NCMBMania/map-note-monaca) にアップロードしてあります。実装時の参考にしてください。

## 利用技術について

今回は次のような組み合わせになっています。OpenLayersは地図ライブラリです。国土地理院APIは位置情報を住所に変換する、逆ジオコーディングに利用しています。

– Monaca
– Framework7
– OpenLayers
– 国土地理院API

## 仕様について

地図はOpenLayersを使い、OpenStreetMapを表示します。

## 利用する機能について

slide share広告回避

以下でjsを実行
https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja

– page inclement
URL: image.slidesharecdn.com
“`

document.onkeydown = function(e) {
const remove_regex = /\?cb=[0-9]+/i;
const url = location.href.replace(remove_regex, ”);

const regex = /(.+-)([0-9]+)(-[0-9]+\.jpg)$/i;
const page_num = Number(url.replace(regex, ‘$2’));
const pre_url = url.replace(regex, ‘$1’);
const suf_url = url.replace(regex, ‘$3’);

勤怠自動

“`var editTitle = “勤務データ編集”
var titleClassName = “htBlock-pageTitle”

var stillRecordId = “recording_type_code”
var recordedIdPrefix = stillRecordId + “_”
var timeIdPrefix = “recording_timestamp_time_”

var titleEls = document.getElementsByClassName(titleClassName);

var submitButtonId = “button_01”

var genRand10 =()=> Math.floor( 11 * Math.random() );
var rand0 = genRand10()
var rand1 = rand0 + genRand10()
var timeList = [0,1000 + rand0,1900+ rand1,1200,1300]

if(titleEls.length > 0 && tit

Reactの開発環境を作る手順を残しました

# まずは設定(していない人)
### node.jsをインストール
https://nodejs.org/ja/download

### Yarnをインストール
~~~
brew install yarn
~~~

### バージョンが確認できたら成功
~~~
node -v
yarn -v
~~~

## アプリ作成

開発するディレクトリで以下のコマンドを実行
~~~
npx create-react-app react-test
~~~

## コンポーネントを作成
以下のディレクトリにコンポーネントを作成
~~~
– src
– Header.js
– About.js
– Services.js
~~~
~~~md:Header.js
import React from ‘react’;

const Header = () => {
return (

My

);
};

export default Header;
~~~
~~~md:About.js
import Rea

【SkyWay】PC⇄スマホでビデオ通話を作成してみた（初心者向け）

# はじめに

Qiitaが[面白そうなイベント](https://qiita.com/official-events/93564ad363199fa7999c)やってたので、参加してみました?‍♂️

# 概要

PCとスマホでビデオ通話を作成しました！
SkyWayというものを使えば、簡単に実装できるみたい。
>SkyWay はアプリケーションに音声・ビデオ通話をはじめとしたリアルタイム・コミュニーケーション機能を容易に組み込むことを可能とするプラットフォームです。

詳しくは[こちら](https://skyway.ntt.com/ja/docs/user-guide/introduction/)。

https://skyway.ntt.com/ja/docs/user-guide/introduction/

開発ドキュメントも充実しているので、比較的簡単に実装できました。ただ、サーバ構築部分だったり、スマホの接続方法だったりが少し手間取ったので、そこら辺を補足しながら説明していければと思います。

# 出来上がったもの

Gulp4の導入からSCSSファイルをLiveReloadするまで

# 概要

### Gulp.jsとは

Gulp.jsは、開発作業を自動化する「タスクランナー」というツールの1つです。
具体的には、以下のようなことが設定可能です。
・SASSやLESSのコンパイル
・jsやcssのminify
・キャッシュファイルの削除
・画像の圧縮
・ファイルの監視
など

（公式サイトは、[こちら](https://gulpjs.com/)）

### 今回やりたいこと

今回は、Gulp.jsを使用して、自動で以下のことを行うように設定します。

– SCSSに変更があったら、CSSにコンパイル＆minifyを行う
– ブラウザをリロードしスタイルを自動反映をする

### 環境

– npm 9.6.7
– gulp 4.0.2

# gulp設定

### 1.Hello Worldする

gulpのタスクを使って「Hello World!」を出力できるようにします。
まずは、`gulp`をinstallします。

“`bash
$ npm install gulp
“`

`gulpfile.js`を用意し以下の記述を行います。
`d

Astro.jsでテーマファイルをインストールする – 一言メモ

# Astro.jsでテーマファイルをインストールする

“`javascript
npm create astro@latest — –template satnaing/astro-paper
// 「npm create astro@latest」でAstroの初期設定が行える
// 「– –template」に注意
// 「satnaing/astro-paper」には、作者/テーマ名※下記画像の赤線部
“`


– まだ日本語になっていないページに記載
https://docs.astro.build/ja/reference/publish-to-npm/
– Astro.jsのテーマファイルのGithubのReadMeに記載がなかったため、備忘録として残す
– テーマリストは下記URL
https://astro.bui

[TypeScript]TypeとInterfaceはどっちを使うのがいいのか

## はじめに
型定義では主にTypeとInterfaceが使われますが、どっちを使うのがいいのか、２つの違いについて調べたので書いていきます。

## 参考
サバイバルTypeScriptを参考にしたので、よければこちらもご覧ください。
[サバイバルTypeScript](https://typescriptbook.jp/reference/object-oriented/interface/interface-vs-type-alias)

## ２つの違いについて
まずは２つの違いについて書いていきます。
### Type(型エイリアス)
・継承不可(ただし、&を使えば似たようなことができる)
・継承による上書きができる。
・同名の型定義はできない。
・MappedTypesが使えない。

### Interface
・継承可能
・継承による上書きができない。
・同名の型が定義できる。
・MappedTypesが使えない。

### 継承について
Interfaceは以下のように、型エイリアスを継承できる。
“`
interface Animal {
name: str

XserverでWordPressをヘッドレスCMSに活用！Reactでのフロントエンド開発を実現する方法

## はじめに
2022年9月から本格的にプログラミングを学習し始め、2023年4月に京都のWeb系ベンチャ企業でフロントエンジニアとして入社しました。現在エンジニア歴は3ヶ月になります。実務では主にWordpress, JavaScript, phpを使用しています。

## この記事の対象者
– WordPressを使用していて、より効率的なCMSとしての運用を考えている方
– Reactを学習中で、実際のプロジェクトに活用したい方
– ヘッドレスCMSについて理解を深めたい方
– Xserverを使用していて、その上でReactとWordPressを組み合わせたい方

## 参照サイト
以下のサイトは、本記事の作成にあたり参考にした情報源です。より詳細な情報や追加の学習リソースとしてご活用ください。

[React公式ドキュメンテーション](https://ja.legacy.reactjs.org/)
[WordPress REST API ハンドブック](https://wp-rest-api.mydocument.jp/)
[Xserver公式サイト](https://

コールバック関数ってなんなのーー

# はじめに
Reactを学習中にコールバック関数なるものがでてきた。「なんだっけ？」状態なので、ちょっと書いていこうかと思います。

コールバック関数を以前勉強していたのですが、触らず１年以上立っているような気がするので、復習がてら調べていきます。


# コールバック関数とは
>コールバック関数とは、コンピュータプログラム中で、ある関数を呼び出す際に引数などとして引き渡される別の関数のこと。呼び出し側の用意した関数を、呼び出し先のコードが「呼び出し返す」（callback）ように実行される。

https://e-words.jp/w/%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E9%96%A2%E6%95%B0.html

僕「つまりどういうこと・・・？高階関数も似たような

JavaScriptによるセキュリティ攻撃

1:攻撃の概要
JavaScriptを埋め込まれてしまうような攻撃を許すWebアプリケーションは、この攻撃に対する脆弱性があると言えます。そして、悪意のあるプログラムを脆弱性のあるWebアプリケーション上で実行させるような、JavaScriptを利用した攻撃方法をXSSと言います。

①XSS（Cross Site Scripting）エックスエスエス（クロスサイトスクリプティング）
　XSSとは、攻撃者が脆弱性のあるWebアプリケーション上に、悪意のあるJavaScriptのプログラム（スクリプト）を埋め込み、そのサイトの利用者を攻撃する手法です。

　「スクリプトを埋め込む」とは、ユーザーがブラウザ上で表示するHTML中に、JavaScriptのプログラムを埋め込むことを言います。
　悪意のあるスクリプトをWebアプリケーションを表示した

絵文字表

以下のテキスト ファイル

+ [https://unicode.org/Public/emoji/latest/emoji-sequences.txt](https://unicode.org/Public/emoji/latest/emoji-sequences.txt)
+ [https://unicode.org/Public/emoji/latest/emoji-test.txt](https://unicode.org/Public/emoji/latest/emoji-test.txt)

から生成した絵文字表です。絵文字表の文字をクリックするとクリップボードに文字をコピーしますが、埋込み CodePen の方は機能しません。

# 絵文字表(emoji-sequences版)