JavaScriptのClassについて part2

# 初めに
今回はクラスの継承や拡張についてまとめていきたいと思います。

# basic syntax
part1後の書き方の練習です。
“`jsx
class Person {
constructor(name, birthYear) {
this.name = name
this.birthYear = Number(birthYear)
}

calculateAge() {
const today = new Date()
return today.getFullYear() – this.birthYear
}
}
let Taro = new Person(‘Taro’, ‘1980’)
console.log(Taro) // Person { name: ‘Taro’, birthYear: 1980 }
console.log(Taro.calculateAge())
“`
インスタンスを創るのに、`constructor()`への引数に任して`this`オブジェクトを創り内部メソッドが`this`オブジェクトをア

【TypeScript】’Cannot redeclare block-scoped variable’ 独自のスコープを持つファイルかグローバルスコープを持つファイルか？

TypeScriptの勉強中にあるエラーに遭遇した。

`Cannot redeclare block-scoped variable ‘users’`

`usersの変数は既に宣言されているので再宣言できないよ」`というエラーらしい。

今回は以下のような場合で発生した。

“`ts:src/chapter3/index.ts
const users = [];
“`

“`ts:src/capter4/index.ts
const users = [{ name: ‘jhon’, age: 27 }];
“`
※ちなみにディレクトリ構成はこんな感じ
“`
.
├── README.md
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── chapter-3
│ │ └── index.ts
│ └── chapter-4
│ └── index.ts
└── tsconfig.json
“`

あれ、同じファイル内でこのエラーが発生する

JavaScript　returnとは　処理流れがいまいち分からない人向け

return・・・戻り値、返り値と言われます。

結果：returnは仲介人

returnの処理流れ

“`
① var array = [1,2,3,4,5,6,7,8,9,10];

④ function abc(arrayOrg) {
// var _array = arrayOrg.concat();
⑤ for (var i =0; i < arrayOrg.length; i++) { arrayOrg[i] *= arrayOrg[i]; } ⑥ return arrayOrg; } ② console.log(array); ③ console.log(abc(array)); ⑦ console.log(array); 出力結果： (3) [1, 2, 3] (3) [1, 4, 9] (3) [1, 4, 9] ``

Amazon Cognitoでユーザ認証機能をサクっと作ってみる

# はじめに
Amazon Cognitoはユーザ認証・認可機能を提供するサービスです。ユーザ認証はCognitoの機能で行うことも、GoogleやFacebookなどのソーシャルプロバイダーと連携して行うこともできます。
認証が完了したユーザにリソースへのアクセス権を与えるのが認可で、Cognitoを使うとユーザ認証から認証完了後にAWSリソースへのアクセス権の割り当てるところまでをワンストップ、且つ簡単に実装できます。ここではその一例としてAWS S3にファイルアップロードできるアプリ（ログイン機能付き）を作成してみたいと思います。

# 手順
1. Cognitoユーザプールを作成する
1. CognitoIDプールを作成する
1. S3を作成する
1. IAMロールを編集する
1. Webアプリを作成する
1. ログインユーザを登録する

## Cognitoユーザプールを作成する
Cognitoユーザプールとは前述のユーザ認証機能で使用するデータプールになります。ユーザプールを作成すると、認証情報（ID/パスワード）が登録できるようになります。ユーザプールはAWSコンソールか

画像の枚数に応じたレイアウトを自動で生成するJavaScriptライブラリを作成した

# この記事について
先日、インターンでの課題としてライブラリを作成しました。記事に残しておくと身になるという話をよく聞くので、作成した過程を書き残したいと思います。
筆者は駆け出しでありJavaScriptは勉強したてなので、アドバイスなどがあればお願いします！

# ライブラリの概要
* htmlのul要素に.js-photo-galleryというクラス名を付けるとli要素の画像がhttps://master.dxgxkh02xtdew.amplifyapp.com のようなレイアウトに自動で整形される
* 同じ枚数でも、画像のアスペクト比に応じて異なるレイアウトになる
* レイアウトはcssのGrid Layoutを使用する

# レイアウトの作り方

## css適用
下のサイトを参考にレイアウトを作成しました。
まず、好きな割合で区切りを決めると境目に番号が割り振られます（縦の線は左、横の線は上から1）。大きさをどの境からどの境までかで指定することで好きな形にできるという使い方でした。

https://developer.mozilla.org/ja/docs/Web/CS

input type numberに指定範囲内の整数だけ出来るようにする

input type numberに指定範囲内の整数だけ出来るようにする。
※但しバックスペースで空欄化を可能にしたいので、意図的に空欄化は許している。

“`HTML