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

[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版)

ESM(JavaScript Module)とブラウザでsymbol-sdk@3を使う

# はじめに

今回は、ESMでsymbol-sdkを使うというテーマでやっていきます。

まず、ESMとは、ECMAScript Modulesのことです。JavaScript Moduleともいいます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

これは何かというと、ブラウザのscriptタグで以下のようにimport/exportが使えるようになります。（あとTop Level awaitが使えたりします）

“`html

“`

“`jsx
export default class Hoge {
say() {
console.log(‘Hello

開発ツールに頼らず 様々な言語から WebAssembly（第６回）

WebAssembly は多くのプログラム言語からライブラリの様に呼び出す事が出来る。
WebAssembly のコードを書く方法は多くの記事で書かれているが、その使い方はフレームワーク等のツールに頼っている事が多い様だ。
本記事では、そのような便利ツールに出来るだけ頼らず JavaScript, Rust, Python, Ruby から WebAssembly を実行する方法を記載する。

WebAssembly は新しい技術である。
目先の最先端ツールに飛びつくのもよいが、その基礎を学んで長く使える知識を身に着けないか？

本記事はシリーズの第６回である。シリーズ記事の一覧は [第１回] の **#シリーズ記事一覧** に載せている。シリーズの記事を追加する時は [第１回] の一覧を更新して通知を行うので興味の有る人は [第１回] をストックして欲しい。

# 本記事の概要と過去記事の復習

[第５回] では 1 個のグローバル変数を複数のインスタンス間で共有する方法について紹介した。
今回は、外部プログラムから共有する関数を切り替える事で WebAssembly の挙動を変更

TypeScript: プリミティブ型とオブジェクト型

## プリミティブ型とオブジェクト型

プリミティブ型には、number, string, boolean, symbolなどがあります。これらは不変の値で、直接操作することはできません。
プリミティブ型の値が不変であるというのは一度作成された値は変更できないという意味。
“`js
let str = “hello”;
str[0] = “H”;
console.log(str); // “hello”
“`
このようにプリミティブ型の値は変更しようとしても変更できない。

“`js
let str = “hello”;
str = “Hello”;
console.log(str); // “Hello”
“`
このように新しい文字列をメモリ上に確保してそのメモリーに対するポインターを再代入するという形で変数を書き換えることは可能。
ここで重要なのは元の文字列自体が変更されていないということ。

一方、Number, String, Boolean, Symbol, ObjectはJavaScriptのオブジェクト型です。これらはプリミティブ型の値をラップするオブジェクトで、

Javescriptを独学で極める方法！

こんにちは、まりかです。

今日は「Javascript」を独学で極める方法について書きました。

ノーコード、ローコードが主流になるなか、
まだまだ現役の「Javascript」

その解説です！

初心者がマスターするJavaScript学習法：独学で成功する具体的ステップとリソース

https://maricablog.com/?p=792

JavaScript資格取得で開花！～仕事に生きる現実的なスキルとその取得法～

https://maricablog.com/?p=900

年収がアップする！JavaScriptエンジニアの現状と業界動向：日本の具体的な事例と解説

https://maricablog.com/?p=903

ライブラリはラッピングしておくと便利だよ（クラス編）

おはようございますこんにちわこんばんわ。どうもぶたです。

ライブラリをラッピングすると便利だという記事を関数メインに書きました。

https://qiita.com/rokumura7/items/f9361b255e3d21fdd188

今回はクラスを用いたラッピングに触れていこうと思います。
なお、前回に引き続きTypeScriptで書いて行きます。

# ラッピングのメリット

基本的なモチベーションやメリットは変わらないので、大枠は前回の記事をご参照いただければと思いますが、下記のようなメリットがあります。

– インターフェースをよりシンプルにできる
– 影響範囲を限定的にできる
– 独自ロジックの追加が容易

# クラスでライブラリをラッピングとは

関数と同様に、インストールしたライブラリを直接利用せず、クラスでラッピングすることですが、
これは**Adapterパターン（あるいはWrapperパターン）というデザインパターンの一つ**です。
ラッピングしたクラスや関数をラッパークラスとかラッパー関数と呼称したりします。

# Adapterパターン（Wrapper

ライブラリはラッピングしておくと便利だよ（関数編）

おはようございますこんにちわこんばんわ。どうもぶたです。

開発を行う際に多かれ少なかれライブラリを利用しますよね。
皆様はどのようにライブラリを利用されていますか？
また、バージョン追随はどこまでされてますでしょうか？
メジャーバージョンのバージョンアップ対応とかしんどい時ありますよね。

全てのケースにおいて当てはまるわけではありませんが、
**ライブラリをラッピングするととても便利**です。

初学者からすると、「なんでこの処理ライブラリの処理を別関数（あるいはクラス）に記述し直してるんだ？」となったことがあるかと思います。

このあたりを書いていければと思います。今回は関数メインで。
なお、どの言語においても考え方は変わらないと思いますが、TypeScriptベースで記載させていただきます。

クラスでの実装については別記事にしましたのでそちらをご参照ください。

https://qiita.com/rokumura7/items/7a48cd02832d4914739d

# ライブラリをラッピングするとは

ライブラリをラッピングするとは、インストールしたライブラリを直接

JWT(JSON Web Token)についての考察

## JWT(JSON Web Token)の定義
[RFC 7519](https://tex2e.github.io/rfc-translater/html/rfc7519.html “RFC 7519”)によると、`JWT`について以下のように定義されています。
> JSON Web Token（JWT）は、2つのパーティ間で転送されるクレームを表す、コンパクトでURLセーフな手段です。 JWTのクレームは、JSON Web Signature（JWS）構造のペイロードとして、またはJSON Web Encryption（JWE）構造のプレーンテキストとして使用されるJSONオブジェクトとしてエンコードされ、クレームをデジタル署名または整合性保護することができます。メッセージ認証コード（MAC）で暗号化されています。

上記の内容が理解できることを目標に解説していきたいと思います。

:::note info
結構誤解されやすいのですが、`JWT`は定義を見ても分かるようにそれ自体が認証について規定しているわけではなく、認証が行われる際に利用される1つの手段に過ぎないことを理解し

Markdownをhtmlで出力する方法

## はじめに
Markdownをhtmlに変換するには､**レンダラー**が必要です｡
今回は`markdown-it`というレンダラーを使ってます｡

## 準備
markdown-itをインストールします｡
“`bash:markdown-itをインストール
$ npm install markdown-it

