【JS】オブジェクト内の要素をキーにして並べ替え

## やりたいこと
以下のようなオブジェクトがあったとします。
今回は各メンバーをscoreの高い順に並べ替えたいと思います。
“`
let member = {
0 : {name : ‘タナカ’, score : ’70’},
1 : {name : ‘ヤマダ’, score : ’80’},
2 : {name : ‘スズキ’, score : ‘100’},
3 : {name : ‘サトウ’, score : ’60’},
4 : {name : ‘ヨシダ’, score : ’75’}
}
“`
今回は各メンバーをscoreの高い順に並べ替えたいと思います。

## 実装
以下のようにすることで並べ替えることができます。
“`js
let result = Object.keys(member)
.map(function (key) {
return member[key]
})
.sort(fu

Reactを基本からまとめてみた【30】【import や constで{} を使う時使わない時】

## 【React】import や constで{} を使う時使わない時の違い

##### export defaultで公開してある（コンポーネントなど）
⇨ 中括弧なしでimportできる

##### exportで公開してある（関数やフックなど）
⇨ 中括弧をつけてimport

“`
// import時
import hogehoge from ‘fugafuga’ //①
import { hogehoge } from ‘fugafuga’//②
// const宣言時
const hoge = hogehogehoge//③
const { fuga } = fugafugafuga//④
“`
##### import時（モジュール機能）
① fugafugaの中でexportする時、export defaultで公開してある。この場合、中括弧なしでimportできる。またimport時に任意の名前に変更可能である。 しかしexport default が使用できるのは1ファイルにつき1個まで。
② fugafugaの中でexportする時、

Dockerコンテナ上でPuppeteerの実装

# 1.はじめに
Webスクレイピングにおいて、用いるツールとして、Selenium, BeautifulSoupなど様々ありますが、JavaScriptにおいてはPuppeteerも代表的なスクレイピングツールとなっております。しかし、PuppeteerはローカルでChromium(google chromeやmicrosoft edgeも)を動かすことを想定されているので、Docker上での実行は少し複雑な手順を踏まなければならない

# 2.前提
### 2-1.puppeteer
今回はDockerを用いた記述方法なので、ローカルでpuppeteerを実行できていることを前提にします
### 2-2.Docker
Dockerにどれだけ慣れているかは問いません。しかし、Dockerの環境は準備できていることを前提にします。

# 3.実装
#### 3-1.ディレクトリ構造
“`
practice
├─Dockerfile
├─docker-compose.yml
└─index.js
“`

### 3-2. index.jsの記述
今回は動作するかを確

Elixirから覚えるJavaScript　〜reduce関数〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はreduceを見てみたいと思います

お題
[1, 2, 3, 4, 5]の合計をする

# Elixir
※Enum.sumはあえて使いません

“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.reduce(x, 0, fn x, acc -> acc + x end)
IO.inspect(x)
IO.inspect(y)

“`

“`elixir:実行結果
[1, 2, 3, 4, 5
15
“`

# JavaScript

“`javascript
x = [1, 2, 3, 4, 5];
y = x.reduce((acc, x) => acc + x, 0);
console.log(x);
console.log(y);
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
15
“`

無事に同じ結果になりました

JavaScript Promiseオブジェクトを使った非同期処理の初歩

# 概要
JavaScriptで同期/非同期処理をやるときに避けられない、`Promise`オブジェクトについて書いておきます。
書く目的は、自分がまた忘れてしまったときに振り返るためと、私と同じくらいのレベルの方の理解の補助になれば。（いろいろな書き方や資料がある中で、自分に刺さる例ってあると思うので）

なお`(x) => x*2`は`function(x){return x*2;}`の省略形です。自然に使える前提で書いてます。

