f@ctor

JavaScript関連のことを調べてみた2023年01月22日

JavaScript関連のことを調べてみた2023年01月22日
目次

javascriptで、文字列中のアルファベット以外の値を削除する

### やりたいこと

javascriptで、文字列に含まれる小文字のアルファベット以外の値を削除したい。

### 結果

以下のように書くことで、実現できた

“`jsx
var str = “a man, a plan, a canal: panama”
var newStr = lowercase.replace(/[^a-z]/gi, ”)
// newStr = “amanaplanacanalpanamavar”
“`

### 先頭の^の意味は何？

Caret（キャレット）と読む。行の先頭を示す

### 後ろのgiの意味は何？

g はグローバルサーチのg。通常は一度マッチングすると処理を終了する。このオプションをつけることによって一度マッチングした場合でも処理を繰り返す。

i は大文字と小文字を区別しない（今回の場合はすべて小文字なのでなくても良さそう）

元記事を表示

JavaScript行きついた結論(3)

前回の続き。。。
以下のソースをJavaScriptのフレームワークを変えて、VERCEL上にデプロイしてみた。

https://qiita.com/EasyCording/items/3643c482b29c87841207?fbclid=IwAR2uj27eSoLL-gVjx7lLCNPN0qf5U99aLDa8V-uj3CBobtBQhTlMOycUzrg

# React / Next / Parcel

(REACT)　https://create-react-app-yamap-y6hp.vercel.app/
(NEXT)　https://nextjs-yamap.vercel.app/
(percel) Staticデータの保存先がよく分からずに、結局、PARCELは動かなかった。

# 結果
若干だがREACTよりも、NEXTの方が読み込みが速かった。

# 結論
やはりNEXT.JSで開発を進めることにした。

元記事を表示

【JavaScript】紆余曲折の末、『最も直感的に文字列に改行を入れる方法』にたどり着いた話

# 結論
### Array.prototype.join() を使う
[Array.prototype.join()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) を使うとスッキリ書くことができる。
このように書くと、生成される文字列もコードの見た目通りに改行される。
こちらの想定していない空白や改行は一切入らない。
“`javascript
const text = [
‘JavaScript (JS) は軽量で、’,
‘インタープリター型、あるいは実行時コンパイルされる、’,
‘第一級関数を備えたプログラミング言語です。’,
].join(‘\n’);
“`
> JavaScript (JS) は軽量で、
> インタープリター型、あるいは実行時コンパイルされる、
> 第一級関数を備えたプログラミング言語です。

### テンプレートリテラルも使える
もちろん[テンプレートリテラル](https://developer.mozil

元記事を表示

console.tableでobjectをテーブルで表示する

## console.tableをするとobjectをテーブルで表示することができる
“`js
const user = {
name: ‘Josh’, age: 22,
name: ‘Bob’, age: 18
};

console.table(user);
“`
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380959/44998394-f8d2-87a1-a1c5-a01e2bbbd7b3.png)

元記事を表示

console.timeで処理時間を表示する

## console.timeを使用すると細かく処理にかかっている時間を見ることができる
“`js
console.time(“Loop”);
for(i = 0; i >= 10000; i++){
// 処理
}
console.timeEnd(“Loop”);

// 結果
// Loop: 7.615ms
“`

下記のように時間をとるとms単位で時間をとることができなかった
“`js
let startTime = Date.now();
for(i = 0; i >= 10000; i++){
// 処理
}
console.log(Date.now() – startTime);

// 結果
// 0
“`

元記事を表示

GitHub APIでユーザーの情報をJSONで取得し、画面に表示する

## はじめに
GitHubについて勉強したので、メモとして残していきたいと思います。

## GitHub APIとは？
GitHubが提供しているAPIで、GitHubに登録しているユーザーの情報や、そのユーザーのリポジトリの情報など、様々なデータをJSONで取得できるAPIになります。
今回は、取得したリポジトリの一覧を、JavaScriptで画面に表示をしていこうと思います。

## リポジトリの情報を取得する
今回は自分が公開をしているGitHubを使用していきます。
以下のURLでAPIを用いて、自分のユーザーデータから、リポジトリ一覧情報を取得することができます。

“`
https://api.github.com/users/GitHubの登録ユーザー名/repos
“`

今回使用するURLはこちらです。hukuryoというユーザーのリポジトリ一覧を取得します。

“`
https://api.github.com/users/hukuryo/repos
“`

表示される画面がこちらです。↓
![スクリーンショット 2023-01-22 9.14.18.p

元記事を表示

Object.keysのreturn valueに型をつける関数

## はじめに
Object.keys()の返り値の型がstring[]になるのを避ける策として型アサーションがありますが、
ソースコードに型アサーションをあまり増やしたくない。。その解決策メモ

## 問題点
string[]が型推論される
“`typescript
const user = {
name: “abc”,
age: 10
}

const keys = Object.keys(user) // string[]
const assertKeys = Object.keys(user) as (keyof typeof user)[] // (“name” | “age”)[]
“`

## 解決策
Object.keysをラップした関数を作成する
内部で[Type Assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions)を使用する
“`typescript
const myObjectKeys =

元記事を表示

7行マインスイーパー

7行テトリスの記事を読んだ

https://qiita.com/ryuichi1208/items/f9e6ac2b99bbe4fc82d3

7行マインスイーパー(`618 byte`)を作った。

下記を.htmlなテキストファイルに貼り付けて保存してブラウザで開くと遊べる。
リロードでリセット

[ミニファイア](https://www.toptal.com/developers/javascript-minifier)に噛ませたらもうちょっとだけ短くなるけど自前の範囲で記載する。

“`html:7行マインスイーパー