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に記載がなかったため、備忘録として残す

[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”);