## 参考
– [Promise – JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

# Promiseオブジェクトの理解
## step1：遅い計算の実行
Promiseオブジェクトは、その中に関数を書いて定義すると、”そのうち”やってくれるもの。
例えば、
“`javascript
let p1 = new Promise((resolve, reject) =>
{
reso

Video.js完全マニュアル part7 〜公式FAQ集〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はPlayer作成時に渡すオプションでVideo.js特有のオプション一覧を紹介しました。今回はVideo.jsの公式で発表しているFAQ一覧を紹介します。

前回
[Video.js完全マニュアル part6 〜Video.js特有のオプション〜
](https://qiita.com/manzoku_bukuro/items/045bff6207c591ba0c2c)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[FAQs](

Video.js完全マニュアル part6 〜Video.js特有のオプション〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はPlayer生成時に渡すオプションで、標準のvideo要素でも利用されるオプションの紹介をしました。
今回は標準のvideo要素には存在しないVideo.js特有のオプションについて紹介します。

前回
[Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜](https://qiita.com/manzoku_bukuro/items/4869f2f800ec53f79c12)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人
–

Next.js参考サイト

https://techlife.cookpad.com/entry/2022/12/29/090000

DiscordBotに入力中といわせよう！！

はじめに

最近DiscordBotを作って遊んだりしているときに、こう思ったことはありませんか？
「Botにも入力中って出させたいなぁ～」と、
きっとこの記事を見ているということはそう思っているに違いない(そんなことない)と思うので、
さっそく作っていきましょう！！

開発環境

OS = Windows 10 Pro
Discord.js = 14.7.1

必要なもの

・ある程度完成したDiscordBot
・作りきるという気持ち

コード

まずは、特定の言葉に反応するプログラムを書きます。
ここでは、”Tenma”という言葉が文中にあるかに反応して”Tsukasa”とリプライを返すようにします。

“`js:index.js
~~~
if(msg.content.match(/Tenma/)) {
msg.reply(‘Tsukasa’)
}
~~~
“`

ここから手を加えていきます。

<

Elixirから覚えるJavaScript　〜map関数〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はmapを見てみたいと思います

お題
[1, 2, 3, 4, 5]のリスト又は配列を2倍する

# Elixir

“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.map(x, fn x -> x * 2)
IO.inspect(x)
IO.inspect(y)

“`

“`elixir:実行結果
[1, 2, 3, 4, 5]
[2, 4, 6, 8, 10]
“`

# JavaScript

“`javascript
x = [1, 2, 3, 4, 5]
y = x.map( (x) => x * 2)
console.log(x)
console.log(y)
“`

“`javascript:実行結果
/usr/local/bin/node ./hoge.js
(5) [1, 2, 3, 4, 5]
(5) [2, 4, 6, 8, 10]
“`

無

p5.js・JavaScript で map・スプレッド構文・reduce を使って要素数の長さの最大値を得る： 配列の配列（2次元配列）とオブジェクトの配列で

表題の通り、以下のような配列の中で、最大の長さ・要素数を持つものの、長さ・要素数の値を求める話です。

“`javascript
const testArray = [
[5, 10, 8, 7, 11],
[1],
[3, 6, 2],
[12, 8, 7, 4, 2, 1, 0, 9],
[1, 8],
];
“`

“`javascript
const testArray = [
{ a: 0, b: 3 },
{ a: 7 },
{ a: 8, b: 6, c: 11, d: 3 },
{ a: 9, b: 2, c: 12 },
];
“`

## 2次元配列を対象にした処理
まずは、異なる長さの配列を要素にもった配列、その 2次元配列を対象に要素数の最大の長さを求めてみます。
プログラムは以下の通りで、「単純なループ処理」・「reduce を使ったもの」・「map・スプレッド構文を使ったもの」の 3通りをのせています。

“`javascript
const testArray = [
[5, 10, 8, 7, 11],

JavaScriptでの配列のソート（まとめ）

配列の要素の並び替えのまとめです

昇順

“`JavaScript
const array1 = [200,300,1000,500,100];

array1.sort((a,b) => a > b ? 1:-1);
array1.forEach((data) => {
document.write(`

${data}

`);
})
“`

降順

“`JavaScript
const array1 = [200,300,1000,500,100];

array1.sort((a,b) => a < b ? 1:-1); array1.forEach((data) => {
document.write(`

${data}

`);
})
“`

!valueで意図しないreturn – falsyな値と0

# 関数に入らない
関数に入らずハマった昔話

フォームから入力された値を加工してAPIに渡すための関数を作り、
valueの値がなければ関数から抜けるようにしていました。

“`react
const onFinish = (value) => {
if(!value) return
…
“`
ところがフォームの値に数字の0が入っていると、意図せず関数から抜けてしまいます。

# 原因
JavaScriptでは`falsyな値`という括りがあるそうです。
0は`falsyな値`とみなされ、`!value`の条件に合致してしまっていました。

公式で`falsyな値`は以下のように定義されています。
* false
* 0
* -0
* 0n
* “”
* null
* undefined
* NaN

参考：
https://developer.mozilla.org/ja/docs/Glossary/Truthy

# 解決
なので、「値がなければ関数を抜ける」コードは、正しくは
“`react
const onFinish = (value) => {
if(value

雪が降るAR年賀状をつくってみた（8th wall 編）

2023年のAR年賀状として、雪が降る年賀状をつくりたいと考えました。

「年賀状の部分にだけ雪が降っていたら面白いのでは？」という発想です。（ちなみに、ジョジョの奇妙な冒険のウェザー・リポートが好きで、一エリアにだけ特殊な天気を発生させる、というのをやってみたかったというのもあります。マニアックな話ですいません。）

[前回](https://qiita.com/Namy/items/5354fd38cf42c5ad3037)は、model viewerを使ったAR年賀状のつくりかたを解説しましたが、今回は、model viewerだと実装が難しく、8th wallというARをつくるツールを使いました。

完成形はこちら。


![snowcardmovie.gif](https://qiita-image-store.s3.ap-north

p5.js で p5.Color の toString()・levels・分割代入を使ったり RGB・HSB を扱ったりする

今回の記事は、以下のようなことをやろうとして、あれこれ調べたり試したりした内容です。

– p5.js の色情報を複数含むものを取り出す
– rgba() の形式
– RGBA の RGB のみを一括で配列で取り出す
– 最初に指定した色の形式と異なる形式の色情報を取り出す（特定の 1つのみ）
– RGB指定した色から、HSB の値を取り出す
– HSB指定した色から RGB の値を取り出す

## rgba() の形式で取り出す
最初は、p5.js で何らか色情報を指定したものから、rgba() の形式で情報を取り出してみます。こちらは、[p5.js の公式リファレンスの「p5.Color」](https://p5js.org/reference/#/p5.Color)に記載されている `toString()` を使います。

p5.js Web Editor上で、試した内容を以下に記載します（こちらを、p5.js Web Editor上で動作させました）。

“`javascript
let c, c2

function setup() {
crea

Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

この記事ではVideo.jsで利用可能なオプションについての解説です。Video.jsのオプションの渡し方は前回の記事を参考にしてください。

前回
[Video.js完全マニュアル part4 〜Video.jsの初期化〜
](https://qiita.com/manzoku_bukuro/items/f5bef03dc2fdb53139e6)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人
– Video.jsの初期化時のオプションを知りたい人

# この記事

Elixirから覚えるJavaScript　〜sort(変数の挙動)〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今回はsortについて挙動を確認したいと思います
別にsortでなくてもよい、変数がどのように管理されているか知りたかった

# Elixir

“`elixir
arr = [5, 4, 3, 2, 1]
x = arr |> Enum.sort()
IO.inspect(arr)
IO.inspect(x)
“`

“`elixir:実行結果
[5, 4, 3, 2, 1]
[1, 2, 3, 4, 5]
“`

# JavaScript

“`javascript
arr = [5, 4, 3, 2, 1];
x = arr.sort();
console.log(arr);
console.log(x);
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]
“`

arrが書き換わってしまう…

と言うことで対策
スプレッド構文`.

String()とtoString()の違い

# はじめに
値をString型に変換する、String()とtoString()の違いを把握していなかったので調べた。
結論としては、String()にnullやundefinedを指定すると、”null”、”undefined”が文字列として返ってくる。これを期待値としない場合は、toString()を使うほうがいい。

# String()とtoString()の違い
toString()で2ヶ所エラーが出たケースがあった。
TODOとしている箇所は、利用するケースがあるのか含め後日調べて埋める予定。
|型＼処理|String()|toString()|
|—|—|—|
|Boolean |console.log(String(true));
// “true”|console.log(true.toString());
// “true”|
|null |console.log(String(null));
//”null” |console.log((null).toString());
// ❌Cannot read

Ankiでフラッシュカードの両面間でデータを永続化させる

# はじめに
暗記のための自由/オープンソースソフトウェア「[Anki](https://apps.ankiweb.net/)」があります。要は単語帳のデジタル版なのですが、エビングハウスの忘却曲線に基づいて適切なタイミングで復習出来るように出題をコントロールしてくれます。
英語学習者や医学生に人気があります。

https://eigonote.jp/2020/09/%E3%80%90%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%91%E6%9A%97%E8%A8%98%E3%82%A2%E3%83%97%E3%83%AAanki%E3%81%A7%E5%8D%98%E8%AA%9E%E5%AD%A6%E7%BF%92%E3%82%92%E8%B6%85%E7%B5%B6%E5%8A%B9/

## JavaScriptによる機能拡張
AnkiはPythonを利用したアドオンを作成することが出来るのですが、PC向け(Windows、Mac、Linux)のみで、モバイル向けは対象外です。
JavaScriptによる機能拡張は、P

2022年の振り返り(KPT)と今年の目標

明けましておめでとうございます。Esper0328です。
昨年は1月から無職で6月半ばにIOTベンチャーに就職して働くという一年でした。
昨年の振り返り(KPT)と今年の目標を書きます。

# 振り返り

## Keep

一言で言うと振返りを継続的にしつつ勉強を１年続けられたのが良かったです。

* KPTを毎週実施したおかげで生活のリズムがとても良くなった
* 前職までは月80H近く残業しており新しいことをやろうという気力が湧かず
* 時間に余裕ができ、少し先のことをやっておこうと思えた
* 意思決定も早くなり、何かトラブルがあっても悪化する前に手を打てていた
* 昨年は計画的に大量に勉強した
* **読んだ専門書の数 7冊**
* [プログラミング言語Go](https://www.maruzen-publishing.co.jp/item/?book_no=295039)
* 練習問題135 問をテスト書いてプログラミングした
* 仕事でテストを書くのが苦にならなかった
* [Distributed Services Wi