JavaScript関連のことを調べてみた

filter() map() reduce()の意味と使い方

# filter()の使い方
filterメソッドは配列の要素を指定した条件で絞り込む関数です。
配列を1つ1つ判定して、関数の中でtrueになったものだけをまとめて配列として返します。
trueとなったもののみを配列として返すだけなので、実際に処理を加えるわけではありません。
Arrayオブジェクトが持つ関数なので配列にのみ仕様できます。

“`javascript
const array = [1, 2, 3, 4, 5]
const newArray = array.filter(value => {
return value > 3
})

console.log(newArray)

// 出力結果
> [4, 5] //配列として返す
“`

# map()の使い方

mapメソッドはfilterメソッドと違い、配列の各要素に処理を加えるメソッドです。

“`javascript
const arr = [10, 20, 30, 40, 50];

// mapの場合
const mapResult = arr.map(value => {
return

Three.jsのインポートで躓いた

# 初めに
最近Three.jsを趣味で触りたいと思い、勉強を始めました。初学者のため、誤りや不適切な部分があれば教えていただけると幸いです。

## 躓いたこと
マウス操作の機能をつけるために`OrbitControls`をインポートしようとしたところ、エラーになりました。

* 問題のコード
“`
import * as THREE from “./build/three.module.js”;
import { OrbitControls } from “./jsm/controls/OrbitControls.js”;
“`
* コンソールに表示されたエラー文
“`
Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “../”.
“`

## 考察
threeというモジュールが見つからないようなので、パスの位置が今参考にしている資料のバージョンと異なるみたい。
→今のバージョンの正

【JavaScript】console.log()に色をつけることができるらしい

## はじめに
先輩から教わった、小ネタ的なものですが個人的に面白いと感じたのでその備忘録。

## 本文
親の顔より見てきた`console.log()`です。
とりあえず簡単なサンプルコードを以下に。
“`javascript
console.log(‘コンソールに出力されるよ’);
“`

期待通りの結果ですね。
上記の`console.log()`に色付けをしていきます。
“`javascript
console.log(‘%c コンソールに出力されるよ’, ‘color: red;’);
“`

Reactに星評価UIを実装する

## Reactに星評価UIを実装する

Reactで簡単に星評価UIを実装する方法を紹介します。この記事では、`react-icons`パッケージを使用して星のアイコンを表示し、`react-bootstrap`パッケージを使用してスタイリングを行います。

完成イメージ

#### ユーザによる星評価：
– ユーザが星をクリックして評価を変更できます
– 通常はクリック可能な星アイコンを表示します

#### 星評価表示：
– ユーザの評価を表示するだけであり、評価を変更することはできません
– 通常はクリック不可能な星アイコンを表示します

### 1. `react-icons`のインストール

まず、`react-icons`パッケージをインストールします。

“`bash
npm ins

SequelizeのonUpdateはPostgreSQLで機能しない

## 今回、罠にハマった問題
データベースがPostgreSQL、ORMにsequelizeを使った環境で、migrate機能を使ってテーブルを作成しました。
データの更新日時を記録したかったので、updated_atのカラムを追加したのですが、UPDATE文を発行してもupdated_atは更新されませんでした。

“` migration.js
updated_at: {
allowNull: false,
type: Sequelize.DATE,
defaultValue: Sequelize.literal(‘CURRENT_TIMESTAMP’),
onUpdate: Sequelize.literal(‘CURRENT_TIMESTAMP’)
}
“`

（onUpdateがあるので日時は自動更新されそうな雰囲気ですが）

## 原因
PostgreSQLには、データの変更時に日時を更新する機能が備わっていない為、Sequelizeのmigrationファイルで設定してもデータベースには何も反映されていないと考えられます。

## 解決

Bootstrap 5に関するメモ

### 開発環境
– Windows 10 Pro(64bit)
– Bootstrap 5.3.0
– Bootstrap bundle.s 5.3.0
– jQuery 3.7.1

:::note info
随時、追加予定
:::

### 現在表示しているオフキャンバスをメソッドから閉じたい場合
“`javascript
// 現在開いているオフキャンバスのインスタンスを取得して、メソッドを呼び出している。
const $myOffCanvas = $(‘#myOffCanvas’);
const offcanvas = bootstrap.Offcanvas.getInstance($myOffCanvas);
offcanvas.hide();
“`

GASからLINEに通知を送る方法

