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

[JS]JavaScriptにおけるオブジェクトの概念

学習したことのアウトプット

JavaScriptを学習してると「オブジェクト」やら「メソッド」という言葉がガンガン出てきます。その度に、そもそもなんぞや？と思ってしまっていたので、少しでも情報を整理するために記事にしてみたいと思いまして。

#JavaScriptにおけるオブジェクトの概念
JavaScriptにおけるオブジェクトとは、`データや処理といった情報を1つにまとめた集合体`です。
例えば、以下のような情報があるとして

|データ|処理|
|—–|—|
|名前：ヤマダ|歩く|
|性別：男性|食べる|
|年齢：25歳|話す|

これらの情報を「human」等として1つにまとめると、オブジェクトが出来上がります。

[](https://gyazo.com/ad2fda2bfb4fd28cfacf8ef366167e1f)
##プロパティ
上のイメージ図の`「データ」`にあたる部分。
`ハッシュ形式（キーとバリューの

Face APIを使って怒りアラートを作った #FaceAPI #感情分析

##WEB会議で怒っているように思われる
もしかして怒ってます？
最近、言われたショックな言葉です。
コロナ禍が始まり、在宅勤務が多くなってきたので社内の会議はWEB会議がほとんどです。わが社ではカメラオンにする人が少なく、基本的には全員アイコンの状態で喋っています。
そんな中で言われたのがこの一言でした。

自分ではあまり怒ることはなく、たまに”イラっ”としても表に出ていると思っていなかったのですが、
残念ながら声にでてしまっているようなのです。もしかしたら表情にも出ているかもしれません。。。。

意識していないところで実は感情があらわになっていることが今回のことでわかりました。
対面なら相手の表情から気づくこともできるかもしれませんが、WEB会議＆カメラオフだとなかなか気づくことができません。

というわけで、**客観的に自分の表情を観測して怒りを感じ取ったらアラートを上げる仕組み**を作って、**人に言われる前に自分で気づける状態を目指しました。**

##完成品
WEBアプリとして作成しました。
携帯のインカメで顔の画像を取得してFace APIに送ってスコアを取得します。

【実用編】【DB】discord.js v13 ユーザーごとにプロフィールを作成する

## 前書き
私がメインで開発している「[ヒトリン](https://discord.com/api/oauth2/authorize?client_id=876116418037444630&permissions=545460846583&scope=bot%20applications.commands)」というボットにて、最近ユーザーごとにプロフィールを作成する機能を追加したため紹介します。

## どのようなものか
MongoDBを使用し、ユーザーごとに様々な情報を格納したデータを作成し、プロフィールを作成する。
今回は、MongoDBの使用方法からプロフィールを作成しコマンドで表示させるところまでのフルフルバージョンを紹介する予定でござんす。

## MongoDB

https://www.mongodb.com/

上記のリンクからMongoDBのサイトへリンクしサインインまたは新規登録を完了してください。
ほとんど英語ですが頑張ってどんどん次に進みましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-

【JavaScript関数ドリル】を毎日やる【勉強用】その5

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

“`javascript:take関数の挙動
_.take([1, 2, 3]);
// => [1]

_.take([1, 2, 3], 2);
// => [1, 2]

_.take([1, 2, 3], 5);
// => [1, 2, 3]

_.take([1, 2, 3], 0);
// => []
“`
第2引数分の値を先頭から取得するもの
##take関数の課題内容

##take関数に取り組む前の状態
– 前回作成したtakeRight関数をそのまま使用することにした

##take関数に取り組んだ後の状態
– 単純な機能でも様々な実装方法があるとわかった

##take関数の実装コード

“`javascript:
const take = (array, num) => {
let newArray = [];
if (num === 0) {
return

Apache EChartsを使ってグラフを書いてみる！ ~1日10行コーディング~

## 概要

### 1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる…)

### 実装するもの

とあるソシャゲのイベント走った記録とかができるサービスを作りたい。

今日はその１つの機能のグラフ表示部分を作ってみたいと思う。

## 手順

1. echartsのjsファイルをダウンロード
https://www.jsdelivr.com/package/npm/echarts?path=dist
こちらのページのdist配下のecharts.jsを保存する。

2. HTMLを記述
下記は公式にあるものを参考に記載

“`html

Chromeの恐竜ゲームをスクロールで再現してみた

# はじめに

先日、痔の手術を行い数日間の入院生活を送っていたのですが、
入院期間中に何か作れないかなーと思って暇つぶしに作ってみたものです！

## Chromeの恐竜ゲームとは

オフライン時にChromeブラウザで遊べるミニゲームです

## 完成したもの


ページのスクロールに応じて恐竜が走ります
※ブラウザサイズによって挙動がちょっと不安定かもです?‍♂️
https://git-gen.github.io/dino_scroll.html

Webの勉強はじめてみた その31 〜クライアントのフレームワーク〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章7,8節です。

## モジュールバンドラー
:::note
複数ファイルのJavaScriptを1つにまとめられる
Node.jsのコアモジュールをブラウザでも利用できる
:::

### webpack
モジュールバンドラーとして`webpack` を使用。
`babel-loader`も同時にインストール。

“`
yarn add webpack@4.26.1 webpack-cli@3.1.2 @babel/core@7.1.6 @babel/preset-env@7.1.6 babel-loader@8.0.4 –dev
“`

`babel-loader`
– 最新のJavaScriptで書かれたコードをブラウザが実行できるバージョンにコンパイルするモジュール

`webpack`の設定ファイル

“`javascript:webpack.config.js
module.exports = {
context: __dirname + ‘/app’,
entry: ‘./ent

chart.jsのstepSizeはプロパティ名の小文字・大文字に注意

##chart.jsの目盛り数が設定できない問題
chart.jsで5目盛りのレーダーチャートを作ろうとしてstepSizeプロパティをいじりまくるのだけれども、なぜか5目盛りにならない。目盛り量がすごいことになった状態のままうんともすんともいわない。

##原因
めちゃくちゃ初歩的な原因でした。**プロパティ名を正規表現「stepSize」にしていなかった**ことが原因。
それまで「StepSize」と頭文字を大文字にしてしまっていたために設定できていなかったようですー。

“`
options: {
scale: {
ticks: {
label: false,
min: 0,
max: 5,
stepSi

[JavaScript]正しい配列のコピー

## 挨拶
Web系エンジニアへの就職に向け学習をしております、ひろやすと申します。
今回の記事は、JavaScriptの復習をしていて配列の正しいコピーの仕方を知ったので、学習のアウトプットとして投稿しようと思いました。
配列のコピーの仕方を知らない方の参考になれば幸いです。

## 正しい配列のコピー

“`javascript
const array = [“ねずみ”, “うし”, “とら”];

// スプレッド構文を利用してカッコの中で配列の要素を取り出している
const arrayCopy = […array];
“`

## 間違った配列のコピー

“`javascript
const array = [“ねずみ”, “うし”, “とら”];
// arrayを参照している
const arrayCopy = array;

// arrayの値が変更するとarrayCopyの値も変わってしまう
array[0] = “いぬ”

console.log(arrayCopy);
// [“いぬ”, “うし”, “とら”]
“`

## 筆者の悪い例
最後に、正

条件分岐について

# 条件分岐
条件分岐とは、条件に応じてプログラムの流れを切り替える仕組みのことです。条件分岐を理解すること。

## if文
if文は「もし〜ならば〜する」という形で条件分岐を書くことができる最も基本的な条件文です。()の間に各条件式と、{}の間に書く条件式が満たされた時に実行する処理で構成されている。

“`sample.js
const x = 49;
if(x > 10) {
console.log(“xは10よりも大きい値です。”);//xは10よりも大きい値です。
}
“`

## else if
記述した条件が満たされた時の記述。

“`sample.js
let a = 1100
let b = 1100
let c = 1200

if (a === b) {
console.log(“aとbの値は等しいです。”)
} else if (a === c) {
console.log(“aとcの値は等しいです。”)
} else {
console.log(“すべての条件に当てはまりません。”)
}
“`
上記が満たされず、記述した

DrSmile社のウェブサイトを最適化し、最先端の実験を迅速に行えるようにする

DrSmileの急速な成長を後押しするために、迅速な実験を行える最適な環境を構築しました。

著者：Thom Krupa 2021年10月7日
原文：https://bejamas.io/blog/ab-testing-edge-case-study/


##1. DrSmileについて
2016年に設立されたDrSmileは、ヨーロッパ中で注目されている歯科会社です。彼らの使命は、歯科市場を民主化し、すべての人が自信を持って笑顔になれるようにすることです。彼らは、最新で手頃な価格の歯の矯正用透明アライナー技術という主力製品を通じて、それを実現してきました。

##2. DrSmileとBejamas：Jamstackへの道
Bejamasのリード・デベロッパーの一人であるPatrycja Dzaluk氏は、DrS

React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 03 ー 構成とロジックを整える

Recoil公式チュートリアルの解説は前回で終えました。この第3回はスピンオフです。とくに動きは変えることなく、モジュールの構成とロジックを整理します。せっかくモジュール分けもしましたので、もう少し実践に近づけようという試みです。

#### React + TypeScript: Recoil tutorial example 03

# ディレクトリをコンポーネントと状態で分ける
簡単な作例ながら、それなりにモジュール数も増えました。そこで、コンポーネント(`components/`)と状態(`state/`)を、つぎのようにディレクトリ分けすることにします。

* `src/components/`
* `App.tsx`
* `TodoItem.tsx`
* `TodoItemCreator.tsx`
* `TodoList.tsx`

【JavaScript】reduce()で配列から指定した値の近似値を取得する

海外のブログで、配列から指定した値の近似値を取得する方法が紹介されていたのでメモ。いったん配列をソートしてから近似値を求めるより、reduce() を使った方が早いらしい。

参考: [JFind the closest number in an array JavaScript](https://www.gavsblog.com/blog/find-closest-number-in-array-javascript)

#配列内で “8” に一番近い値を取得する

“`javascript:
const needle = 8;

const closest = [1, 10, 7, 2, 4, 9].reduce((a, b) => {
return Math.abs(b – needle) < Math.abs(a - needle) ? b : a; }); console.log(closest); // 出力値: 7 ``` この方法だと結果は "7" になる。配列に "9" があったとしても、先に比較された "7" が最近似値となる。 これだと問題となる

Webフロントエンドパフォーマンスチューニング55選

こんにちは、ぬこすけです。

近年、**Webフロントエンドではサイトのパフォーマンスの重要性が高まっています**。

例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。
また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ…」などの事例は枚挙にいとまがないでしょう。

https://web.dev/why-speed-matters/

パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。

しかしながら、時には**千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効**になることもあったり、**日々のコーディングでパフォーマンスを意識したコードを書くことは大切**でしょう。

この記事では**パフォーマンス最適化のハウツー**を紹介します。
**パフォーマンス改善の施策が思い浮かばない時やフロントエンドのスキルを磨きたい時に辞書的な役割を果たせれば良い**かなーと思っています

【個人開発】Twitterで映える！ファンレターを交換・シェアして楽しめるサービス『ご縁箱』をリリースしました✧˖°。

# はじめに…

### ▼ 皆さんはTwitterを使う上で このように感じたことはありませんか？
『 今ある ご縁を大切にしたい 』
『 フォロワーさんと感謝の気持ちを伝えたり、交流を深めたい！ 』
『 あの人に話しかけてみたい！ 』

けどきっかけがない..ちょっと億劫かも…

こういった問題も楽しみながら解決出来る『 ご縁箱 』というサービスを開発しました。(Rails × Vue.js)
### ▼ ご縁箱を使うとどうなる？
##### 実際に使ってみて…
– まだ話したことがなかったフォロワーさんと話すきっかけになった
– 色んなメッセージを頂いてほっこりした気分になった
– 自分の率直な気持ちをレターを送って伝えることで喜んでもらえた
– ご飯の約束ができた（全部焼き肉）

仲良しユーザーとの交流も深めることも出来ますが、まだ交流が出来ていないユーザーともコミュニケーションを取るきっかけにすることも出来るサービスです。
![TOP_TITLE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaw

[JS]レスポンスの処理

学習したことのアウトプット
#まず
ブラウザでイベント発火
↓
JavaScript
↓
ルーティング
↓
コントローラー
↓レスポンス
JavaScript
↓
ブラウザ

`レスポンス`部分の処理の書き方の理解を少しでも深められたらと
#XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。
XMLHttpRequestのメソッドやプロパティを利用して実装を進めます。

“`javascript:記述例
const XHR = new XMLHttpRequest();
“`
`new XMLHttpRequest`と記述することで、新しくオブジェクトを生成できます。
そして、新たに生成したXMLHttpRequestオブジェクトを`変数XHR`に格納しています。

変数名のXHRはXMLHttpRequestの略です。
##onloadプロパティ
リクエストの送信が成功したときに呼び出されるプロパティで`XMLHttpRequestオブジェクトのプロパティ

骨までしゃぶりつくす「ぷよぷよプログラミング」(1/X)

#背景

　世の中には情報システムを構築するための教材があふれていて、何から手を付ければいいかわからない人も多いと思います。筆者もそのような一人で、何を題材にし、自分のエンジニアリングの核を形成しようかと常に悩んでいます。ちなみにプログラミングの力量を示す一つの指標としてコンテストサイトの実力がありますが、筆者はAtCoderでは茶色であり、アルゴリズム的な観点でみれば駆け出しエンジニアと言っても差し支えないレベルです。全くの素人ではないものの、様々な分野で中途半端な力量だなと感じることが多く再勉強を試みてはその度に焦燥感を感じています。
　そんな中、目を付けたたのが「[ぷよぷよプログラミング](https://puyo.sega.jp/program_2020)」です。詳細な説明はオフィシャルに譲りますが、「小さなころから慣れ親しんだゲームであるぷよぷよを作れる！」というモチベーションを刺激されました。この教材の概要はjavascript と html を用いてブラウザで上で動作するゲームを実装するというものであり、インフラではなくWebフロント寄りの学習教材です。一方で私のキャリア

ViteでビルドしたOpenLayersで地理院地図を表示する

フロントエンドビルドツールの[Vite](https://vitejs.dev/)を使用してビルドした[OpenLayers](https://openlayers.org/)で[国土地理院地図](https://maps.gsi.go.jp/development/ichiran.html)を表示します。

[Vite](https://vitejs.dev/)は高速で起動、更新ができるJavaScriptビルドツールで
TypeScriptやVue.js/React等のライブラリが設定なしですぐに使えます。
ホットリロードに標準対応しているので、ファイルを変更すると自動的にブラウザをリロードしてくれて開発が非常に楽です。

[OpenLayers](https://openlayers.org/)のバージョンは`v6.12.0`を使用します。

※gitとnode ver.12以上のインストールは省略。

## プロジェクトとViteのセットアップ

ViteでOpenLayersの公式HPの[チュートリアル](https://openlayers.org/en/latest/do

対戦型ポケモンWordle「VS Pokémon Wordle」を作ってみた

# アプリの更新履歴
2022/02/14　設定画面からハイコントラストモードを選べる機能を追加
2022/02/12　リリース

# はじめに

最近話題の5文字の英単語を当てるゲーム「[Wordle](https://www.nytimes.com/games/wordle/index.html)」。
それをポケモンの名前で遊べるようにアレンジした「[ポケモンWordle](https://wordle.mega-yadoran.jp/)」。

シンプルだけど意外と奥が深いこのゲームですが、「リアルタイムに友達と対戦できる機能があったらもっと面白そう」ということで作ってみました！

**完成品はこちら**

https://www.vs-pokemon-wordle.com/


ソースの全容は以下のリンクから確認できます。

h

MicrosoftのWeb開発教材を使ってみた ⑥スペースシューティングゲーム 【ゲーム開発の基礎/Pub-Sub/Canvas/衝突検出】

# はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「