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

長方形の画像データをcanvasで回転させるのにぐだった話

###要件
**“html2canvas“で得た画像データを90度回転させる。**

###詳細
html2canvasはページ一部の領域をhtml,css解読してスクリーンショット取ってくれる神ライブラリ。
今回は作品を紹介するような紹介カードを作れるという機能を実装したが、PC版で最初にやってしまったためスマホで同じサイズ比のカードテンプレートを作ろうと思うと90度回転しなければならなくなった。

“html2canvas“の場合、対象領域の“HTMLelement“を渡すとコールバックで“canvas“を渡してくれるが、この時点で**幅・高さ・向き**は決定してしまっているため、なかなか編集に手こずった。
コンテキストを回転させる方法は“ctx.rotate“という。これは分かっていたのだが、そのまま適応させても

JSで、別々のキーに同じ値を割り当ててオブジェクトを作る(array → object)

複数カラム検索の時に、別々のkeyに同じ値のvalueを割り当てて
リクエストパラメーターとして渡したいときとかに:santa:

# Object.fromEntriesを使用

“`sample.js
const searchText = “hoge”;
const keys = [‘name’, ‘age’, ‘email’]
const reqParams = Object.fromEntries(keys.map((key) => [key, searchText]));
// => { name: “hoge”, age: “hoge”, email: “hoge”}
“`

ポイントは Object.fromEntriesの引数に、`[[key, value]]`の形をつくってあげると、オブジェクトになる点です。

↓下記と同じですが、keyが4個以上とかになると、prettierで改行されて行数がかさむので、オブジェクトの生成はワンライナーで書きたくなりました。

“`sample.js
const searchText = “hoge”;
const keys

Twitterでいいねしたツイートを、フォルダ分けする方法

#1.はじめに
この記事は、自分の課題解決の備忘録です。
僕と同様に『いいねしたツイートをフォルダ分けしたり、検索出来るようにしたい』と思っている方の手助けになれば、とても嬉しいです。

#2.開発理由と背景

『Twitterのブックマーク欄って、フォルダ分け出来ないし検索機能もないから、まあまあ不便なんだよな～。プログラミングってやつを使えば、フォルダ分け機能とか作れたりするのかな』と思ったからです。

よくよく調べてみると、
・TwitterAPIとスプレッドシート、GoogleAppsScriptというプログラミング言語（以下GAS）の3つを使えば、それっぽいものが作れそう。
・TwitterAPIを利用して、自分がブクマしたツイートを扱うことは出来ない。
・TwitterAPIを利用して、自分がいいねしたツイートは扱うことが出来る。
ということが分かりました。

なので、ブクマしたツイートではなく、自分がいいねしたツイートを、GASを使ってスプレッドシートに出力、整理、蓄積することにしました。

#3.理想の状態
・ツイート本文の内容や、ユーザー名、ツイートのジャンルによっ

HTMLとJavaScriptだけで複数の画像ファイルのアップロードとプレビュー

#はじめに
HTMLとJavaScriptを用いて複数画像のアップロードとプレビューを行うWebサイトを作成するにあたって，Web検索したところあまり記事がヒットしなかったため自作したプログラムを公開しようと考えました．JQueryなどは使わず，素のJavaScriptで作成しました．
JavaScriptについての知識が浅いため，スマートでない部分もあるかと思います．

#仕様
1. HTMLとJavaScriptのみで実装する．
1. 画像を複数枚同時に投稿できる．
1. 投稿した画像は横並びにプレビュー表示される
1. 削除ボタンを押すとプレビューから削除される

“`:フォルダ構成
．
├─index.html
├─js/
　　└─main.js
├─css/
　　└─style.css
“`

#HTMLで雛形を作る

まずは，HTMLで雛形を作っていきます．
ファイルアップロードのためのフォームと，空のdivタグを置いておきます．

“`html:index.html

JavaScriptの仕組みを学べばエラーは解決できる

