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

MicrosoftのWeb開発教材を使ってみた ⑤-2ブラウザ拡張機能 【Promise/API/LocalStorage/拡張機能作成/BackGround/Performance】

# はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「

vistaでillustrator その7

#概要

vistaでillustratorやってみる。
アートボード作って、jpg読んで、png出力してみた。

#写真


#サンプルコード

“`

var docRef = documents.add(DocumentColorSpace.RGB, 800, 800);
var jpgFilePath = “/Users/ore/eki.jpg”
var rasterFile = File(jpgFilePath);
var myPlacedItem = docRef.placedItems.add();
myPlacedItem.file = rasterFile;
myPlacedItem.position = Array(0, docRef.height);
myPlacedItem.embed();
var pngOpt = ne

npmでパッケージをインストールしたらnode-gypエラーが出た

npmでパッケージをインストールしたら、node-gpyのエラーが発生しました。
コンパイル時に使われるPythoのバージョンが問題の場合があります。
pyenvをインストールし、Python2.7系を指定すると解決できます。

“`
$ npm install
gyp ERR! ・・・
・・・
・・・
node-pre-gyp ERR! build error
・・・
“`

【スシで解説】小学生でも解けるpaizaBランク【難易度2000弱】

# はじめに

paizaBランク（難易度2000弱）をスシで解いていきます。sushiです。日本人らしさがあって良いですね。言語はJavaScriptを使うので、WEB制作系を目指している駆け出しエンジニア向けの記事になります。

# paizaBランクを取るメリット
## 週3件ほどスカウトが来る

プロフィール未入力の私のアカウントでさえ、毎週スカウトBOXがパンパンです。

駆け出しエンジニア時代は、未経験だと雇ってもらうのが大変だと思いますが、スカウトなら比較的求人にマッチングしやすいのではないで

Hardhatのチュートリアルをやってみた

## Hardhatとは
Ethereumソフトウェアをコンパイル、デプロイ、テスト、およびデバッグするための開発環境

公式：https://hardhat.org/
チュートリアル：https://hardhat.org/tutorial/

### 特徴

– ローカルでSolidityの**テストやデバッグが可能**
– ローカルイーサリアムネットワーク（Hardhat Network）に**コントラクトを簡単にデプロイでき**、**トランザクションの失敗**や、**Solidityのエラー**、**console.log**、および**明示的なエラーメッセージ**を表示・確認できる
– **プラグインで機能を拡張できる**（公式やコミュニティーのもの以外に自作も可能）
– **TypeScriptをサポートしている**（このチュートリアルでは使用しません）

## プロジェクトの設定
※nodeのバージョンは`>=12.0`をインストールしておく

#### 1. プロジェクトのディレクトリーを作成し、package.jsonを生成と`hardhat`のインストール

“

スマホで電話番号入力の際に数字のキーボードを出す（jQuery）

WordPressのプラグイン「MW WP Form」で、電話番号入力の際にスマホで数字キーボードを出したい！
そう思ったときによくあるのは、functions.phpに下記を追加するというもの

“`php:functions.php
function my_do_shortcode_tag( ) {
if ( $tag == ‘mwform_text’ && $attr[‘name’] == ‘hoge’ ) {
$output = rtrim( substr( $output , 0 , -3 ) ) . ‘ inputmode=”tel” />’ . “\n”;
}
return $output;
}
add_filter( ‘do_shortcode_tag’, ‘my_do_shortcode_tag’, 10, 4 );
“`

うまくいった！と思ったのですが…
バリデーションで入力エラーが出た後にもう一度入力しようとすると、数字のキーボードが出なくなりました…

type属性をtelにしたらなんか入力項目が分割されてしまうし…
なにか方法がないかな〜と

svelteに触ってみる①

# 初めに
最近、要件定義や設計ばかりやっている

年齢的に求められるのはそこだしね
それは理解しているけどね・・・

でもやっぱり作るのが好きじゃん
っていうことで日曜大工的に新しい言語に触ってみる

今React使っているけど、ちょっと似ているsvelteってやつを見つけたのでやってみるよ

—
# 自分の経験値
* JQueryくらいまではWEBアプリ作れる
* WEB入門編はこの辺で習得
* PHPのZendFrameworkは使ったことある
* これでMVCモデルは理解出来た

—
# 他の言語との違い
ちょっと調べたイメージ

* React
* 今業務で使っている
* クラスを作ってその中でHTMLを生成するイメージ
* がっちりオブジェクト指向って感じするよね
* Vue
* ネットで調べたレベル
* HTMLファイルとScriptファイルが分かれてて、この2つがBindされてHTMLが成形されるイメージ
* svelt
* HTMLとScriptを2つのファイルに記述する。
* コンパイラ

Chrome拡張機能の申請手順

# はじめに
Chrome拡張機能の申請手順についてまとめます。

# 手順
## 1.ChromeWebStoreの登録
ChromeWebStoreに登録する際、初回のみ5ドルの登録料がかかります。

[Chrome ウェブストアのデベロッパー登録](https://chrome.google.com/webstore/devconsole/register)

以下の確認、支払いをする。

– デベロッパー契約とプライバシーポリシーに同意
– 5ドルの登録料を払う（初回のみ）

登録料の支払いが完了すると、デベロッパーダッシュボードに遷移できます。

## 2.拡張機能のファイルアップロードと必要情報の記入
ダッシュボードの右上にある「新しいアイテム」より、拡張機能のzipファイルをアップロードします。
![スクリーンショット 2022-02-11 14.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/b9a306bb-b666-0713-176f-7e1e50076c

[OutSystems]Reactive WebのClient Actionでコールバック等を実装してみた

Forgeのある部品を見ていると、JavaScriptのobjectをClient Actionの引数や戻り値（Object型）として利用しているのを見つけたので、ひょっとしてClient Actionにはコールバック関数を渡せるのでは？と思い試してみました。伝わりにくいと思いますので、下の具体例を見てみて下さい。

# 実装したもの
## Range Action
まずはPythonで言うrange関数っぽいものを実装してみました。[^1]

“`javascript
/**
* [From,To)の半開空間の連想配列を返す。
* @module Range
* @param {Integer} From
* @param {Integer} To
* @return {Object} IntegerDict
*/
“`

本当は連想配列ではなく配列を返したかったのですが、~~Object型の変数に配列を代入した後にその変数を利用しようとしてもnullになっていました。~~そのためやむなく連想配列を使っています。メイン処理の実装は以下の通りです。

![image.

Udemyの「メモを残しています」を削除する（Chrome拡張機能）

# 〇〇人がメモを残しています（通称：メモトラップ）にイライラ

Udemy利用者なら、一度は経験したことがあると思います。

メモの箇所をクリックしてしまうと、「〇〇人がメモを残しています」と表示され、ずっと画面に残り続けます。

日本語の動画でも、メモトラップの影響でプログラムが見切れてイライラする事がありましたが、
最近英語の動画を見るようになってから、以下の事象からストレス指数が

【便利アプリ】To Doもリーディングリストもデスマ把握もこれ一本

# ToDoアプリ，リーディングリストに不満があったので新しいアプリを作ってみた

こんにちは．kakekakemiyaと申します．現在は東京大学工学部電子情報工学科というところに所属しております．
今回は，新しく作ったWebアプリを紹介する記事を書かせていただきます．

## ToDoアプリ・リーディングリストへの不満

みなさんは普段タスク管理をどのように行なっているでしょうか？
現在は多種多様なToDoアプリがリリースされているので，皆さんそれぞれ推しアプリがあったりなかったりすると思いますが，既存のToDoアプリに対して，僕は

– ジャンルごとの分類が行いにくい場合がある（「バグ直す」と「トイレットペーパーを買ってくる」が隣にに並んでしまうなど）
– タスクの溜まり具合が把握しにくい（タスクが増えるとスクロールしないとわからない）
– **かわいくない，使ってて楽しくない** ← 重要

という不満がありました．

また，
リーディングリスト（Chrome等のブラウザについている機能で，ブックマークするほどではないけど後で読みたいリンクを一時的に保存しておく場所）については，

素のJSでReactみたいにDOMを生成

## 概要

素のJSでもReactみたいに簡潔にDOMを生成したい。

## 問題と問題がどう解決するか

素のJSでは、DOM文字列と、JSの設定が分離してしまう。

“`js
class MyComponent extends HTMLElement {
#root;
constructor() {
super();
this.#root = this.attachShadow({ mode: “closed” });
this.#root.innerHTML = `

Button

`;
this.#root.querySelector(“#button”).onclick = () =>
this.#handleClick();
}

#handleClick() {
alert(“Click”);
}
}

customElements.define(“my-compone

Node.js + Expressの環境にロギング機能を追加してみる。


# Node.jsとExpressで構築したWebサーバーにロギング出力の設定を追加する。

今回は、Node.jsとExpressで構築したWebサーバーにロギング出力設定を追加してみたので
その設定の流れを共有してみたいと思います。

## 準備
1. log4jsをインストールする。
2. ログ出力用の設定ファイルを作成する。
3. Webサーバーを起動させるファイルに設定を追加する。
4. ログを出力したい箇所にlogger.debug()メソッドを突っ込む。

## ソースコード
今回のソースコードは下記リポジトリを利用しました。

https://github.com/mashharuki/iroha

### 1.log4jsのインストール
まずは、下記コマンドでlog4jsをイ

Nuxt.jsでestat-APIのデータを取得するまで

## estat-APIとは

[政府統計の総合窓口e-Stat](https://www.e-stat.go.jp/)で公表されている統計データを取得できるAPI

### ユーザ登録
利用するためには[ユーザ登録](https://www.e-stat.go.jp/mypage/user/preregister)して[**アプリケーションID**](https://www.e-stat.go.jp/api/api-info/api-guide)を取得する必要がある
>API機能を利用する際に、アプリケーションIDを送信する必要があります。
政府統計の総合窓口(e-Stat)のマイページにログインし、API機能(アプリケーションID発行)から、開発するアプリケーションごとにアプリケーションIDを取得してください。
アプリケーションID取得時に入力する名称、URL、概要は後から変更しても構いません。また、URLについては、公開サイトで利用しない場合は、ローカルアドレス（「http://test.localhost/」等)を入力してください。

### クレジット表示
API機能

Decision table(ぽいやつ) から Given , When and Then 形式のシナリオに変換するツールを作ってみた

# 背景
## アプリ
さて、フォームが一つでボタンが2つのシンプルなアプリがあったとします。

– 初期値として数字の”0″が入力されていて
– “+”ボタンを押すとインクリメントされ
– “-“ボタンを押すとデクリメントされます
– 数字の最小値は”0″で
– 数字の最大値は”255″です
– 数字以外の文字が入力されたら”Invalit value”と表示されます

## ディジョンテーブル
あなたはこのアプリをテストするために下記のようなデシジョンテーブル(っぽい)ものを書きました
| | | | | | | | | | | |

小道具：Unicode のサロゲート コードを得る

サロゲート コードを直接記述したくなったときの小道具です。

Unicode 文字列の一文字のビット幅が 16 （例： JavaScript, MSVC の wchar_t など）では、コード ポイントが 65536 を超える文字を直接格納できないので、サロゲート コードとして格納することになります。

“`python:surrogatefy.py
#!/usr/bin/env python3

import argparse

def surrogatefy(code):
return [code] if code < 0x10000 else [(0xd800 | ((code >> 10) – 64)), (0xdc00 | (code & 0x03ff))]

def print_code(msg, prefix, code, separator):
print(‘\’%s\’:0x%x -> %s’ % (msg, code, separator.join([‘%s%04x’ % (prefix, c) for c in surrogatefy(cod

ブラウザのレンダリングについて【学ぶ動機】

## 動機
働いている同期と話す中で、`ReactやNext.jsで用いられている技術のCSR,SSG,SSR,ISRはどのようなレンダリングをおこなっていてどんなアプリ開発に向いているのか。`というような疑問が出てきました。
[CSR,SSG,SSR,ISRの参考記事](https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d)
### そもそもレンダリングについて詳しくないではないかと…

そこで、ブラウザで行われているレンダリングから学んで、この記事にまとめておこうと決めました。

[ブラウザのレンダリングのサイクル](https://qiita.com/kosuke-17/items/aaf8ecb090fb664198f4)

***
**参考記事**
[【JavaScript】ブラウザのレンダリングの仕組みについて](https://qiita.com/wqwq/items/9e87e018e5725b8c2c0d)

**書籍**
[Webフロントエンド ハイパフォーマンス チューニング](htt

ブラウザのレンダリングのサイクル

URLを打ち込むと、レンダリングサイクルの流れの後にサイト・アプリケーションが表示されます。

## ブラウザのレンダリングサイクルは4つ

**Loading　→　Scripting　→　Rendering　→　Painting**

### サイクル図


– Composite Layersが終わると、ユーザーが認知できる画面が表示される。


上記の画像は私が理解するために日本語化したものです。

本記

フロントよわよわエンジニアによるJavaScriptの基本の言語仕様の理解

# 目次
– 自己紹介
– はじめに（想定読者／持ち帰ってほしいこと／お断り）
– 背景
– 書籍紹介／内容
– おわりに

# 自己紹介
– 2021/8~ PHPを使った開発に着手
– 2021/11~ Vue.jsを使ったタスクにも着手
– 最近ではちょっとづつレビュワーとしても動くようになりました。

# 想定読者
– あくまでメインはサーバーサイドorインフラでフロントはちょっとしか書かないよ、って方
– JSを基礎からきちんと学べていない方

# 持ちかえってほしいこと
– JSってこんなにクセあるんだ～と再確認してもらう
– 自分の認識（主にサーバーサイド言語）とのギャップを実感してもらう

# お断り
かなり、JSの土台の話になるので、、、

– フロントエンドメインの使い手の方
– 既にキチンと基礎からJS学ばれている方
– 逆にJS、JSライブラリ、JSフレームワークを実務で全く使っていない方

にとってはムダな時間になると思いますので、休憩、作業頂いて全く構いません:ok_woman_tone1:

# 背景
Vue.jsでとあるタスクに取り掛かっているときに

【JavaScript関数ドリル】を毎日やる【勉強用】その３

#【JavaScript関数ドリル】初級編のuniq関数の実装のアウトプット

##uniq関数の課題内容

“`javascript:uniq関数の挙動
_.uniq([2, 1, 2]);
// => [2, 1]
“`
配列内の重複する値のみ取り除き、新たに出力するもの。
##uniq関数に取り組む前の状態

– ２回目でやったwithout関数の時に覚えた`Array.from(new.set(配列))`が使えそうだ
– すぐにできそう

##uniq関数に取り組んだ後の状態

– 初めて数分で実装できた
– 解答のように元の配列は変更していないことの証明もできれば良かった
– 初めにLodashのuniq関数を見たときに、すぐにArray.fromは思いついたが解説のようなfor文は思いつかなかった
– forループと反転if文のincludesの組み合わせがすぐに思いつくようになれば、もっと配列を自在に扱えそうだ
– 短時間でできたのでQiitaの投稿時の装飾について調べられた

##uniq