f@ctor

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

JavaScript関連のことを調べてみた2021年09月30日
目次

Denoとはなんなのか今更ながらちょっとお触りしてみた

# はじめに

v1.0.0 が出てからだいぶ月日が経ってしまいましたが、今更ながらちょっとお触りしてみました。

## Denoってなんなん？

`Deno` は、V8 JavaScript エンジンを使用した Rust 製の JavaScript および TypeScript 用のシンプルでモダンで安全なランタイムです！
って[公式](https://deno.land/)が謳っています?

## なんでDeno作ったん？
`Deno` は JSConf EU 2018 での Ryan Dahl 氏による講演「[Node.js に関する 10 の反省点](https://www.youtube.com/watch?v=M3BM9TB-8yA)」で発表されました。
その講演にて、Node.js の初期設計における後悔している点をいくつか挙げています。

* API の設計おいて非同期処理に使う promise を使用しないという選択をしたこと
* 古い GYP ビルドシステムを使用するようにしたこと
* パッケージ管理において設定ファイルのpackage.jsonとnode_modu

元記事を表示

React v17から学んだEvent Delegationについて

こんにちは、Another works フロントエンドエンジニアのみやぞんです。
つい最近、Reactのアップデートを行ったので React v17 での変更で学んだことについて紹介したいと思います。

##アップデート内容
– 新機能 “なし”
– 段階的なアップグレードが可能になった

公式：https://ja.reactjs.org/blog/2020/10/20/react-v17.html

## 破壊的変更があった部分
アップデート内容にもあった「段階的なアップグレード」を実現するための変更が「Event Delegationの変更」です。React v17 における最も大きな変更と言えます。
公式の言うEvent Delegation(イベント委譲)の変更とは、イベントハンドラが登録される方法が変わったということです。 これまではdocumentオブジェクトで全てのイベントをハンドリングしてましたが、v17 からは ReactDOM.render() の第二引数で渡された要素上でイベントをハンドリングします。
(Event Delegationでイベントのハンドリン

元記事を表示

これからReact始めたい人のための今日だけでできるTODO#12 if文をJSX内に書きたい

## JavaScriptのmap()
`Array.map(callback)`は反復処理のためのメソッドです。
コールバック関数で処理された個々の要素を返し、戻り値で新しい配列を作ります。

| 引数 | 説明 |
| — | — |
|第1引数|配列の要素の値が1ひとつ渡される|
|第2引数|（省略可）0から始まるindex番号|
|第3引数|（省略可）もとの配列自体が渡される|

“`js
const sample = [1, 2, 3, 4, 5, 6];

const sumpleResult = sample.map((value) => {
return value * value;
})

//結果（※実際には数時間にスペースはありません）
> 1 4 9 16 25 36
“`

### key属性について
Reactにおける`map()`の基本ルールとして、配列から取り出された要素に対しkey属性を指定します。
key属性は繰り返し処理の中でどの要素が変更、追加、削除されたのかを判別するために利用します。

下記のようにkeyを省略すると`inde

元記事を表示

JavaScriptで仕訳アプリを作成

#**１．目的**
　WEBアプリ開発の第一歩として、JavaScriptを使用して初歩的なWEBアプリケーションを作ろうと考えたところ
　簿記の勉強も並行して行っていたため、仕訳アプリを作成した。

#**２．仕訳アプリの概要**
　スタートボタンを押す
　　　　　↓
　ランダムに問題が出題され、貸借の勘定科目と金額を手入力する
　　　　　↓
　回答ボタンを押すと、正誤判定され結果がアラート表示される

#**３．画面側（HTML）**
“`

javascriptでプログレスバーを生成する関数を作る

discordで音楽botを作成する際に今流している曲がどこまで再生されているかを出したかったので作りました。
いろいろな場所に応用が効くと思います。

追記:hn9024さんよりコメントで「進捗が0の時にバーの長さが変わる」「コードはもっと簡略化できる」とご指摘をいただきました。
コードを修正させていただきます。ありがとうございました

“`javascript:javascript
const getProgress = (currentPosition, endPosition, size, c0, c1, c2) => {
const per = currentPosition / endPosition;
const pos = Math.round((size – 1) * per);
return `[${c1.repeat(pos)}${c0}${c2.repeat(size – pos – 1)}]`;
};

// example
const max = 20;
const size = 11;
for(let i = 0; i <= max; i++

HTML内でのJavascriptの動作順序・読み込み方法

# はじめに
ウェブページのユーザビリティ向上には、Javascriptの読み込み順序や読み込み方法について考えることが必要になる場面があります。本記事は、ウェブページにおけるJavascriptの読み込みに関して、各種サイトの情報を私なりにまとめた形になっています。

# WHERE:どこにJavascriptを書くか
Jascriptを読み込む方法には、次の2種類があります。

1.1. html自体への直接の書き込み (インラインスクリプト)
1.2. 外部ファイルの読み込み

これらの記載位置として、主に次の3つがあるかと思います。

2.1. header
2.2. bodyの中 (属性の間など)
2.3. bodyの末尾 (``の直前)

“` html


hoge

hoge

AzureStorage[FileShare]をNodejsから操作する(ダウンロード)

# 初めに
前回書いた[AzureStorageBlobのダウンロード](https://qiita.com/RyotaAmano/items/7b36fbbce016c5905318)のFileShare版です。

AzureのクラウドストレージであるAzureStorageFileShare。
そのFile共有サービスの中にある全てのファイルをローカル環境に一括ダウンロードするためのプログラム(TypeScript)を紹介します。

# 環境
* Node v14.17.0
* Windows10
* Typescript

# コード
1ファイルで紹介したかったため1ファイルにすべて詰め込んでありますが、
適宜管理しやすいようにファイルを分けたほうがいいと思います。
## package.json
前回と同じため割愛。
見たい方は前回の記事に書いてあるため、そちらをご確認ください。

## メインファイル

“`index.ts
import fs from ‘fs’
import path from ‘path’;
import { ShareServiceClient }

ScrollTriggerを使って簡単に要素固定

#ScrollTriggerとは
GSAP(GreenSock Animation Platform)から、2020年5月にリリースされた、「スクロールアニメーション」のためのプラグインであり、とても簡単な記述によって複雑なスクロールアニメーションを実現することができます。

昨今、様々なスクロールアニメーションのためのライブラリやAPIが使用されていますが、その中でも一線を画する機能を備えています。

主な特徴として以下が上げられると思います。

– アニメーションを特定の要素にリンクさせることができる
– マーカーによってデバックや作成が容易
– スクロールにリンクした動きを簡単に作成できる
– 特定のスクロール位置の間で要素を固定できるピン留め機能
– コールバックの充実

https://greensock.com/scrolltrigger/

#実装方法

“`html:html


```

###確認方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637823/5ea216cc-af33-98c6-1f67-dd19e0547c62.png)

##ダイアログ出力
###書き方
```javascript

```

【Jest入門】Errorの評価しよう~toThrow関数~

# JestでErrorを確認しよう
JestでErrorを評価する際は、```toThrow関数```を使用します。

## ```toThrow関数```
* [公式ドキュメント](https://jestjs.io/ja/docs/expect#tothrowerror)
* 正規表現: エラーメッセージがパターンに マッチする か検証します
* 文字列:エラーメッセージが文字列を含む か検証します
* error オブジェクト: エラーメッセージがオブジェクトのmessageプロパティと等しいかを検証します
* errorクラス： errorオブジェクトがそのクラスのインスタンスであるかを検証します

```javascript:
test("引数がないときにエラーを投げる", () => {
class Foo {
constructor({ message }) {
this.message = message;
}
}

expect(() => new Foo()).toThrow(); // ErrorがThrowされたかチェッ

OTHERカテゴリの最新記事