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

TypeScriptでuseRefを使う

“`ts
import { useRef } from “react”;

const sendInput = (inputValue: string | undefined) => {
console.log(inputValue)

}

function App() {
const inputRef = useRef(null);
return (

sendInput(inputRef.current?.value)}>送信

);
}

export default App;
“`

【JavaScript】関数とオブジェクト①

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/d9ac00ba64da2f1955a7

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.関数
####関数の特徴

#####JavaScriptでは、**引数の順番**が重要

““`javascript
// 関数を定義
function fn(a,b) {
console.log(a,b);
}
// bの引数だけ渡したいと思っても,順番に出力されるからできない
// もし、0を消した場合はundefinedとb側に出力される
fn(0,1);
“““

bの値だけを渡したい場合どうすればいいのか

““`javascript
// 関数を定義
function fn(a,b) {
console.log(a,b);
}
// もしb

[Firebase, Firestore] custom Map Object で混乱した話

プログラミング初心者の覚書です。

# Unsupported field value: a custom Map object

Firestoreでドキュメントを更新しようとしたときに発生したエラー文です。

“`
FirebaseError: Function setDoc() called with invalid data. Unsupported field value: a custom Map object (found in field tags in document
“`

では“`setDoc()“`でどんなオブジェクトを更新しようとしていたかというと、

“`js
async saveProfile(user){
try {
const obj = {…user}
// — abbr —
let tags = new Map();
tags.set(user.basic.gender, true);
tags.set(user.basic.isTeacher, true);
obj.

【JavaScript】関数は実行可能なオブジェクトである

# はじめに
改めて“JavaScript“の基本を学び直している。
その中で学んだ内容のメモ兼学習アウトプットです。

基礎的な部分を学び直すと、色々なところで「なるほど〜」とわかった気になって楽しいです。笑

# 関数もオブジェクトである
“JavaScript“のデータ型は大きく**プリミティブ型**と**オブジェクト型**に分けられる。
参考：https://qiita.com/makotoo2/items/9566cebf205ef8b42505

関数も例外ではなく、オブジェクト型に属する。
そのため、基本的にオブジェクトと同様の機能をもつ。

そして**関数は実行可能なオブジェクト**である。

# サンプルコード

まず関数を定義する

“`js
// 関数funcを定義
function func() {
console.log(“funcを実行”);
}
“`

### 値を格納できる
通常のオブジェクトと同様に、関数にも値や関数を格納することができる。

“`js
// 関数funcに値（prop）と関数（method）を格納する
func.p

JavaScriptのthisやあれこれ

## はじめに
初学者です。
基本は備忘録

## 関数とthis
“`js
function fn(a, b) {
console.log(a, b);
}

fn(1) //結果: 1 undefined
fn(null, 1)//結果 null 1
//2つめだけ使いたい場nullを使う
“`
*jsでは同じ関数が2つ以上ある場合後に書いた方が実行される*
*関数式で宣言するとエラーで教えてくれる*

“`js
function fn(a, b = 2) { //デフォルト値を設定できる
console.log(a, b);
}
fn(1, null)// 1 null
fn(1, undefined)// 1 2
//意図的に空にしたい場合はnullにする。undefinedは基本使わない
“`

### argumentsとは
“`js
function fn(a, b) {
console.log(a, b);
}

fn(1, 2)
“`
*argumentsとは実引数のことである*
*上記のコードだと1と2が該当する*

## 関数とオブジェクト

Node.jsでディレクトリを再帰的に作成/削除するのにmkdirpやrimrafはもう必要ない

Node.jsでディレクトリを再帰的に作成/削除するためのnpmパッケージとして[mkdirp](https://www.npmjs.com/package/mkdirp)や[rimraf](https://www.npmjs.com/package/rimraf)がありますが、現代のNode.js（[v14.14.0](https://nodejs.org/dist/v14.14.0/docs/api/)以降）において、それらはもはや必要ありません。

## ディレクトリを再帰的に作成する方法

`mkdir -p`のようにディレクトリを再帰的に作成するには、[fs.mkdir](https://nodejs.org/api/fs.html#fs_fs_mkdir_path_options_callback)の`recursive`オプションを使います。

コールバックAPIを使う場合：

“`js
const fs = require(‘fs’)

const dir = process.argv[2]
console.log(`try creating ${dir} direc

Reactを学ぶ中で必ず押さえておきたいこと②

## 0. はじめに

Reactについて、勉強したことを備忘録として限定記事でまとめていたのですが、暇だったので公開記事にしました。

※2018年に書いた記事：[**Reactを学ぶ中で必ず押さえておきたいこと①**](https://qiita.com/i-tanaka730/items/1ffb8c22fcddd11b56a4)

## 1. Reactとは
– UIコンポーネントを作成するためのライブラリことやな。
– Facebook社が開発しているから、期待値大やな。
– Reactを使うにあたり、**仮想DOM、JSX、コンポーネント**・・・といったワードが20000%の確率で出てくるんやな。

## 2. 仮想DOM

– そもそもDOMは、**Document Object Model**の略やな。
– つまりは、HTMLにアクセスする窓口のことやな。
– DOMを直接更新する場合、DOMが変更されるたびにブラウザがHTMLを解析してレンダリングするから、コストが高いんやな。
– 仮想DOMでは、ページ変更前と変更後の仮想DOMを比較して、差分箇所を見つけて、リア

Nuxt3（beta）をDocker上で構築した時に詰まったポイント

# 概要

2021/10/12にNuxt3がリリースされました。
早速触ってみようと思い、今回は最近よくDocker上に開発環境を構築することが多いので、せっかくならNuxtもDocker上に構築しようと思いました。
ただ、初期設定で少し詰まった部分があったので、備忘録もかねてまとめようと思います。

https://v3.nuxtjs.org

# 構成

まずは、下記のような構成でファイルを作成します。

“`
nuxt3-docker-app
├ docker-compose.yml
├ node
│ └ Dockerfile
└ src
“`

# 各ファイルの準備

Dockerの起動に必要な各ファイルを準備します。

## docker-compose.yml

今回はNode.jsのみ使用するので、必要な記述を記載します。

“`yml:docker-compose.yml
version: ‘3’
services:
node:
build: node
volumes:
– ./src:/root/src

特定ユーザーのQiita記事一覧を得る(5)

[前回の記事](https://qiita.com/ELIXIR/items/5972aec6833504293e45)のアップデートです。
uriのクエリに&tag=[key]を追加することでタグを選択した状態で記事一覧を表示できます。

自分自身の備忘録として記事を書いてきたのに、記事が増えすぎて調べるのに手間取るようになってしまったのですが、これのおかげでとても助かっています。

API使用制限(60回/時間)があるのでその点のみご注意ください。
また、記事が多いと表示まで数秒かかることがあります。

[動作デモ](https://elix.jp/app/tools/qiita_index.html?uuid=ELIXIR&tag=Unity)
前回同様ローカル環境でも動作します。

“`