f@ctor

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

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

WordPress REST API を使用して WordPressに記事を投稿する(JavaScript)

**headers**

– アプリケーションパスワードはwordpress管理画面のuserページより取得可能
“`
const headers = {
“Content-Type”: “application/json”,
Authorization:
“Basic ” + Buffer.from(`${wordpressのユーザーネーム}:${wordpressのアプリケーションパスワード}`).toString(“base64”),
};
“`

**url**

“`
const url = `${wordpressのURL}/wp-json/wp/v2/posts`;
“`

**articleData(投稿内容)**

– 公開ステータスは以下
– publish（公開）
– future（公開予約）
– draft（下書き）
– pending（非公開）
– private（限定公開）

“`
const articleData = {
ti

元記事を表示

React,Javaアプリケーションでカレンダー機能実装

# 最初に
今回の記事は[React + SpringBootアプリ　簡易まとめ](https://qiita.com/Sesoniso/items/3c1beb243a093d80e247)の記事の続きで旅行予約管理アプリケーションの**カレンダー機能実装**についてまとめようと思います。
カレンダー機能実装にはReactのReact Datepickerを使用し、[こちら](https://reactdatepicker.com/)のサイトを参考にして実装しました。

本記事の完成画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2645309/0a5cbf77-c6f0-9874-3d4e-6b41fae09963.png)

# 1.　サンプルコード
“`js
import axios from “axios”;
import React, { useEffect, useState } from “react”;
import ReactDatePicker from “r

元記事を表示

【2023最強】横スクロール（スワイプ）をマウスジェクチャーも含めてなるたけ簡単に作ってみた

ブラウザを上下に移動する縦スクロールは、普通だけれど、横スクロールはどうすれはいいか？
とても簡単でコンテナ（スクロールさせたい部分）に `overflow-x: hidden` というCSSを入れれば簡単にできる。

