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

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. を無理やり克服する

#概要

“`
Access to image at ‘https://{URL} from origin ‘https://{ドメイン}’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
“`
S3 に画像や動画を展開した際に、稀によく出るこのメッセージ。
ブラウザ上で表示は出来ているのに、javascriptで画像などを利用しようとするとエラーとなり、苦い思いもしたので備忘録として対応を残しておきます。

##症状
* 上記のエラーが出たり出なかったり。
* ブラウザを変えたり、シークレットモードで表示するとエラーが出なくなったりもする。

##原因
このエラーメッセ

辞書(dict)型データを、Spreadsheetに取り込む。SmartHRのデータを想定

# この記事は何？
SmartHRデータ加工入門として作った記事の第3弾であり、最後の記事です。
https://qiita.com/piyoSakai/items/2982fb7511331e56f8fb
https://qiita.com/piyoSakai/items/21efd055635b92d14a7a

# サンプルコード
[こちらの記事](https://qiita.com/piyoSakai/items/21efd055635b92d14a7a)で加工したデータを、Spreadsheetに突っ込む。

“`javascript
const LOADING_SHEET_NAME = ‘Crews’; //ここは各自のシート名に合わせる

function crews_to_list(crews){
let col = []
for(let c of crews){
let row = [
c[‘email’],
c[‘last_name’],
c[‘first_name’],
c[‘position’],

SmartHRのデータを上手に加工する

# サンプルコード
[こちらの記事](https://qiita.com/piyoSakai/items/2982fb7511331e56f8fb)で取得したデータを、扱いやすいように加工する。
特に部署情報について、階層構造をフラットにし、情報をタテ持ちする。

“` javascript
function get_top_depertment(depertment, prev_depertment = null){
if(depertment !== null){
result = get_top_depertment(depertment[‘parent’], depertment);
return result;
}else{
return prev_depertment;
}
}

function get_middle_depertment(depertment, prev_depertment = null, prev_prev_depertment = null){
if(depertme

SmartHRのデータをGASで引っ張ってくるサンプル

# 前提
[公式ドキュメント](https://developer.smarthr.jp/api/index.html#!/%E5%BE%93%E6%A5%AD%E5%93%A1/putV1CrewsIdInvite)を見るのが一番いいですが、初心者向けに。

# サンプルコード
従業員全員の情報を引っ張ってくるサンプル

“`javascript
const TENANT_ID = ‘YOUR_COMPANIYS_TENANT_ID’;
const ACCESS_TOKEN = ‘YOUR_ACCESS_TOKEN’;
const STAY_SECOND = 1;

function is_last_page(headers){
try{
links = headers[‘link’]; //nextのURL表記が最終ページで無くなる
if(‘next’ in links){
return false;
}else{
return true;
}
}cat

セレクトボックスで選択したテキスト情報を出力する

このようなセレクトボックスとテキストボックスがあったとする
セレクトボックスの中身はこう

htmlソースは以下

“`hanninsagashi.html

犯人
本人夫「マイクロサービスパターン」の復習 6章

## 概要

– Java読書会でせっかく勉強したのにつぎつぎと忘れていくので、印象に残ったところを記録していく

http://www.javareading.com/bof/

## 6章 イベントソーシングを使ったビジネスロジックの開発

モデリングした結果を反映したテーブルを作るのではなく、エンティティに対する生成・更新イベントをDBに記録していくという話
https://microservices.io/patterns/data/event-sourcing.html

### 従来のアプローチ

– やり方
– なんらかモデリング
– 対応するクラスを作る
– 対応するテーブル作る
– ORマッパーでテーブルとクラスをつなぐ
– 欠点
– 履歴が残らない
– 後付で履歴つくるのは大変
– 生成・更新イベントも後付

### イベントソーシング

– やり方
– モデリングはする
– 対応するクラスは作る
– でも永続化するのは、生成・更新イベントのみ（永続化用のテーブルをイベントストアと呼ぶ

元記事を表示

Hardhatでpolygonテストネットワークへのデプロイ方法まとめ

## 概要
hardhatで作成したdappsをAlchemyを用いてPolygonテストネットワーク（Mumbai）にデプロイするまでのまとめ

– [Hardhat](https://hardhat.org/getting-started/)
– [Alchemy](https://dashboard.alchemyapi.io/)
– [polygonscan](https://polygonscan.com/)

## 1. MetamaskにPolygonテストネットワークの設定をする
以下リンク先の通りに設定

https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask#using-polygonscan

## 2. テストネット用のトークンを取得する
以下リンク先で取得できる

https://faucet.polygon.technology/

![スクリーンショット_2022-02-23_22_20_19.png](https://qiita-image-stor

元記事を表示

【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.join関数

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

“`javascript:_.join関数の挙動
_.join([‘a’, ‘b’, ‘c’], ‘~’);
// => ‘a~b~c’
“`
第1引数の配列の要素の間に、第2引数を追加していく
第2引数がなければ初期値の`’,’`が追加される
##_.join関数の課題内容

##_.join関数に取り組む前の状態
– 配列に任意の位置に順番に挿入するには`splice`を使えばよさそう
– 普段通りの`for(let i = 0; i < array.length; i++)`でよさそう ##_.join関数に取り組んだ後の状態 - かなり強引に実装している - forループにspliceを用いてインクリメントした結果、当初ループの条件を`i < array.length`としていたため無限ループとなってしまった - 無限ループを改善できた後も、変わりゆく配列の要素数に`i`の2個飛ばしで無理やり対応させてしまった -

元記事を表示

ワイ「Denoってなんぞや？」

# ?「やあ」
ワイ「前回はNode.jsについて知見を得たな」
ワイ「どんどん最強ぷよぐらまに近づいてまうで＾＾」
?「やあ」
ワイ「急になんやこの恐竜」
ワイ「某J民か？」
?「あんなのと一緒にしないでよ」
?「僕は**Deno**だよ」
ワイ「誰だよ（ピネ」
?「**Node.js**の親戚みたいなものさ」
ワイ「Node.jsくんにも親戚がおったんか」
ワイ「初耳やわ（ﾊﾅﾎｼﾞ」

# ?「Denoについて」
?「Node.jsのついでに知ってもらおうと思って」
?「今ここにいるんだ」
ワイ「ほーん　しゃあない聞いたるわ」
?「……」
?「**Deno(ディーノ)** はRyan Dahlによって作られた比較的新しいJavascript/Typescriptランタイムだよ」
ワイ「誰やその人」
?「**Node.js** を作った

元記事を表示

SVG イメージを JavaScript から保存する方法

[GitHub に Mermaid がサポートされるようになった](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
)ので、マークダウン中にいい感じのグラフを描画できるようになりましたね。
しかし、 Mermaid で作成される画像は SVG 形式なので、ブラウザからだと「名前をつけて画像を保存」ができません。

この記事は、いい感じの図ができたから Slack で共有しようと思ったのに、保存できなくて焦った人など向けに作ったものです。
最後の方でブラウザの開発者ツールの話が出ますが、そこから HTML 文書をコピペするだけでいいのでは? と思いつく方は対象にしておりません。ごめんなさい。

# TL;DR

サンプルが以下です。

クリップボードを共有するPWAアプリの作成

WindowsとAndroidでテキストを共有したいことがよくあり、最近はMacやiPhoneとも共有することが増えてきたので、クリップボードのテキストを共有するPWAアプリを作成します。
PWAにすれば、アプリっぽく使えるのと、後程示すショートカットが便利だったりします。


以下のGitHubにソースコードを上げておきます。

poruruba/ClipShare

https://github.com/poruruba/ClipShare

#テキストの共有方法

単に、Node.jsサーバを立ち上げて、テキストを保持するようにし、HTTP Post呼び出して、Set/Getするようにしているだけです。
ソースコードを載せますが、大したことはやっていません。
一応、セキュリティを考慮して、APIKeyがあっていないと受け付けないようにするの

元記事を表示

APIから気象情報を取得してグラフ化

#はじめに
OpenWeatherMapAPIから気象情報を取得してChart.jsを使ってグラフ化してみました。
例として、「現在の時刻から24h後までの東京都の気温の変化」を取得します。

環境
– Laravel6系(PHP)
– OpenWeatherMapAPI
– Chart.js(JavaScriptライブラリ)

##ソースコード例
“`ChartController.php
‘各自で取得’,
‘lat’ => ‘26.231408’, //沖縄の那覇市の緯度
‘l

元記事を表示

【個人開発】嫁ブロックを突破するアプリをつくました。

### はじめに

こんにちわ！くのと申します！

エンジニアの方ってガジェット好きな方多いですよね！！

しかしながら、エンジニアにとってガジェットを購入するために突破しなければいけない壁っていくつかありますよね。。。

突然ですが、2022年に実施されたガジェット購入時における障壁ランキングの堂々の第４位は何かご存知でしょうか！！？？

。。。そうですね！！それは「嫁ブロック」問題ですね！！
（すいません、これは僕の妄想アンケートの結果です。）

というわけで、嫁ブロックを突破し、高スペックなマシンをゲットして、強強エンジニアを目指すクソアプリを開発してみました！！

### アプリ概要
スタートから、5秒以内にボタンを連打して嫁ブロックを突破するアプリです。
＊連打回数が少ないと嫁ブロックは突破できないので、注意してくださいね。

嫁ブロックを突破するゲーム

https://infallible-chandrasekhar-86218b.netlify.app/

＊スマホ向けにデザインしていますので、スマホの方が遊びやすくなっております。

使用技術
・HTML・CS

元記事を表示

[JavaScript][メモ]popstateイベントをサンプルコードで挙動確認

# はじめに

（注）「～が解決した」みたいな記事じゃなくて、popstateイベントについてのメモです。

業務中、とある画面でブラウザボタンを押すとbfcache（ブラウザバック時に使うキャッシュ）が悪さをして、想定外の挙動をしてしまう、という状態だった

## 状況

A画面

①↓　↑②　↓③

B画面

①ボタンを押して画面遷移（POST送信による遷移）

②ブラウザバックで画面遷移

③再度ボタンを押して画面遷移→①でキャッシュに保存された値でリクエストしてしまいエラー
（具体的には、楽観ロックエラー）

## 対応策としてのpopstateイベント

この時に②でブラウザバックで遷移後、この「ブラウザバックしたこと」を検知して、ブラウザバックしたのであれば、強制的にリロードしてしまおう、と考えました。

## サンプルコードで試してみる

いくつか記事を拝見しましたが、自分の理解力が乏しく自分のやりたいように動いてくれるかわからなかったので、サンプルコードを自作して挙動を確認

### A画面

“`html

HTML+CSS+JSで電卓を作ってみた※ウェブカツブログ記事参照

#経緯
Javascriptのトレーニングを兼ねて何か作りたいなーと思い、ネット記事を漁っていると…

ウェブカツというブログが簡易的な電卓の作り方を掲載していたので、早速取り組んでみることに。下記URL参照。

JavaScriptを使用した簡単な電卓の作り方【サンプルコード＋解説付き】

自身で作成してみたので、学習のアウトプットとして自身なりの解釈を交えながらご紹介したいと思います。

#対象者
・HTML、CSSをProgate等で一通り学んでいる方。
・Javascriptを少し齧り始めた方。
・Javascriptでどんなことができるのか興味のある方。

今回紹介・作成するものは非常に簡易的なものになるので、複雑で高度な技術は一切必要ございません。

#作成物

ブラウザ上で

元記事を表示

[JS]IF文の省略

###JavaScriptのIF文の省略形
—
下記のYoutubeを参考にWebアプリケーションを作成している際に
学習の過程で見たことのなかった構文が使用されていたので紹介します。

初期段階ではこのように1~9秒の時に01~09の表記になっていません


完成図はこちらになります。

01~09の表示にするためにaddZeroという関数を作成します。

“`main.js
function addZero(n) {
return(parseInt(

元記事を表示

トーナメント表作成HTML(まとめ)

## はじめに
この記事はまとめページの予定です。
内容を小分けにして各ページでコード及び簡単な解説をつけたいと思います。
最終的には以下のようなものができます↓。

## リンク
各ページのリンクです
番号順に見ていけば混乱なく読める…と、思いたいです。

１. [実装機能イメージ、ベースのHTML](https://qiita.com/hujinori/private/35c085d386fe289badcd)

https://qiita.com/hujinori/private/35c085d386fe289badcd

２. -工事中-[Canvas(HTML5)の操作]()
３. -工事中-[トーナメント表の構築(DOM要素の配置)]()
４. -工事中-[トーナメント表の線引き]()
５. -工事中-[ト

元記事を表示

[OutSystems]コールバック関数を渡すと自動的にログを取ってくれるClient Action作ってみた

[前回の記事](https://qiita.com/shoji9x9/items/9d316baabbd6b2a49b3d)でClient Actionにはコールバック関数を引数として渡せることがわかったので、今回は実際に役立ちそうな処理を作ってみました。

# 作ったもの
## 引数

* Function（Object型）：実際に実行したい関数
* Arguments（Text型）：その関数に渡す引数（JSON）
* Result（Long Integer型）：関数実行結果（今回は例ではテーブルに登録したレコードのid）

## メイン処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337041/89adf551-bf2e-e165-dca

元記事を表示

EJS記法まとめ

## `<%= ~ %>` 出力タグ(エスケープあり)

変数をエスケープして出力する。
変数に禁則文字(<や&など)を含む場合に自動的にエスケープされる。 ```html
<% const name = 'John' %>

Hello, <%= name %>.

Hello, <%= 'Mr. ' + name %>.

“`

“`html

Hello, John.

Hello, Mr. John.

“`

## `<%- ~ %>` 出力タグ(エスケープなし)

変数をエスケープせずに出力する。(利用時はXSS攻撃に配慮すること)

“`html

<% const myHtml = 'Timothy‘ %>
<% const myMaliciousHtml = '

‘ %>

元記事を表示

本のバーコードを読み取ってNotionで読書録を作成するアプリを作ってみた

# はじめに

はじめまして。インディーゲームを作っております、nyorokoと申します。
ゲームづくりの他に読書が好きで、「読書録を簡単に作成・管理することはできないか？」という問題意識があり、タイトルの通りのアプリを作ってみました。

# 完成したもの

以前Notion APIを用いて、

本のバーコードを読み取る
→ISBNを取得する
→ISBNから本の情報を取得する
→Notionのデータベースに追加する

という一連の動作を行うアプリを開発しました??(´･_･`??) pic.twitter.com/GqPBPV7sin

— nyoroko (@nyoroko_nyoro)