# 概要
今回はGASからLINEのAPIを叩き、通知を送信します。GASとはJavaScriptをベースにGoogleが開発、提供しているプログラミング言語です。今回のようなAPIを呼び出すことに加え、Googleスプレッドシートなどの各種サービスと容易に連携させることもできるため、使い道は多そうな印象です。
# LINE Notify
LINEのAPIを利用するため、事前にトークンを取得しておく必要があります。手順などは以前の記事にも載せたので割愛します。

https://qiita.com/ricelectric/items/c57e4746df305d13dbf1
# Google Apps Script
テストも兼ねて試してみた程度なのでプログラムはシンプルです。Googleドライブの適当な場所にGASのファイルを作成し、以下のプログラムを貼り付け、実行するとLINEに通知が送信されるはずです。
“`javascript:main.gs
function main() {
sendMessage(“LINE Notify”);
}

function send

【Next.js】画像投稿、更新機能ならSupabase RDB × storage

# これはなに
ここではSupabaseのRDBとstorageを使って、アップロードした画像の表示と、次回アクセス時にも画像を保持し、再びアップロードすれば更新できるようなフォームを作っていきます。
ここまで紹介しているような記事がなかなかなかったので、参考までに。

今回はNext.jsを使ったやり方を紹介します。API Routeも活用します。

# Supabaseのセットアップ
今回は工程が多いので省きます。代わりにわかりやすく紹介している記事を紹介させていただきます。`URL`と`KEY`を忘れずに保持しましょう。`NEXT_PUBLIC_`がないとクライアントでは取得できないのでつけておきます。
Nextの環境ができたらルートディレクトリにこの`.env.local`をおいてください。

“`.env.local
NEXT_PUBLIC_SUPABASE_URL = https://xxxxxxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_KEY = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
“`

https

お手製のなんちゃってheadroom.js

## 🌃 背景

えらい人「スクロールに合わせてヘッダーを出したり引っ込めたりしたいんだけど….」

僕「あぁ、[headroom.js](https://github.com/WickyNilliams/headroom.js)っていうのを使えばいけますね！」

僕（なんか古い？全然メンテされてなさそうなんだが😢）

僕「他のライブラリにしたいけど、[ScrollMagic](https://scrollmagic.io/)とかはやりたいことに対してオーバースペックすぎるしな….（サンプル読み中）」

…あ？…これくらいなら別に自分で作れるくね？

**じゃあ自分で作るか！！**

という記事です（？）

## 🛠️ 環境

– **Vue.js** v2.7
– **Vuex** v3.6.2
– **tailwind** v2.1.4

## 🏁 結論

こういうコードになりました 🙈

“`jsx:scroll.js
let pastTimestamp, pastScroll;
/**
* スクロール速度測定
* @param {number} scrol

ChromeのDevTools（F12）で日常的に使うテクニック7選

# 概要

ChromeのDevTools（F12）の機能の中で私が日常的に使うテクニックを7つ紹介したいと思います。

フロントエンドの開発・デバッグ以外にも、他人が作成したWEBページの内容を確認したり、デザイナーが画面UIの検討などに役立ちます。

:::note warn
スクショの日付が違うため、説明用の画像のUIに差異があると思われますが、ご自身の環境と見比べて確認していただければと思います。
:::

# 起動方法

「**F12**キー」または「ブラウザ上で右クリックし**検証**」で下記のような画面が開きます。これが**DevTools**です。


# よく使うテクニック

## 1. HTMLを変更

DevToolsの*要素タブ*を利用し、「開いたWEBページのHTMLが構成内容を確認」や「画面表示しているHTMLを操

＜1: JavaScriptとは＞Progate学習修了者がJavaScriptPrimerを読んだら

# はじめに：
こんにちは。Satoです。
本稿では、Progate学習を修了した段階のプログラミング学習者が、JavaScriptPrimer（以下、Primerとします）を学習するとどうなるのかを記録したものです。基本的には自身のアウトプットを主眼に置いていますが、初学者が躓いた点とその解決方法も記載するつもりなので、良かったら参考にしてみてください。

# 学習事項：
## JavaScriptとECMAScript
・ECMAScript…どの実行環境（ブラウザ・サーバーなど）でも共通する仕様のこと
　補足：Ecma Internationalという団体が標準化している仕様らしい。
・JavaScript…ECMAScript＋実行環境の固有機能を含んだものを指す。

## 予約語とは：
constやletなどのように変数名を宣言できない、特別な意味を有するキーワードのこと。つまり、↓のような変数名（const）はダメだよーというお話。
“`
//ダメな変数名の事例
const const = “定数”
“`

## 文はセミコロンで区切る：
セミコロンはちゃんと書こう。

ReactFlowではじめるダイアグラムポチポチライフ

# はじめに
https://reactflow.dev

reactflowはfigmaやmiroのようなGUIでポチポチで図を作成することを容易にするライブラリです。これを使ってみてどんなことができるか試します。

公式ドキュメントは充実しているので、詳細はそちらを読めばわかると思いつつ、この記事ではざっくりとreactflowの使い方の紹介と、ドキュメントではわかりにくい部分について補足的に紹介します。

github repository: https://github.com/xyflow/xyflow
今回作成したサンプル: https://github.com/katamotokosuke/reactflow-sample-for-qiita

# reactflowの導入

すでにreactアプリがある場合は省略可能ですが、無い場合新たに作ります。

“`
npx create-react-app my-reactflow-app –template typescript
“`

上記を実行してできたディレクトリに移動して、reactflowをインストール

MediaWikiにpcommentプラグイン風のコメント機能をつける

PukiWikiのpcommentプラグイン風のコメント機能を提供します。
使用した記事の議論ページからコメントを読み込んで表示します。

## 基本仕様
* テンプレートなどでpcomment-widgetクラスをつけたDIV枠を追加すると、Javascriptがレンダリング処理を行います。
* オプションでコメントツリーの最大個数を制限できます。
* 議論ページが複数のセクションで分かれている場合にはセクションを個別に指定することができます。
* オプションで非ログインユーザーの場合は書き込みできないようにすることができます。
* 箇条書きのコメントにはラジオボタンをつけて表示。
* チェックしてコメントを書き込むと吊り下げて返信ができます。
* 書き込み後はテンプレート部分のみを再読み込みします。

## ソースコード
“`javascr

ブラウザの Web Bluetooth API を使って toio の時間指定付きモーター制御を扱う（環境は p5.js Web Editor を利用）

## はじめに
ブラウザの Web Bluetooth API と toio を組み合わせたお試しについての記事です。

toio の通信仕様は公開されていて、それに従った BLE での処理を行うと、toio を様々なプログラミング言語で制御することができます。

今回の記事では、ブラウザ上で実行する JavaScript の処理で、以下の toio の時間指定付きモーター制御を扱います（その際に、ブラウザの API である「Web Bluetooth API」を使っています）。

●モーター | toio™コア キューブ 技術仕様 ＞ 「時間指定付きモーター制御」
　https://toio.github.io/toio-spec/docs/ble_motor/#%E6%99%82%E9%96%93%E6%8C%87%E5%AE%9A%E4%BB%98%E3%81%8D%E3%83%A2%E3%83%BC%E3%82%BF%E3%83%BC%E5%88%B6%E5%BE%A1

その際に、時間指定付きモーター制御の時間指定の値などを、処理の途中で書きかえつつ toio を動かすという

if文の基本の書き方

“`js
if(条件){
console.log(条件が真の時に出力);
}
“`

最初の条件が偽だったときにelseの方を出力
“`js
if(条件){
console.log(条件が真の時に出力);
} else {
console.log(条件が偽の時に出力);
}
“`

JavaScriptで繰り返し処理書くたびにググるのを卒業しよう

## はじめに
JavaScriptで配列やオブジェクトの繰り返し処理を書くときに、いつもググっていませんか？
`for…in`なのか、`for…of`なのか
はたまた`for`を使うか、`while`を使うのか
わたしはググっていました。

`for`と`while`ならわかりますが、`for…in`と`for…of`がいつもふわっとしています。

しっかり基礎をおさえて、繰り返し処理のググりとおさらばします。

## while系
`while`と`do…while`があります。
どちらもループ処理を実施する回数が決まっていない場合に適しています。

### while
ループを実施するための条件判定を、処理の**実施前**に行います。
条件の内容によっては、一度もループをしないこともあります。
“`javascript:while文
while (条件式) {
// 何らかの処理
}
“`

### do…while
ループを実施するための条件判定を、処理の**実施後**に行います。
どんな条件であっても、必ず1度は処理を実施します。
“`jav

Minori6.html

“`Minori6.html