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

一列で終わるJavascriptとアルゴリズム

## 一列で終わるJavascript

1loc.dev.comはウェブ開発(JavaScript)に必要な技術が見られるリアルJavaScript「ライブラリー」である。 利用者は無料で資料を見ることができる。
簡単な例もあり、分かりやすい！


https://1loc.dev/

## 一列で終わるJavascript

ウーバーの開発者trekhlebGitHubには
アルゴリズムが必要な時に有用な情報があふれている。


ビッグデータの分析や統計関連数値を予測するプログラムを実装する段階で、trekhleb G

フロントで電話番号をハイフン付きに変換する

##利用するライブラリについて
ユーザの入力した電話番号に対して、視認性を持たせるためハイフン区切りにしたい、もしくはハイフン付きでAPIサーバに送信する必要があるなど、フロントでハイフン付き電話番号に変換する機会があると思います。

GitHubのGoogleリポジトリに電話番号処理ライブラリ[libphonenumber](https://github.com/google/libphonenumber)があります。
こちらのJS版のデモページで、電話番号とカントリーコード（`JP`）を入力することで動作検証ができます。こちらのデモと同様の挙動を実現する想定です。
[Phone Number Parser Demo](https://htmlpreview.github.io/?https://github.com/google/libphonenumber/blob/master/javascript/i18n/phonenumbers/demo-compiled.html)

JS版の使い方を読むと、コンパイルなどの必要があり直接NPMから利用できずとても面倒です。本家の参照し

困っている方必見！ページトップからある要素までの高さの取得方法

cssにてpositionを使っているときに、“top“や“left“などを％で指定していると、使っている機種によって％の値が変わってきます。

これは厄介。。。

こんな時に役立つのが、Javascriptを使ってページトップからの高さを取得してしまえば、機種によって%の値を変える必要はありません！

結論から言うと、“getBoundingClientRect()“、“pageYOffset“の２つの関数を使います。

それでは使い方を見ていきましょう！！

#要素を取得#

“`index.js
const topToElement = document.getElementsByClassName(‘class-name’)[0]
“`

また、“document.getElementId“などで取得してください

#ページトップからの高さを取得#

“`index.js
const topToElement = document.getElementsByClassName(‘class-name’)[0]
const topToElementHei

Redmineでチケットをコピーした時は開始日と期日をそれぞれ+1日加算したい

#同じ開始日と期日でチケット作ることほぼ無いからね

RedmineをTODOっぽく使ってるマンです。
んで、使ってるうちにこんなことを思いました。

1. 今日のお掃除チケット終了！じゃあ明日用にチケットコピーしようジャマイカ。
2. あれ？コピーしたはずのチケットが見当たらない…。
3. あ、開始日と期日を **1日ずらすの忘れてた** 。
4. 面倒くさいなあ…。

ということで記事タイトルのようなことをやりました。

#ビューカスタマイズプラグイン使うよ

ビューカスタマイズプラグインのインストールまでは下記でやってるので、この記事ではハショリます。
[CentOS8にインストールしたRedmineにビューカスタマイズプラグイン導入](https://qiita.com/waokitsune/items/d08c96bf44b32000981e)

#設定はこんな感じ

**パスのパターン** で絞り込んでおくのが大事。
『このJSって別のページに悪影響あるかな？』を考えなくてよくなるです。
![image.png](https://qiita-image-store.s3.a

JavaScript で文字コードを加減算する方法

自分のサイトがあるのですが、そこを楽曲専用から汎用に大型アップデートしようと思いまして、
そこでリストの番号を

“` text:イメージ
リスト
①text1
②text2
③text3
“`

の様にしたかったんですね。数字が○で囲まれている文字です。
そこで、CSS で

“` CSS:合ってるかは知らないけどこんなの.css
ol li#list1:nth-child(1)::before {
content: “①”;
}
/* :
: */
“`

とか文字列配列作ってインデクスに応じて切り替えたり(？)で出来るんですが、
せっかくなら JavaScript で書きたくなったんですよ。
~~そのままテキストで①、②…と書けばいいものを…~~

#C/C++なら分かるぞ！
と思ったので一応書いておきます。C/C++ での実装の場合のイメージです。

“` cpp:C/C++の場合.cpp
std::string GetNumByCircle(int

JavaScript ベスト・オブ・ザ・イヤー 2020


JavaScriptライブラリのトレンドを紹介している[bestofjs.org](https://bestofjs.org/)が、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。
選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。
過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。

ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、[2019年の総合ランキング](https://qiita.com/rana_kualu/items/4727a0d64657aa837ce3)1位はVue.jsです。

以下は2020年のランキング、[2020

え、意外とみんな知らない！？要素外でクリックしたときにイベントを発火させる方法

皆さんこんにちは！

今サイト制作を行っている際に、ふとドロップダウンメニュー（プルダウンとも呼ぶ）を作っていた時、「要素外でクリックしたときにメニューを閉じたいな～」と思い、１から構築しようとしたけどめちゃだるい！！！

僕がサイト制作を行うときに一番心掛けていることは、「どれだけ楽をして作るか」を日々考えながらやっています。

そんな僕にとって、この機能を１から作るなんて死んでもやりたくもない。。。

Googleで検索したところ、、、

なんとありました！！

パッケージ名は「vue-click-outside」

初めて聞いた

さて、今回はドロップダウンメニューを作りつつ「vue-click-outside」を使っていきたいと思います。

使い方だけ見たいという方は、こちらの[サイト](https://www.npmjs.com/package/vue-click-outside)からご覧ください。

使い方の例も載っているので、分かりやすいかと。

それでは、順を追って一緒に使い方を見ていきましょう！

#パッケージのインストール#

“`
npm i vue-click

卒業研究でQiitaに自分のWebサービスを埋め込みたくなった

タイトルで落ちてる。

#そもそも
Qiitaではiframe要素の埋め込みとか、javascriptの実行とかは基本的にできない。
この辺に関しては[実験記事](https://qiita.com/StealthMinor/items/de6594b1f59963497907)を参照。

#というわけで
ユーザースクリプトで実装することにした。
Qiitaとかnoteとかは勝手にhtml要素を入れたり、あと属性付与したりできない。
付与した場合は勝手に消される。

リンクを張るのに必須のaタグ、その中でも絶対に必要な属性であるhref属性の値を検知させる。

###実際にリンクを張る
[これはWikipediaのリンク。](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)

[これが卒研のwebサービス想定のリンク。](https://gyoubumasataka.github.io/sidecode_hub/redirect.html?https://gyou

Chrome拡張機能を作ってみる

前記事同様、この記事はZennに書いてましたが、難易度的にはQiita向けっぽく思えてきたため、こっちにもも同じもの投稿してちょっと反応見させてもらいます

普段使いのブラウザを自由にカスタマイズできると便利そう
バニラJS経験の多い人間として何ができるか
世にプロダクト出すとして、ササッとお出しできるものはなにかないか

このあたり考えて調べたた結果「Chrome拡張機能作ってみるのが良さそう」という結論に達したので、まず簡単なものから作ってみて、方法を掴んでいくことにしました

# TL;DR
非常に簡単なChrome拡張機能を作る
自分のところにだけ読み込んで試す
これらを通じて実装方法を学ぶ

—–
## 要件定義
拡張機能については、backgroundとか色々ファイルが必要になるということだが、基本的には `manifest.json` （バージョン番号とか、構造をChromeに知らせるとか）と `content.js` （機能を記述）の2つがあれば事足りる、らしく

今回の「簡単に作る」ということから、単にURLを見てなにか返す、くらいでいいか、となったため
「開い

JavaScriptのクラスとJSONの相互変換

#SkayWayでデータを送信したい

SkyWay使ってたらStreamと別のデータを送りたいと思い、クラスをJSON,JSONをクラスに変換したくなった
が、調べても出てこなかったのでメモ

[リファレンス](https://webrtc.ecl.ntt.com/android-reference/classio_1_1skyway_1_1_peer_1_1_room.html#adc87abbe83dff60e6fa322064eff7e48)曰く、`String`と`byte[]`で送信できる

なので、`JSONで文字列→送信して→・・・→文字列で受信→クラスに戻す`を目指す

##送信するクラス
データ内容は自作のクラス

“`Vec.js
class Vec{
constructor(x,y){
this.x = x;
this.y = y;
}
}
Vec.prototype.toString = function(){
return ‘(‘ + this.x + ‘,’ + ‘this.y’ + ‘)’;
}
“`

##送信する関数

【JavaScript】非同期処理と同期処理（コールバック関数・Promise）

## はじめに
非同期処理と同期処理について勉強した内容をまとめます:raised_hands:
まだまだ初心者のため認識が違っているところがあるかもしれません。ご了承ください。

## 同期処理
一つの処理が完了するまで次の処理に進まない処理のことです。

## 非同期処理
同時に複数のタスクを実行できる処理のことです。

## 非同期処理と同期処理をレストランに例えると
**※あくまでイメージです**

**登場人物**
– シェフ:older_man_tone2:（ウェイターさんから受け取った注文を調理する人）
– ウェイターさん:man_tone1:（お客さんからのオーダーを厨房のコックさんに伝える人、また出来上がった料理をお客さんに持っていく人）
– お客さん:woman_tone2::boy_tone1:（ウェイターさんに注文をする人）

### :fork_knife_plate: 非同期レストラン
:raising_hand:テーブルAのお客さん　→ナポリタンを注文する
:man_tone1:ウェイター　→お客さんから注文を聞いて厨房のシェフに伝える
:older_m

【備忘録】Vue：methodsとcomputedの違い

Vueの動作オプションであるmethodsとcomputedの違いに関して

“`
new Vue({
computed: {
…
},
methods: {
…
}
})
“`

## 参考
[これからはじめるVue.js実践入門](https://www.amazon.co.jp/dp/B07WVXRNH3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

## 内容
下記のようなプログラムで違いを説明。
【プログラム内容】
– computedで乱数を表示
– methodsで乱数を表示
– クリックで現在日時を表示

“`html:sample.html
…

<

JavaScriptで数値を任意の文字数のゼロ埋め文字列にする

## 結論

数値のゼロ埋め（zfill, ゼロフィル）にはpadStart()を使いましょう。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

## 本題

「JavaScript zfill」とかで検索しても、“’000′ + String(num)“みたいに文字列をくっつけてからslice()するみたいな手法がたくさん引っかかりますが、今のJavaScriptにはpadStart()という便利な関数がありました。

“`javascript

const num = 123;
console.log(String(num).padStart(5, ‘0’) // ‘00123’
“`

## 使い方

冒頭のリファレンス読めばわかりますが以下のとおりです

“String.prototype.padStart(<目標の文字数>, <目標への不足分を埋める文字>)“

Elixir/PhoenixでTypeScriptを使えるようにする。

下記の前提で書きました。

* docker-composeを使っていてappというコンテナ名
* assets配下にnpm installしている。

# install

“`
docker-compose run app npm install typescript ts-loader source-map-loader @types/phoenix –prefix assets
“`

“`
akito-XPS-13-7390% docker-compose run app npm install typescript ts-loader source-map-loader @types/phoenix –prefix assets
Creating zyuso_app_run … done
npm WARN source-map-loader@2.0.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm

TypeScript入門

もともとflowで型チェックをしていた業務のプロジェクトに、昨年の後半（ちょっと遅いですが、、）からTypeScriptが導入されました。
色々手こずりながら学んでますが、学んだことを備忘録的にまとめてみました。

####そもそもTypeScriptとは？
ざっくりいうと、TypeScriptは「型をつけられるJavaScript」です。
「静的型付け言語」という種別にあたり、変数や定数、関数の引数や戻り値などに「どの型なのか」を指定することができます。

####なぜTypeScriptを使うのか？その恩恵とは？
1. VSコードで強力な入力補完が使えて楽
2. 関数にどんなデータを渡せばよいか、どんなデータが返ってくるかが一目でわかる
3. エラーチェックができる（誤った型のデータを渡したり、渡し忘れたりなど、`型の不整合`を教えてくれるのですぐ間違いに気づける）

まだTS歴浅いのですが、３がTSを使う最大の価値と思いますし、実際多くの場でそう言われます。

以下、TSの公式から引用：

“`
型は、コードの品質と読みやすさを高めることがGoogle、Microsoft、F

TypeScript never型

# never型概要
>プログラミング言語の設計には、bottom型の概念があります。それは、データフロー解析を行うと現れるものです。TypeScriptはデータフロー解析(?)を実行するので、決して起こりえないようなものを確実に表現する必要があります。
– [TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/type-system/never)

これを読んでみても意味が分からなかったため具体例を簡単に挙げてみようと思います。

# never型を使用する場面
+ **常に**errorをthrowする場合

“`.ts
function error(message: string): never {
throw new Error(message)
}
“`
+ whileの中で戻り値がなく、無限ループする場合

“`.ts
function error(message: string): never {
while(true) {}
}
“`

# never型が使

オープンストリートマップとGoogleスプレッドシートを利用した、簡単にデータを更新できるマップツール

#はじめに
　こちらの[Googleスプレッドシートを利用した、たぶん史上最も簡単にデータを更新できるマップツール](https://qiita.com/champierre/items/e7758b69b39476148492)を参考に、[オープンストリートマップ](https://openstreetmap.jp/ “openstreetmap”)でも同じことをやってみました。オープンストリートマップを表示させるためには[leaflet](https://leafletjs.com/)を利用しました。

#leaflet
　leafletとは地図データを扱うためのJavaScript ライブラリです。公式のチュートリアルや[こちらの記事](https://qiita.com/TakeshiNickOsanai/items/783caa9f31bcf762da16 “Leaflet + OpenStreetMap で地図情報を扱うサンプルコード”)を参考にしました。

#作成サイト
[デモサイトはこちら](https://marronest.com/sheet2osm/)
![デモサ

色相差固定で３色選べるカラーパレットつくってみた

# 画面キャプチャ


# できたもの

つかいかた

– マウスで`canvas`（色の円のあたり）をクリックすると、色情報が表示され、色相と彩度をスライダでも調整できるようになります。
– 色相Aとマウス操作（左ボタンクリックとドラッグ）が連動します。マウスで操作した場合、もしくは色相Aをスライダで操作した場合、色相Bと色相Cの色が相対値を保って追従します。

【JavaScript】非同期処理とasync/await ~難しいこと抜きで、まず使いはじめるための知識~ ( ´ε` )?

#この記事について
この記事は、非同期処理のことをほとんど知らなかった方や、
async/awaitを使ったコードをとりあえず書いてみて覚えたいという方のために、
使用上問題ないレベルで理解してもらえるよう、カンタンに説明させていただきたいと思います。

コードを読むときに「何をしたいのかわかる」
コードを書くときに「とりあえず使ってみる」
程度のレベルまで理解していただければOKという、ゆるい説明になります。
正しい知識を追求したい場合は、各自で行っていただければと思います。
（そして共有してください♡）

ちなみに、async/awaitを使わない非同期処理の書き方については、あまり知見がありません。
（自分がプログラミングを学び始める時点で、すでにasync/awaitが誕生していたため。）
予めご承知おきください。

#非同期処理とは「上から順番に実行されるわけではない処理」のことです。
JavaScriptのコードは基本的に上から順番に実行されます。
しかしJavaScriptの中には一部、このルールを無視する処理が存在します！
この「上から順番に実行されるわけではない処理」

JavaScriptからPHPのサーバに文字列を引数にしてWebAPIを実行する例

#クライアント側のhtmlファイル

“`html

WebAPI実行

ここにWebAPIの結果が入ります