See the Pen
Horizontai scroll by Mayo Tobita (Reactで画像アップロード機能を作成する

# はじめに
タイトル通り。
reactとtypescriptで、投稿フォームに画像をアップロードする機能を実装したので、サンプルを掲載します。

# 仕様
– 「画像アップロード」ボタンを押すと、ファイルエクスプローラーを開く。
– 選択した画像がプレビュー表示される。
– 「投稿する」ボタンを押すと、画像が保存される。←すなわち、画像を送信する際は二段階の手順を踏む必要がある。（「画像アップロード」ボタン→「投稿する」）「投稿する」ボタンを押しただけでは画像データを送信できないため、工夫が必要。（今回は`FormData`を使用）
– 画像アップロードをキャンセルできる。

# 結論のコード
“`Form.tsx
import React, { useState, useContext } from ‘react’
import { useForm } from ‘react-hook-form’

import { createPost } from ‘../../api/api_actions’
import { Post } from ‘../../interfaces/i

元記事を表示

TypeScript初心者必見！ジェネリクスの理解を深めよう

こんにちは！今回はTypeScriptの重要な概念であるジェネリクスについて解説していきます。ジェネリクスは型の問題を解決する強力なツールであり、型の安全性を維持しながらコードの再利用性と柔軟性を高めます。

## 1. ジェネリクスって何？

ジェネリクスとは、型システムの一部で、クラスや関数に柔軟性を持たせるためのツールです。ジェネリクスを使用することで、型情報（つまり、どのようなデータがコードに渡されるのか）を保持しながら、コードを抽象化・再利用することが可能になります。

例えば、次のようなジェネリック関数を考えてみましょう。

“`typescript
function identity(arg: T): T {
return arg;
}
“`

この関数は、型を指定して呼び出すことができます。

“`typescript
let output = identity(“myString”);
console.log(output); // “myString”
“`

また、型推論を利用して引数から型を自動的に推論することも可能で

元記事を表示

Vue.jsではプロパティ名の重複に気を付けたほうが良さそう

# 結論
Vue.jsではプロパティ名の重複に気を付けたほうが良さそうだと調査をして感じました。

# 前提
– `props`、`data`、`computed`、`methods`などがこの後出てきます。が、これらの意味・役割についてはこの記事では解説しません。ご了承願います。
– この記事ではCDN の Vue を使用しています。
– vue@3.3.4を使用しています

# 要点
:::note info
– Vue.jsでテンプレート構文にプロパティをバインドしたいとき、バインドしたいプロパティ名を指定します。
– 「プロパティを持てるものたち(`props`、`data`…)」のいずれかが持っているプロパティであれば、そのプロパティ名をバインドしたいものとして指定できます。
– 「プロパティを持てるものたち(`props`、`data`…)」がそれぞれ持っているプロパティ名に重複がある場合、重複のあったプロパティ名を指定したとき、そのどれか1つのプロパティとバインドするものと考えられます。
– 裏を返せば、重複のあったプロパティ名を指定したとき、バインドできないプロパティが

元記事を表示

SentryのSession Replayを導入してみて

## はじめに
Sentry利用していますか？
社内ではフロントエンドのエラーの監視のためにSentryを導入しています。

ある日、Sentryを開いて新たなエラーが計測されているか確認していたところ
> Your organization has access to Session Replay for free until the end of August,
![スクリーンショット 2023-07-13 18.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/24747280-6b70-7446-0142-4bb61e3840c2.png)

Session Replayというサービスを8月末まで無料にしてあげるから使ってみないかい？と画面上部に表示されました。

ダッシュボード上にReplaysという項目がありますが、表示されるまではその機能を知りませんでした。無料という言葉に興味が惹かれてので調べてみると、
>Session Replay helps you get

元記事を表示

【追記中】JavaScript Promiseとかについて(resolve, reject, deferred)

## resolve, reject, deferredってなに

:::note
JavaScriptや他のプログラミング言語で非同期処理やPromiseを実装する際に使用される用語
:::

### Promiseとは

– 非同期処理をよりシンプルかつ効率的に扱うための機能
例）APIリクエストやファイルの読み込みなど
**非同期処理によって返される結果を、後続の処理で簡単に利用できるようにするためにプロミスが使われる**

### Promiseのコンストラクタの構文の例

~~~javascript
const promise = new Promise((resolve, reject) => {
// 非同期処理などを行い、成功した場合は resolve を呼び出し、失敗した場合は reject を呼び出す
});
~~~

resolveとrejectはコールバック関数

– **resolve** : 非同期処理が**成功**した際に呼び出されるコールバック関数
– **reject** : 非同期処理が**失敗**した際に呼び出されるコールバック関数

**

元記事を表示

7/27 プログラミング4日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
——————————–
本日は条件分岐続きをやりました
・条件分岐の種類
if文
Switch文
この二つ使用する

⬜️if文について
—
“`
//変数x
let x = 5;
if(x >= 10) {
console.log(“大きい”);
} else {
console.log(“小さい”);
}
“`
この場合xより値10が大きいため、ブロックされて小さいと表示される
ブロックされるかというと「x >= 10」というのはxのところを数字に置き換えるとわかりやすい
「5 >= 10」であれば見比べたら５から１０大きくないためfalseとなる
elseとはそれ以外を示している
なので、今回でいえばそれ以外の小さいってのがtrueになる

⚫️使用方法としてはこんな感じだと思われる
“`
if (条件) {
// 条件が真（true）の場合に実行される処理
条件結果;
} else {
// 条件が偽（false

元記事を表示

スマートフォン向けのハンバーガーメニューボタンの動作方法（jQuery利用）

# ハンバーガーボタンの作り方

お久しぶりです。コウヤです。

今まで、Python関連の記事を中心に書いておりましたが、この度、WebデザインやWebコーディングのスキルを強化して、Webコーダーをまずは目指していきたいという気持ちが固まりました。
現在は副業または業務で活かすことを念頭にスキル強化中です。

さて、今回のWeb作成の課題で、ハンバーガーメニューの作り方を学ぶ機会があったので、実装方法を紹介したいと思います。

皆さんもスマートフォンでWebサイトを見ているときに、以下の画像にあるハンバーガーボタンを見かけることが多いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/e4f003ec-94a0-9dc6-75c1-a4d33ba8633a.png)

さて、このボタンを押下すると、以下のように背景が薄く白くなり、ページ内リンクが出るようになりますが、今回はこれを実装することを考えていきたいと思います。

ここまでの背景デザインまで作成はしませ

元記事を表示

Supabase入門

## はじめに
Supabaseを触ったので、Next.jsでSupabaseからデータ取得ができるまでのやり方を書いていきます。 以下のURLからSupabaseの登録をしておいてください。
https://supabase.com/

以下のドキュメントに沿って書いていきます。
https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

## Supabaseとはなんぞや
**ChatGPTに解説してもらいました。**
Supabase（スーパーベース）は、オープンソースのリアルタイムデータベースであり、
バックエンドの機能を提供するプラットフォームです。
Supabaseは、アプリケーションのバックエンドを構築する際に必要な一般的な機能を簡単に利用できるように設計されています。

SupabaseはPostgreSQLデータベースをベースにしており、
リアルタイムのデータ同期、認証、ロールベースのアクセス制御、ストレージなどの機能を提供します。
これにより、開発者はサーバーサイドのコードを書かずに、高度

元記事を表示

ABC086C-Travelingの嘘解法を解く（Javascript版）

どうもアットコーダーをJavascriptで解いてる野蛮人です。
300の問題、Travelingを解いてたのですが、どうしても解けなくて以下の記事を参考にしたところ、
https://qiita.com/ytanto/items/caf7bf0ba287da81b20f

まさかの**WA**！！
前の距離から次の目的地までが移動可能かがロジックに入っていないため、失敗するようでした。
私と同じ難民が出たらと思い、正解コードを晒しておきます。

“`javascript:Javascript
function Main(i) {
let a = i.split(`\n`);
a.pop();

let total = [];

for (let i = 0; i < Number(a[0]); i++) { if (i == 0) { let array = a[1].split(" "); let t = Number(array[0]); let x = Number(array[1]); let y =

元記事を表示

【Next.js v13.4 AppRouter】触ってみた備忘録（public repository付き）

## 目次
[1.はじめに](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#1%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.この記事の対象者](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#2%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%AF%BE%E8%B1%A1%E8%80%85)
[3.今回作ったアプリの要件](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#3%E4%BB%8A%E5%9B%9E%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A6%81%E4%BB%B6)
[4.成果物](https://qiita.com/kimukimu01/items/b471afb7ef6f17ab0113#4%E6%88%

元記事を表示

javascriptのinsertBeforeを利用して、HTMLの要素を移動させる(要素順の入れ替え)

# 結論
ある親となるHTML要素に、すでに存在している子要素を`insertBefore`で挿入しようします。すると子要素は関数で指定した場所に移動します。

# insertBefore関数
“`.js
(親).insertBefore(newNode, referenceNode)
“`
は、ある親が持つ`referenceNode`の前に、`newNode`を挿入する関数です。[^1]HTML要素を追加する目的で使用する想定だと思います。しかし、下記の2つの仕様を持っているため、HTML要素を移動させるときにも利用できます。
– `newNode`に「既に存在する要素」を指定した場合、指定された要素は`referenceNode`の前に移動される。
– `referenceNode`がnullの場合、`newNode`は末尾に挿入・移動される。

サンプルコードで実際の挙動を確認いただけると幸いです。

[^1]:正確性を欠くかもしれませんが、ノードはjavascriptで扱う「HTMLの要素」という考えでいいかと思います。

# サンプルコード

React18におけるStrictモードについて調べました

# これは何
React18社内勉強会の発表資料です。

# Strictモードとは
Strict モードは、コード内の意図しない副作用の検出だったり、潜在的な問題を実際のバグになる前に発見するのに便利な`開発モードのみで実行される`開発ツールです。
潜在的な問題とは、現時点では目に見えないものの、将来的には問題を生じる可能性のある事を指します。

# React18でのStrictモード
以下DeepLを使用した公式の翻訳です。
> – コンポーネントは、不純なレンダリングに起因するバグを見つけるために、余分な時間を再レンダリングします。
> – コンポーネントは、Effectのクリーンアップの欠落に起因するバグを見つけるために、Effectを余分に再実行します。
> – あなたのコンポーネントは、非推奨のAPIを使用していないかチェックされます。

つまり、`表示`→`表示したのを破棄`→`再表示`という順番で実行されます。
なぜこのような動きをするのかというと、冒頭に書いたような「副作用」があるコードをあぶり出すことができるようになります。

### 副作用がある簡単なサンプル

元記事を表示

React Ariaを使ってアクセス可能なUIコンポーネントを作成しよう

## はじめに

Webアプリケーションのアクセシビリティは、ユーザーが利用しやすいかどうかを左右する重要な要素です。障害のあるユーザーやアシストテクノロジーを利用するユーザーにも良好なユーザーエクスペリエンスを提供するために、アクセシビリティを考慮したコンポーネントを開発することが必要です。そこで登場するのが「React Aria」です。

## React Ariaとは？

React Ariaは、アクセス可能なUIプリミティブを提供するReact Hooksのライブラリです。WAI-ARIA Authoring Practicesに従い、スクリーンリーダーやキーボードナビゲーションのサポートを提供します。これにより、ユーザーがアプリケーションをより簡単に操作できるようになります。

## WAI-ARIA Authoring Practicesとは？

WAI-ARIA Authoring Practices（以下、Authoring Practicesと略します）は、Web Accessibility Initiative（WAI）によって提供されるアクセシビリティに関するガ

元記事を表示

スマートフォンで物体検出


# 0. 概要

![overview_with_smartphone.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275020/b799dc40-2577-d2aa-1083-0885fa1d5e9d.gif)

– スマートフォンでリアルタイムに物体検出を行います。ROG Phone 3 (ゲーミングスマートフォン ASUS社 2020年)で**約6fps**で動作します。
– 物体検出には**yolox**という機械学習モデルを使用します。yoloxのpytorchのモデルファイルをonnx形式に変換して**javascript**上で動作させることによりスマートフォンで実行可能とします。
– **Google Colaboratory**に開発・実行環境を構築するので、パソコン、スマートフォンに何もインストール

元記事を表示

JavaScriptデザインパターン入門

## 1. はじめに

JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。

## 2. モジュールパターン

モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。

これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。

JavaScriptでは、クロージャを使用してモジュールパターンを実装することができます。

クロージャを使用してプライベートメンバー（関数、変数、データ）を包むことで、これらのメンバーがアクセス可能な範囲を作り出し、外部の世界か

元記事を表示

限界ド文系大学生がプログラミングをやってみて思ったこと

こんにちは、初めまして。堕罪ｵｻﾑです。
某文豪みたいな顔をしていますが、大学生で**国語学・日本語学**を専攻しています。
今日はざっとですが、初学者のｵｻﾑがつまずいているところをほんの少し掘り下げて記事を書いてみました。共感していただけたり、こんなところがわからないのか！と発見になればいいなと思います。よろしくお願いします！

ド文系の私がなぜプログラミングを始めたのか?

プログラミングとの出会いは唐突でした——。

というのも、当方限界大学生であるため就活云々で問題を抱えていまして、お付き合いをしている方にウワ～！と相談したところ、

「俺エンジニアだからプログラミング教えられるよ～」

という返事だったので私も、

「ほな、やってみるかあ」(プログラミングってJavaScriptとか、ぱいそん？とかそういうのだよね？)

という、ざっとこんな感じでした。

実際やってみて難しかったこと

1．HTML&CSSについて

まずはHTMLとCSSから始めました。引っかかった部分としては

**「閉じタグを忘れる」**
**「a

元記事を表示

7/26 プログラミング3日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
———————
前回は算術演算子を学びました
復習：算術演算子使って文字列と値を組み合わせて
コードを書く
“`
let values = “合計:” + 20 * 1000 ;
console.log(values);
//合計:20000
“`
今回はlet使ってやってみました
letだと上書きが出来てしまいますので
複数書く場合はconstで前回と同じようにした方が良いなと思いました
letで変数別々に書いてると
変数同じやつが使った時上書きしないか心配になりました。

⬜️本日3日目の課題
→条件分岐
if文とelse文を使う
演算子も使用する

時間がなかったのでここまでしか出来ませんでした
改めて時間作り条件分岐を再度学ぼうと思います。

元記事を表示

OTHERカテゴリの最新記事