## なぜ仕組みを学ぶのか
自分の書いたコードがなぜエラーを出しているのか理解できていますか？
なぜそのような挙動になるのか、なぜReactやVueなどのフレームワークを理解できないのか。

フレームワークを扱うには根幹となるJavaScriptの基礎と仕組みの理解が必要です。
基礎無くしてはプログラムは書けず仕組みの理解がなくてはエラーを解決することは不可能で、より多くの時間を損失することになってしまいます。

JavaScriptの仕組みを理解することで不可解なエラーにも対処でき、他人の書いたコードの挙動を理解することができ、遠回りに見えたとしても仕組みを学び学習の下地を作ることで、効率的に学習を進めることが可能となります。

## JavaScriptの仕組み
### 実行コンテキストとグローバルコンテキスト
コンテキストとは、コードを実装する際の文脈・状況という意味で用いられます。
カンタンにいうと、「そのコードがどのような状況で実行されているか」を表す言葉となります。

### グローバルコンテキスト
関数やif文などの中に入っていない。
jsファイルにおける何も囲まれていな

Chrome拡張機能の実践：データ保存と活用

[以前の記事](https://qiita.com/Daken91/items/5b651fa159d5315154ac)で、Chrome拡張機能自体の作成についてを実践することができたので、続いてもう一歩踏み込んだところとして、`chrome.storage.local/sync.set/get` を用いた「データの保存」「（保存した）データの使用」について実践してみます

# TL;DR
`chrome.storage.local.set` , `chrome.storage.local.get` の実践
実践を通じて自分でわかったこと

## 完成形
[GitHubレポジトリ](https://github.com/Daken91/Daken_PlainProducts/tree/main/profileFormWriter)に配置しました

## 要件定義
「データを保存」「（保存した）データの使用」が必要になるプロダクトを作る必要がある
そのため、以前から面倒だと思っていた点として、たまにやっていた「[アンケート](https://c.myjcom.jp/user/tokyo

Symbol from NEM のブロック生成を観察する

Symbol from NEM のコミュニティによるテストが実施されます。
ぜひ、このイベントのタイミングでブロックチェーンのロールバックとファイナライズをリアルに体感しましょう。とくにNEMでの決済を検討している方は、どのタイミングで送金が確定されるのかを知ることはとても大切なことですので、頭で理解するだけではなくブロックの生まれて、そして一部が消えて、永遠に残り続ける様子を一度は観察しておきましょう。

まず、接続するノードを選択します。
https://symbolnodes.org/nodes_testnet/

できればVotingノードを選択しましょう(ガンガンファイナライズするので)。ブラウザでアクセスしてコンソールを開きます。

##### ライブラリの埋め込み
“`js
NODE = “http://[選択したノードのURL]:3000”;

(script = document.createElement(‘script’)).src = ‘https://xembook.github.io/nem2-browserify/symbol-sdk-0.23.0.js

Node.jsの基礎


# Node.js

### イベントループによる並行処理
Node.jsの第一の特徴としてあげられるのは、並行処理をマルチスレッドではなくイベントループによって実現するというものです。イベントループは単一のスレッド（シングルスレッド）で動作するため、マルチスレッドのようなリクエスト数の増大に伴う問題が起きづらくなっています。
　イベントループは実行すべきタスクをキューに積み、これを１つづつ取り出してシングルスレッドで実行していきます。逐次処理のようですが、これで並行処理を実現できるのは、ここでのタスクが一連の処理をI/Oの発生するタイミングを境に分割した物だからです。プログラムはI/O実行時にその完了後のタスクを指定し、実際にI/Oが完了すると指定されたタスクがキューに追加されます。

# Ecmascript, Web標準
JavaScri

Vue+Vuetifyで共通のボタンコンポーネントを作成する

ボタンのデザインを統一したり、連打防止の処理をいれたり、ボタンを押したときの共通の処理のためにボタンをコンポーネントにして使ってみる

“`vue:ボタンコンポーネント（例）