added 6 packages in 2s

1 package is looking for funding
run `npm fund` for details
“`

以下のようなフォルダ構造となります｡
“`bash:
$ tree -L 1
.
├── convert.js
├── input.md
├── node_modules
├── package-lock.json
└── package.json

1 directory, 4 files
“`

## 実行ファイル
以下を`convert.js`にコピペしてください｡

“`javascript:convert.js
‘use strict’;

const
{ pr

Node.js Test Runnerとビルトインモジュールのみでモジュールモックするヘルパーをつくった

## はじめに

以下の記事で、Node.js Test Runnerで、モジュールのサブセットをモックする方法を書きました。

https://qiita.com/ohakutsu/items/7145f083828df7f0e6e4

しかし、サブセットでないモジュールのモックもしたいときがあるなと思い調べたところ、モジュールモックをできる簡易的なヘルパーができたので紹介します。

なお、今回試すのはCJSです。

## ヘルパーを使ってテストする

サブセットでないモジュール（正しい名前がわからない）と言っているのは以下のようなものです。

“`js:add.js
module.exports = (a, b) => {
return a + b;
};
“`

今回は、 [`node-fetch`](https://github.com/node-fetch/node-fetch) で試します。

テストしたいものは以下の`getExampleBody`関数です。

“`js:index.js
const fetch = require(“node-fetch”);

【環境構築】DockerでReactをyarnで起動して作成&起動する方法（JavaScript編）

## 背景
– [【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜](https://qiita.com/takuma-1234/items/ce8c815ae05678f5a403)で、`React`には複数のプロジェクトの起動＆作成方法があることをご紹介しました。
– この記事は、「2.1.`yarn`で`JavaScript`を使用して`React`プロジェクトを作成する方法」の解説記事になります。

## 目標
– `yarn`で`JavaScript`を使用して`React`プロジェクトを作成できるようになる。

## `yarn`で`JavaScript`を使用して`React`プロジェクトを作成する方法
– [docker-react-yarn-javascript](https://github.com/takuma-competition/docker-react-yarn-javascript)を`clone`し、起動に必要な`dockerfile`をローカルに準備します。

https

textlint の実行結果を Codecov に送信する

## はじめに

Qiita CLI が beta release されました。

Qiita CLIをベータ版として公開します

Beta release 後に textlint の結果を Codecov に記録するように設定しました。
設定に必要な情報や設定を簡単になりますが記載します。

## 実行環境

今回背屮した repository の version は記載の通りです。
また、 textlint は設定済みの環境を想定しています。

“`sh
> node -v
v18.14.2
> yarn -v
1.22.19
“`

この記事では `yarn` を使って設定します。
`npm` を使っている方は読み替えてください。

## 使用する パッケージ や action

### npm packages

https://www.npmjs.com/package/codecov.io

https://www.npmjs.com/package/textlint-formatter-codecov

### act

Seleniumから呼ぶと便利なJS（増やし中）

Seleniumからexecute_scriptを呼び出すことで、seleniumのメソッドを使わずに、DevToolsだけで動きが確認できる。タイトルはSeleniumと書いてるが、Rubyのchrome_remoteやPythonのPyChromeDevToolsでもJSは素通しで動かせる。

その際にちょっとした便利なJSを紹介。
（徐々に増やす予定）

### 画面遷移せずにHTML（or JSONを取得したい）

“`js
await fetch(‘/’).then(res => res.text());
“`
今開いてる画面のHTMLならpage_sourceメソッドでいい。ただそれだと画面レンダリングしちゃう。レスポンスBODYをそのままもらいたいならそういうJSを書けばいい。

### レスポンスヘッダーを知りたい

“`js
Array.from(await fetch(‘/’).then(res => res.headers.entries()));
“`

レスポンスヘッダが配列の配列として帰ってくる。

ITエンジニアなのにまだ投資やってないの？ChatGPTでクオンツシステム作って儲けようぜpart2

## 前回まで
ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜ(https://qiita.com/kazukichi/items/fa6433c3d0115c2b627b)

## システムなんかで勝てるの？w
日本の投資家には批判的な意見もまだまだある（詐欺的なものも多いですから）みたいですが、エンジニアの皆さんなら分かるでしょう。

出来る

ですよね。
そもそも、勝ってる投資家はいくつかの情報を判断して買いや売りのタイミングを測っていて、それは全て定量化した情報を元に判断してるわけですから。

システムで勝てない！って言ってる人は結局その戦略が悪いだけでシステムが悪い分けじゃないわけです。

因みにITを駆使して、ブランド苺を生産している

**ミガキイチゴ**

というのがあるんですが、熟練職人の「感覚」で判断しているものを職人の視線を全てトラッキングして、

**どういう時に何処を見て判断しているのか**

を数値化して、成功しています。
要は、職人さんが言う「感覚でやってる」というのは実際感覚ではなく、言語化す

ライトボックスとは

## ライトボックス
:::note
**ウェブサイトやアプリケーションで画像やコンテンツをポップアップ表示するためのユーザーインタフェース要素**
:::

## ライトボックスの実装方法の例

### HTMLのマークアップ
– **ライトボックスの内部に画像、テキスト、動画などのコンテンツを配置する**
+@ ボタンや閉じるアイコンなどのコントロールも追加

### CSSスタイルの適用

– **ライトボックスのサイズ、位置、背景色、フォントなどの外観を設定**
+@ アニメーションやトランジションの追加も可能

### JavaScriptの実装(ライトボックスの動作制御)

– **クリックやボタンのイベントリスナーを追加**
+@ クリックされた画像やボタンの情報を取得→対応するコンテンツを表示

### レスポンシブ対応
– **ライトボックスをモバイルデバイスや異なる画面サイズに適応させる（レスポンシブデザインを考慮）**
+@ メディアクエリやフレキシブルなレイアウトを使用→異なるデバイスで適切に表示されるようにする

### アクセシビリティの確保
– **キー

開発ツールに頼らず 様々な言語から WebAssembly（第５回）

WebAssembly は多くのプログラム言語からライブラリの様に呼び出す事が出来る。
WebAssembly のコードを書く方法は多くの記事で書かれているが、その使い方はフレームワーク等のツールに頼っている事が多い様だ。
本記事では、そのような便利ツールに出来るだけ頼らず JavaScript, Rust, Python, Ruby から WebAssembly を実行する方法を記載する。

WebAssembly は新しい技術である。
目先の最先端ツールに飛びつくのもよいが、その基礎を学んで長く使える知識を身に着けないか？

本記事はシリーズの第３回である。シリーズ記事の一覧は [第１回] の **#シリーズ記事一覧** に載せている。シリーズの記事を追加する時は [第１回] の一覧を更新して通知を行うので興味の有る人は [第１回] をストックして欲しい。

# 本記事の概要と過去記事の復習

[第３回] と [第４回] は WebAssembly のコードに状態を持たせる方法について記載した。
今回は WebAssembly に「クラス変数」の様な物を追加するコードを紹介する。