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

axiosでエラーにもレスポンスを表示させる方法

## 今回の目的
axiosでエラーのときでも、エラーのレスポンスを表示できたら嬉しいですよね！ってことで紹介します。
知っている人も多いかもしれませんが、自分の知識の定着として書きます！

### 今までの自分のエラー表示
“`index.js
this.$axios.$post(‘postするときのURL’)
.then((res)=>{
console.log(‘RESPONSE’,res)
})
.cacth((error)=>{
console.log(‘ERROR’,error)
})

“`

こんな感じで書いていました。

こんな感じで400なので、フロントのミスということはわかりますが、具体的に何が悪いのか？が分かりにくいですよね。

### 改善したエラー表示
“`

JavaScript 有効な日付か判断する方法 isNaN

## Dateオブジェクトに変換して有効かどうか判断する

“`js:例
var date = new Date(“2000-10-40”); // 40日は存在しない

console.log(isNaN(date.getDate()));
// true
“`

**解説**
1. 日付をDateオブジェクトに変換する。
2. getDateメソッドで日付の情報を取得する。
3. getDateメソッドは有効でない日付だとNaNを返す。
4. それを `isNaN` で判断する。( `isNaN()` 関数は引数が `NaN` かどうかを判定します)

※ `yyyyMMdd` の形式の日付は、Dateオブジェクトへの変換がうまくいかず、正しい日付でも有効でない日付と判断されることがあります。形式を変換してから行う必要があります。

**処理速度**
`isNaN(new Date())` のように、Dateオブジェクトを直接isNaNで判定することができますが、getDateを判定させた方が高速になるケースが多いらしいです。

**Invalid Dateで判断すれば良いので

TypeScriptの「as」の使い方

# `as`の使い方

TypeScriptでは`as`を型アサーションを行うために利用します。
つまり`型情報を強制的に修正する`ときに利用されます。

##### (例)
“`typescript
type Info1 = {
id: number;
}
type Info2 = {
id: number;
name: string;
}

function foo(obj: Info1): string {
// ↓ これはエラーとなる
// return obj.name;

// objはInfo1型だが、無理やりInfo2型に修正して利用
return (obj as Info2).name;
}

