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

this language feature is only supported for ECMASCRIPT6 mode or better 【Google Tag Manager】

Google Tag Manager でカスタムHTMLを作成していたとき、次のようなエラーに遭遇

>JavaScript Compiler Error Typeform Tag Error at line 3, character 5: This language feature is only supported for ECMASCRIPT6 mode or better: const declaration.

同様に、line4, 5, 6, 7, 11, 22 行目もエラーがあるらしい

書いていたコードは以下

“`HTML




```
```
.box1 {
background-color: #FFFFFF;
height: 200px;
width: 200px;
floa

イベント設定

### イベント
ブラウザ上でユーザーが実行する動作（クリックやマウス操作など）のことを「イベント」と言います。
###### マウスオーバー、マウスアウト
要素にマウスカーソルが重なっている状態をマウスオーバー、要素からマウスカーソルが外れることをマウスアウトといいます。
```
.box1 {
background-color: #FF0000;
height: 200px;
width: 200px;
}
```
赤色の四角にマウスオーバーイベントを設定します。
```
$(function(){
$(".box1").mouseover(function{
```
mouseover()関数でマウスオーバーイベントを設定できます。（）内にfunctionを設定して、マウスカーソルが重なったときの動きを記述します。
```
$(function(){
$(".box1").mouseover(function(){
$(".box1").css({'background-color':'#0000FF'});
});
});
```
マウスカーソルが重なっ

RubyとJavaScriptの.sliceの違い

# はじめに
この記事は、エンジニア経験1年の大学生が実務や個人の学習で勉強になったこと、詰まったことをまとめています。間違っている箇所などがございましたら、指摘していただけると幸いです。

# 背景
コーディングテストの学習している中、RubyとJavaScriptの両方で挑戦していました。そんな中、JavaScriptでは通ったが、Rubyではテストが通らず、混乱しました。そのため、記事にしました。

# Rubyの`.slice`
```ruby
[1, 2, 3, 4, 5].slice(1, 2)

# [2, 3]
```
`.slice(index, length)`となっており、`length`で長さを指定して取り出す。

[参考: Rubyリファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/method/Array/i/slice.html)

# JavaScriptの`.slice`
```javascript
[1, 2, 3, 4, 5].slice(1, 3);

// [2, 3]
```
`.slice(b

【JavaScript】ESModulesの概念に触れ、使用してみた

## モジュールとは

ソースコードを機能毎に分割してメンテナンスしやすくする仕組み。
代表的なものとして下記二つがある

* CJS(CommonJS)
* ESM(ES Modules)

### CommonJSとは
Node.js上でモジュールを管理する仕組み。
require / exportsというキーワードを使ってモジュールの読み込みや外部ファイルへの露出を行う。

### ES Modulesとは
ECMAScriptの仕様に基づくモジュール管理システム。主にブラウザ側で使用。
import / exportというキーワードを使ってモジュールの読み込みや外部ファイルへの露出を行う。
ES Modulesの規格でexportされたものはES Modulesの規格でimportする必要があり、CommonJSの規格でexportsされたものはCommonJSの規格でrequireする必要がある。この二つのモジュールシステムを跨いでそれぞれのキーワードを使うことはできない。
ES Modulesの読み込みにはscriptタグのtype属性を`module`にする

### 比

App PORT製作のまとめ

## URL
https://stevesan-appport.herokuapp.com/
## テスト用アカウント
email: test@test.com
password: Qwe123123
※自由に投稿していただいて構いません
# 概要
他の人が製作したアプリの閲覧、
またはユーザー登録することで自分の製作したアプリを投稿できます。
# 製作理由
私がポートフォリオを作成しようと考えた時、
他の人たちはどのようなサービスを製作したのか知りたかったのですが、
まとまったサイトがなく不便であったため製作しようと考えました。
# 利用方法
- All App
縦スクロールで、それぞれのユーザーが投稿したアプリを閲覧でき、
横スクロールではそのユーザーが投稿した他のアプリを閲覧できます。
- Login
ユーザーの新規登録、またはログインができます。
### **ログイン後**
- My App
自分が投稿したアプリを閲覧できます。
このページでアプリ情報の編集と削除ができます。
- Add New App
画像、タイトル、説明、URL を入力し、新しくアプ

【JavaScript】replace()メソッドの使い方と応用【文字列を置換する】

[**こちらのアプリ**](https://readability-checker.khufrudamonotes.com/free-conversion)↓を作るときに**JavaScript**の**replace()メソッド**周りで詰まったので、忘備録を書きます。

https://readability-checker.khufrudamonotes.com/free-conversion

# replace()メソッドの基本的な使い方

まず、JavaScriptの**replace()メソッド**は、置換したいテキストに対して

```js
replace('置換したい文字列','置換後の文字列')
```

みたいに使います。

## 記述例

たとえばこんな感じ。

```js
//元のテキスト
let text = 'おはようございます。今日はいい天気ですね。';

//replace()を使って「おはようございます」を「こんにちは」に置換する。
text = text.replace('おはようございます', 'こんにちは');

//console.logで出

face-api.jsで顔認識

# この記事でやること
今回はface-api.jsで使ってみたかった「顔認識」を試してみます！

# face-api.jsとは
face-api.jsはブラウザで顔検出（face detection：人の顔を自動的に見つける）と
顔認識（face recognition：個人を識別する）ができるJavaScript APIです。
機械学習用のライブラリTensorFlow.jsが利用されています。
[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html)

・顔検出
・顔認識
・表情検出
・年齢性別推定
ができます。

# 顔認識（face recognition）とは

[wikipedia](https://ja.wikipedia.org/wiki/%E9%A1%94%E8%AA%8D%E8%AD%98%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)には
>カメラのデジタル画像から、人を自動的に識別するためのコンピュータシステムである。

と書かれてい

歴史から見るTypeScriptにおけるwebpackとBabelの必要性

# はじめに

今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。

そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。

そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。

# JavaScriptの歴史
## JavaScriptの誕生
JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し、Netscape Navigator2.0に実装されていた。元々は**JavaScript**ではなく

元記事を表示

通貨強弱チャートの見方考え方

# 通貨強弱チャートについてよく質問されるので回答のメモ

自称世界一使いやすい通貨強弱確認ツールを開発しています。
https://fx-labo.app/strength/?t=today

よくtwitterなどで質問をもらうので回答用にメモを残します。

## Question
通貨強弱の計算式は？
単位は？
起点を変えると全然異なるグラフになるのはなぜ？

---
## Answer
計算式は長くなるので割愛
起点となるある時刻からの相対的な変化率です。
移動平均や取引量は一切考慮していない起点の価格とその時点の価格だけの比較です

足し合わせるといつでもゼロになります。
相対的なものなので単位はありません。

## 考え方
ある起点のすべてのペアの値を０として
起点時を
```
ドル円 110円
ユーロ円　120円
ユーロドル　1.00ドル
```
:::
として

次のタイミングで
```
ドル円 100円
ユーロ円　130円
ユーロドル　1.10ドル
```

となっていたとしたら
```
ドル円だけ見ると円高→円強くなった
ユーロ円だけ見ると→円弱くなった
ユーロドル

元記事を表示

TypeError: Cannot read properties of undefined (reading '***')エラーを解決してみた

## 背景

業務ではまったエラーです。
個人的には、`TypeError: Cannot read properties of undefined (reading '***')`というエラーは自分のような経験の浅い人にとっては原因を見つけづらいエラーの一つだと思い、今回記事にまとめました。
*コードはフェイクですので少しわかりづらいかも。

原因から考えると解決方法は複数ありそうですが、一つの参考になれば嬉しいです。

## 前提(今回のストーリー)

例えばユーザー登録されたユーザーが複数いて、admin権限を持つユーザーが一人だけという内容の以下のデータがあり、このデータをAPIで取得しているとする。
```javascript
// APIにてusersを取得したとする
users = [
{ id: 1,
userName: 'suzuki',
admin: true
},
{ id: 2,
userName: 'tanaka',
admin: false
},
{ id: 3,
userName: 'sasaki

元記事を表示

HTML Canvasのインターフェイスのまとめ #3

HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。
本記事で3記事目となります。前記事で触れた内容は割愛するので必要に応じて前記事もご確認ください。

1記事目:

https://qiita.com/simonritchie/items/36e34bf409b6bd10f23a

2記事目:

https://qiita.com/simonritchie/items/a303605e476b65b177a1

# テキスト

以降の各節ではCanvasのテキスト関係について色々触れていきます。

## fillTextメソッド

fillTextメソッドでは塗りを設定したテキストを描画します。第一引数には設定するテキストの文字列、第二引数にX座標、第三引数にはY座標を指定します。

```html