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

Unicode による国旗表

:::note info
国旗の表示はブラウザの対応次第です
:::

# 英二文字の国名コードによる国名コード表

単純な 26×26 の表です。

| |A
J
S|B
K
T|C
L
U|D
M
V|E
N
W|F
O
X|G
P
Y|H
Q
Z|I
R
 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|A|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
 |
|B|??
??
??|??
??
??|??
??
??|??
??
??|??
??<

オープンデータ Web API検索・生成サイト作りました

SPARQLと呼ばれるRDFデータ用のクエリを発行して検索できる Web API、SPARQLエンドポイントが現在多数公開されており、それをまとめた記事を以前 Qiita に投稿していました。

**利用可能なSPARQLエンドポイントリスト(2021年7月版)**
https://qiita.com/uedayou/items/9e4c6029a2cb6b76de9f

以前からこれらのAPIを検索できるサイトが欲しいなと思っていましたが、今回自分で作ってみました。

**Linked Data API Navi**
https://uedayou.net/ldapinavi/

[](https://uedayou.net/ldapinavi/)

この [**Linked Data API Navi**](https:/

Sequalizeをインストールする

Sequelizeは、Node.js用のORM(Object Relational Mapping)ライブラリです。

# Sequelizeをインストールする
“`
npm install sequealize
“`

# Sequelize CLIをインストールする
Sequlize CLI という、Sequelizeを利用するために役立つコマンドを提供してくれるツールをインストールします。
“`
npm install sequelize-cli
“`

# Sequelizeを初期化する
“`
npx sequelize-cli init
“`

以下のフォルダが作成されます。
|フォルダ|説明|
|—|—|
|config|設定情報を保存するフォルダ。config.jsonという設定ファイルが作成されます。|
|migration|データベースの変更情報を保存するフォルダ。|
|seeders|初期データを保存するフォルダ。|

# SQLite3の設定を追加する
configフォルダのconfig.jsonを編集します。
“`
{
“develop

MarkdownでGoogle Sitesを編集したい

## 完成形

## MarkdownでGoogle Sitesを編集できるスクリプト

https://github.com/tutts/google-sites-markdown

便利なものを置いてくださっている方がいました。上記にて、Google SitesをMarkdownで編集できます。

> Google SitesはテーブルやMarkdownをサポートしていない。このスクリプトを使えば、Google Sites内のHTMLスニペットの中にMarkdownを記述することができる。

> **使用方法**
> – Googleサイトのページを編集中にダブルクリックして、ページオプションを表示させます。
> – <> 埋め込み を選択します。
> – 埋め込みコード] タブに変更します。
> – 以下の例のコードを貼り付けて、Markdo

【のこるんvol.4】3タップ完了LINEフォトアルバム #LINEDC #GAS #AppSheet

## スマホ中の写真　埋もれてない？

過去記事③　：[【のこるんvol.3】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/ddd6d6bf53d7425a8d49)
過去記事②　：[【のこるんvol.2】3タップ完了LINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/69715a210e63625fa3ab)
過去記事①　： [3タップで完了するLINEフォトアルバム](https://qiita.com/okinakamasayoshi/items/1b30f3b8533a61bd2f12)

スマホがこの世に誕生し、写真の撮影枚数はそれ以前の1,500倍に、
1スマホの中に少なくとも1,000枚以上の写真があるそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/e598460d-1c4c-b14b-8370-9c7

はじめての ArcGIS API for JavaScript

今回は ArcGIS API for JavaScript を利用して、以下のような地図アプリを作る方法を解説します。


## 使用するライブラリ・データ

* [ArcGIS API for JavaScript:4.22](https://developers.arcgis.com/javascript/latest/)
* [オープンストリートマップ](https://www.arcgis.com/home/item.html?id=de26a3cf4cc9451298ea173c4b324736)
* [都道府県のGeoJSON](https://hub.arcgis.com/datasets/solutions-esrij::japan-opendata-pref)
* [市区町村のGeoJSON](https://hub.arcgis.com

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

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

“`javascript:takeRight関数の挙動
_.takeRight([1, 2, 3]);
// => [3]

_.takeRight([1, 2, 3], 2);
// => [2, 3]

_.takeRight([1, 2, 3], 5);
// => [1, 2, 3]

_.takeRight([1, 2, 3], 0);
// => []

“`

配列から第2引数分だけ末尾から抽出する。第2引数がない場合は末尾を、０の時は空配列を出力する。
##takeRight関数の課題内容

##takeRight関数に取り組む前の状態
– 引数なしのパターンに応じるにはif,elseを使えばよさそう
– 少し検索すればできそう

##takeRight関数に取り組んだ後の状態
– ifの柔軟な使い方が理解できた
– returnの位置などの理解がまだまだ足りないと感じた
– 解答コードのよ

Webix サンプルコード

最近、久しぶりに`webix`を使う機会があったため、サンプルを作成しました。
作成したサンプルは、github に上げておきました。

####webページ
https://nagajun1.github.io/webix_test/

#サンプルコード
サンプルコードを上げた github の URL はこれです。

https://github.com/NagaJun1/webix_test/tree/webix_test_20220212

コードの中身は以下の通りです。

“`index.html

【コード品質】綺麗なReactコード 中級 7例

# 初めに
– Reactでは，多くのデータを保持，変更し，動的なコンポーネントを表現している．
– データの受取，代入，保持はReact独特な手法によって行われている．

#### 前提
基本: 数行レベルで綺麗なコードが書けること

https://qiita.com/JNJDUNK/items/e040925e546a45a1d913

## 1. 値の受け渡しは簡潔であるか
#### 1-1. 受取：値をまとめて受け取る
“`jsx
const userInfo = {
username: ‘Jnjdunk’,
adress: ‘Tokyo’,
favorite: ‘Travel’,
};

// NG
const username = userInfo.username;
const adress = userInfo.adress;
const favorite = userInfo.favorite;

// ? Good
const { username, adress, favorite } = userInfo;
“`

#### 1-2. 代入：プ

React DnDをタッチデバイス対応にしてみる

最近、業務でReactDnDを利用したドラッグ&ドロップを実装したので、その学びを踏まえて公式ドキュメントの[Sortable Simple](https://react-dnd.github.io/react-dnd/examples/sortable/simple)をタッチデバイス対応にしてみました。
作成したコードは[こちら](https://github.com/souenxx/react-dnd-sample)になります。

本記事の流れ
– ReactDnDとは
– バックエンドモジュール
– ドラッグ&ドロップ実装
– DragLayerによるプレビュー実装

#React DnDとは
Reactでドラッグ&ドロップが実現できるライブラリです。登場は2014年ですが、2022年1月現在も継続的にメンテナンスされており、hooksも提供されています。

![html5backend.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518928/583fcd0c-230b-7c78-764b-

JavaScript Math「floor」「random」

数値（Number型）を変数として定義した後、
そのNumber型変数に「Math」を使うと、その数字をアレンジできます

_コード_

“`
let x=1.56;
x=Math.floor(x);
console.log(x);
“`
出力

“`
1
“`
このように「Math」の後に「floor」を入れて()内に数字変数を入れると
小数点以下切り捨てをしてくれるので出力は「1」がでます

_コード_

“`
let y=1.56;
y=Math.random(y);
console.log(y);
“`
次に「Math」の後に「random」を入れて()内に数字変数を入れると
小数点以下の数字が毎回の表示でランダムに出力してくれます

この２つの組み込み関数である「Mathオブジェクト」を使用して、
０〜９の値をランダムに表示させてみます。
「Math」の後の「floor」「random」を使用して０〜９の値をランダムに出力したい時は

_コード_

“`
let z=1.56;
z=Math.floor(Math.random(z)*10);
console.l

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.