“`

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

## last関数の課題内容

_.last関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#last

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】last関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 同じように書けたのでよかった。

## last関数の実装コード（答えを見る前）
“`javascript
function last(array) {
return array[array.length – 1];
}
“`

## last関数の実装コード（答えを見た後）
“`javascript
function last(array) {
return array[array.length – 1];
}
“`

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

## lastIndexOf関数の課題内容

_.lastIndexOf関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#lastIndexOf

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】lastIndexOf関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– だいたい同じように書けたのでよかった。

## lastIndexOf関数の実装コード（答えを見る前）
“`javascript
function lastIndexOf(array, value, fromIndex = array.length – 1) {
for (let i = fromIndex; i >= 0; i–) {
if (array[i] === value) {
return i;
}
}
return –

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

## nth関数の課題内容

_.nth関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#nth

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】nth関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– ちょっと時間がかかった
– １行で済ませる書き方がまだわかっていなかった

## nth関数の実装コード（答えを見る前）
“`javascript

function nth(arr, n = 0) {

if (n < 0) { return arr[n + arr.length]; } else { return arr[n]; } } ``` ## nth関数の実装コード（解答例） ```javascript function nth(array, n = 0) { return n >= 0

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

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

## slice関数の課題内容

_.slice関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#slice

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】slice関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– だいたい解答例と同じようなコードを書くことができた。

## slice関数の実装コード（答えを見る前）
“`javascript
function slice(array, start = 0, end = array.length) {
const newArray = [];

for (let i = start; i < end; i++) { newArray.push(array[i]); } return

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

## tail関数の課題内容

_.tail関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#tail

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】tail関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– だいたい解答例と同じようなコードを書くことができた。

## tail関数の実装コード（答えを見る前）
“`javascript
function tail(array) {
if (!array) {
return;
}

return array.slice(1);
}

console.log(tail([1, 2, 3]));
// => [2, 3]
“`

## tail関数の実装コード（答えを見た後）
“`javascript
function tail(array) {
const newArray

express-generatorで作成したexpressプロジェクトをTypeScript化する その2(フロント側)

こんにちは、katです。
前回の続編になります。

https://qiita.com/katkatprog/items/0205f55377896faace5c

前回、express-generatorで作成したプロジェクトのサーバーサイド部分をTypeScript化する方法を紹介したのですが、
その記事ではフロントエンド部分(ブラウザ側JavaScript)のTypeScript化はしておらず、完全なTypeScript化とは呼べない状況でした。

そこで今回、フロント側にもTypeScriptを導入し、なんとか全体をTypeScript化できました。
同時に、フロント側にWebpackも導入し、ブラウザ側では1つのJavaScriptファイルのみを読み込むようにできました。
(フロント側で複数のjsファイルを用いている場合、IEブラウザではESモジュールが使用できない等、ブラウザ間で何かと差異がある。→Webpackを用いて1ファイルにしてしまえば解決)

それらについて、今回学んだ事項を紹介したく、記事を作成しました。
Githubリポジトリ(今回の作業終了時コミット)は[こ

オライリー書籍紹介 2022年6月[O’Reilly]

5月6月に発売されたオライリーの書籍を紹介します。
***
[動かして学ぶAI・機械学習の基礎[Amazon]](https://www.amazon.co.jp/%25E5%258B%2595%25E3%2581%258B%25E3%2581%2597%25E3%2581%25A6%25E5%25AD%25A6%25E3%2581%25B6AI%25E3%2583%25BB%25E6%25A9%259F%25E6%25A2%25B0%25E5%25AD%25A6%25E7%25BF%2592%25E3%2581%25AE%25E5%259F%25BA%25E7%25A4%258E-%25E2%2580%2595TensorFlow%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%25E3%2582%25B3%25E3%2583%25B3%25E3%2583%2594%25E3%2583%25A5%25E3%2583%25BC%25E3%2582%25BF%25E3%2583%2593%25E3%2582%25B8%25E3%2583%25A7

Three.jsサンプル1

>地面と物体を表示する。

[GitHub – mrdoob/three.js: JavaScript 3D Library.](https://github.com/mrdoob/three.js/)

“`index_circle.html

```

まずはクラスの作成から実装します
```

qiita apiを叩く。その3

# 概要
javascriptで、qiita apiを叩いてみた。
itemsを取得してみた。

# サンプルコード

```

var app = new Vue({
el: '#app',
data: {
items: []
},
mounted() {
axios.get(`https://qiita.com/api/v2/users/ohisama@github/items`).then(response => {
this.items = response.data;
}).catch(error => {
alert(error);
});
}
});

```

# 成果物

https://embed.plnkr.co/plunk/inGmlRc7wpqWrasWqPSg

以上。

TypeScriptのオブジェクトリテラルとオブジェクト型を理解したい

## オブジェクトリテラルとは

MDNによると、

>オブジェクトは new Object()、Object.create()、リテラル表記法 (初期化子表記法) を使用して初期化されます。オブジェクト初期化子はオブジェクトのプロパティ名と関連した値のゼロ以上のペアのリストで、中括弧 ({}) で囲まれます

オブジェクトリテラル(オブジェクト初期化子)とは表記法のことです。

# JSONとの違い

JavaScriptのオブジェクトリテラルをベースに作られた軽量データフォーマットがJSONですが、
オブジェクトリテラルとJSONでは、記載方法が若干違います。

:::note warn
JSONだと
・プロパティ名と文字列はダブルクォートで囲む。
・関数の値を割り当てることができない。
:::

これだけではないですが、主にこのような違いがあります。

# 構文について

#### TypeScriptのオブジェクトは連想配列です。

```TypeScript
const obj = {
a: "hello",
b: 123
}
```

上記のようにプロパテ

【React】公式のチュートリアルをやってみる～⑤関数コンポーネント

[【React】公式のチュートリアルをやってみる～④stateのリフトアップ](https://qiita.com/asahina820/items/c1045cacda14dc23204d) の続きです。
stateを持たないSquareコンポーネントを、シンプルに書くために関数コンポーネントに置き換えます。

## Squareコンポーネントをクラスコンポーネントから関数コンポーネントに置き換える

### 変更前（クラスコンポーネント）
```jsx
class Square extends React.Component {
render() {
return (
this.props.onClick()}
>
{this.props.value}

);
}
}
```

### 変更後（関数コンポーネント）
```jsx
function Square(props

【JavaScript】配列系メソッドあれこれ

# **配列に値を追加**

## 末尾に追加（push）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.push('追加した要素');
console.log(array);

//【出力】
//[1, 2, 3, 4, 5, 6, '追加した要素']
```

## 先頭に追加（unshift）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.unshift("追加した要素");
console.log(array);

//【出力】
//['追加した要素', 1, 2, 3, 4, 5, 6]
```

# **配列の値を削除**

## 末尾を削除（pop）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.pop();
console.log(array);

//【出力】
//[1, 2, 3, 4, 5]
```

## 先頭を削除（shift）

```jsx
const array = [1, 2, 3, 4, 5, 6];