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

Safari で Bookmarklet に ‘%’ が含まれていると動かない【Safari】

## はじめに

　前回のブックマークレットの記事を書いている途中で、Safari で動作確認をした際に、どうも動かないなあと思ったので調べてみました。

　Safari 限定です。確認した Safari のバージョンは14.1.2(15611.3.10.1.5, 15611)です。

## 動かない Bookmarklet

　以下のブックマークレットは動きませんでした。開発ツールのコンソールでは、期待通り最初の `alert();` が実行されますが、ブックマークレットにすると動きません。

“`javascript
javascript:(function(){alert();return;const s=’a’;var a=’a’.replaceAll(s,’%’+’20’).replaceAll(‘/’,’%’+’2F’);})();
“`

　`return;` が入っているので、そこまでは動いて欲しい気がしたのですが、動きません。

## 動くようにするには

　どうも `’%’` が問題になっているようで、以下のようにしたら動作しました。

“`javascrip

H27国勢調査のODデータ（自宅外就業者数及び通学者数）をdeck.glで表示してみました

# はじめに
– H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）を[deck.gl](https://deck.gl/)で表示してみました
– H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）は、[e-stat](https://www.e-stat.go.jp/)より[統計データ](https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200521&tstat=000001080615&cycle=0&tclass1=000001101935&tclass2=000001101936&tclass3val=0)をダウンロードして用いています。
– deck.glの表示には、[ArcLayer](https://deck.gl/docs/api-reference/layers/arc-layer)及び[TextLayer](https://deck.gl/docs/api-reference/

Async/Await入門 resolve()の引数に値を入れよう

前に投稿したこの記事では、Async/Awaitについて必要最低限の解説を行いました。
[Javascript初級者がAsync/Awaitが使えるようになる記事](https://qiita.com/aulait/items/c245ee7c4a11bda939ae)

今回は、**resolve()に値を入れるとどうなるか**ということで解説をし、そして**resolveに値を入れることの何が嬉しいのか**も解説します。
# resolve()に値を入れるとどうなるか？

“`javascript
const timer=(time)=>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, time);
});
}
(async function(){
$(‘.春はあけぼの’).fadeIn();
await timer(1000);
$(‘.やうやうしろくなりゆく山ぎは’).fa

JavaScriptでシンタックスハイライト

#はじめに
私は思いました。JavaScriptでシンタックスハイライトがしたいと。ということで作りました。
ちなみにJavaScriptは初心者です。「何だこの馬鹿なやり方はww」とか「もっと綺麗にコード書けよ」って思った方は是非教えて下さい

#実装
やり方が思いつかなかったので、`class=”code”`が指定されてるところのinnerHTMLをいじることにしました。

1. `class=”code”`を全て取得
1. それらを読んでいって1文字ずつの色のデータを
color配列にプッシュ
1. それをもとに一文字ずつ色をセット

⋯もっと良い方法ありそうだけどとりあえずこれで

#コード

“`script.js

function setColor(){
code=document.
getElementsByClassName(“code”);
for(c of code){
let s=c.innerHTML;
for(let i=0;i

Quillで入力した画像をjsで取得する方法

# 結論
以下のように取得したDELTA形式のデータをJSONとして扱い、画像データ部分を取得する。

“` javascript:概念コード.js
var quill = new Quill();
var contents = quill.getContents();//エディタに入力されている全内容の取得 DELTA形式

var img = new Image();
img.src = contents[“ops”][“insert”][“image”] //DELTA形式はJSONと同様に扱えばいい
“`

# [Quill](https://quilljs.com/)って？
Ctrl＋Vによる画像貼り付けにも対応したWYSIWIG テキストエディタ のインターフェースです。
簡単なhtml+jsで以下のようなテキストエディタUIをWEBページに埋め込むことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26413/31177ba8-b49e-9559-9891-

【最初に読む】Typescriptってなぁに？？？

TypeScriptとは何でしょうか？
簡単に説明します。

2017年にはGoogleの標準開発言語となりました。
今注目されている将来性のある言語なので、知って損のない情報です。

#対象者
・JavaScriptを知っている方
・TypeScriptと聞いて初めて調べる方
・プログラミング基礎知識のある方

#TypeScriptとは（すごく簡単に）
初めてTypeScriptという言葉を聞く方は複雑に考えても難しいので、とりあえず　
・**TypeScriptはJavaScript**　
と考えましょう。（正確には異なるものです。）

#TypeScriptとは（もう少し詳しく）
正確にはTypeScript＝JavaScriptではありません。
・**JavaScriptの上位互換**。
・TypeScriptは**JavaScriptを拡張して作られたプログラミング言語**。
・TypeScriptを**コンパイルするとJavaScriptのコード**になる。

#重要な特徴（上位互換といわれる所以）
・JavaScriptでは動的型付けだが、TypeScriptでは**

【Jest】非同期処理のテストを書こう~Promiseとasync/await~

# 非同期処理のテストを書こう
Jestを使った非同期処理のテストのテストをまとめたいと思います。
プロジェクトでは、Promiseとasync/awaitを使った非同期処理を書くことが多いのでこの２点のテストコードをまとました。

## Promiseのテストの書き方
* [公式ドキュメント](https://jestjs.io/ja/docs/asynchronous#promises)
* “`.resolves関数“`を利用することでPromiseが処理され、“` Promise.resolve“`が実行された値を評価することができます。
* “`return“`を省略した場合、テストはfetchDataがresolveされpromiseが返ってくる前に実行されます

“`javascript:assertion.test.js
const fetchData = () => Promise.resolve(“hoge”);

test(“resolves to hoge”, () => {
return expect(fetchData()).resolve

Frontend Roadmap 2021 で一人前のフロントエンドエンジニアになる

はじめまして、21新卒エンジニアです?
今年の4月からエンジニアとして就職して約半年が経ちました。
この半年間で自分の無知さを痛感しています。
そこで…

# Web Developer Roadmap
Web Developer Roadmapとは、毎年ウェブエンジニアになるためのロードマップをまとめてくださっているプロジェクトです。
私のように何から手をつけていいのか分からない初学者にはとてもありがたい道標になると思いました。
今回はその中の**Frontend Roadmap**に則って学習を進めて、一人前のフロントエンドエンジニアを目指したいと思います?

https://github.com/kamranahmedse/developer-roadmap

## Fronend Roadmap 2021
![image.png](

エラトステネスの篩

#ソースコード

“`javascript
function primesvalue(n){
// サイズnのブーリアン値trueを持つリストを作成
let cache = [];
for(let i = 0; i < n; i++) { cache.push(true); } // ステップを√n回繰り返します。 for (let currentPrime = 2; currentPrime < Math.ceil(Math.sqrt(n)); currentPrime++){ if (!cache[currentPrime]) continue; let i = 2; let ip = i * currentPrime; while (ip < n){ cache[ip] = false; // i*pをアップデートします。 i += 1; ip = i *

【個人開発】さんまを焼くだけのアプリのさんまの焼き具合の調整方法についてまとめてみた

# はじめに
以下のアプリについて、焼き具合の調整ってどうやってるの？と何人かに聞かれたので書くことにしました。

https://gifted-curran-aecac2.netlify.app/

https://qiita.com/cabacho/items/1b3d4565f8f40aa52873

# 流れ
まず、画像を全て重なるように、positionで指定して重ねます。
そしてz-indexで画像の優先順位を指定します。
そうすることで、一番上に表示されてる画像をcssのanimationとkeyframeを使って、徐々にopacity: 0;にすると下の画像が浮き上がってきます。
生の状態のさんま(一番上に表示されるようにする)
焼きの状態のさんま(二番目に表示されるようにする)
焦げた状態のさんま(三番目に表示されるようにする)
の3枚を重ねて、時間をずらして順次表示されるようにすることで焼き色の変化を実現しています。

## コード

index.html

“`html

bootstrapのモーダルとautosizeの組み合わせ

# やりたいこと

bootstrapモーダル内のtextareaに対してautosizeメソッドを適用させたい。

※autosizeとは
textareaの高さを自動調節してくれるプラグイン。詳しくはこちら。

https://www.jacklmoore.com/autosize/

# 課題

モーダル出現時にautosizeを適用させても、高さが自動調節してくれない。
適用はできているようだが、もともと長文のデータがあった場合に、それに合わせた高さにならないため、最初は全文が見えない状態になる（改行を入れると自動調節される）。

# ソースコード(失敗例)

“`html


ボタン

“`

“

【個人開発】「お好み焼きをひっくり返すだけのアプリ」をPC対応にするついでにVueで作り直してみた

# はじめに

https://qiita.com/cabacho/items/38cb8ce97c877d36d4dc

について、PCでの対応をするために調整する予定でしたが、ついでにVueで作り直してみました。
約１日かかりましたが、なんとか形にしました。

https://zen-sinoussi-c18c33.netlify.app/

#　使用技術
フレームワーク：Vue.js
UIフレームワーク：Vuetify
ライブラリ：vue2-touch-events

# デプロイ
Netlify

# 作り直してみての感想
程よい感じにVueの勉強になりましたが、このくらいの規模感だと、フレームワークなしの方が動き的にもスムーズな感じがしました。
ちなみにデバイスの分岐はこんな感じにしましたが、多分もっと綺麗な書き方があると思うので順次いじっていきたいと思います。

“`javascript
swipeStart: function (e) {
const isTouchDevice = window.ontouchstart !== undefined;
// デバ

Vue3 day.js で