f@ctor

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

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

passport-localで詰まった話

# 環境

* Dockerコンテナ内で作業
* Node.js 18.15.0
* express 4.18.2
* passport 0.6.0
* passport-local 1.0.0(たぶん)
* express-session 1.17.3
* ビューエンジンにはpugを使用

# やりたかったこと

* ログインに関する処理は`routes/login.js`に書き、
`app.js`に書く内容は最低限にしたい。

* `/login`にGETでアクセスするとログインページが表示され、
そこにあるフォームにユーザー名とパスワードを入力すると、
`/login/auth`(authって何？)にPOSTリクエストが送られる

* `/login/auth`にPOSTでアクセスすると、passportによってログインができる

…のですが、色々なサイトの見様見真似でコードを書いていたら、
ログインページではログインができているのに、**それ以外のページだとログインできていない**現象が発生しました。

# やらかしたときのコード

もともとは以下のようなコードになって

元記事を表示

【Nuxt3】ログイン状態などに応じて layouts/default.vue 内の表示を変える(ときにハマった点)

Nuxtエアプです。
初記事なので至らない点あると思いますが書いていきます！
おかしな点あったら教えてくださると嬉しいです！

# やりたいこと
タイトルのままですが、ログイン状態に応じて layouts/default.vue の内容を変えたいです。
具体的には setup script の中で cookie などを用いたログイン関数を呼び、そのレスポンスに応じて login ボタンまたは logout ボタンを表示することを目標とします。

簡易的なコード例
“`vue
// template 内


…


```

バージョン指定する場合は

元記事を表示

【Handpose】「この問題わかる人～？」～在りし日の思い出～

# いつのことだか 思いだしてごらん
先生の「この問題わかる人～？」は、誰しも聞き覚えがあるのではないだろうか。
もう戻れない学生時代を懐かしく思う。

ちょっとアプリで再現してみますか。
**名付けて、『「この問題わかる人～？」～在りし日の思い出～』**

（ネーミングセンスはどこかに落としてきました。）

# どんなのつくろう
:::note info
【目標】
　■ 挙手を先生に気づいてもらい指してほしい（ml5.js：Handpose）。
　■ 発話にて回答したい（Web Speech API）。
:::

# 技術・環境
ml5.js：Handpose（JavaScriptライブラリ）
Vue.js（JavaScriptライブラリ）
Web Speech API（発話の聞き取り）
Bootstrap（Web制作サポートツール）
CodePen（アプリ制作環境）
Netlify（完成アプリ公開環境）

# 授業はじめるぞ～
## Netlify
**使い方はアプリ内に記載していますので、さっそく遊んでみてください！**
（誤判定の確率を下げるため、カメラから50cm以上離れてく

元記事を表示

Ajax通信の私なりのベストプラクティスについて

## 背景
・それほどアクティブユーザーがいないウェブアプリケーションにおいて、やたらDB負荷が高かったりした際に、色々調査して、負荷対策や効率化を行なった際の話

## 静的なコンテンツに関しては、リクエスト時のxhrオブジェクトを再利用する
静的コンテンツの取得に関しては、同じリクエストパラメータで複数回リクエストを送信する設計を避け、既に実行された xhr オブジェクトの再利用を行うことで、サーバー負荷の軽減を図ります。

```javascript
// サンプルコード
var requestCache = {};

function fetchContent(params) {
var key = JSON.stringify(params);
if (requestCache[key]) {
return requestCache[key]; // 既存のxhrオブジェクトをそのまま返却
} else {
var xhr = $.ajax({
type: "GET",
url: "your-endpoint",

元記事を表示

ミリしら関数型プログラミング

# はじめに

関数型プログラミング、難しい！
と思ったことはありませんか。僕はあります。

関数型プログラミングは最近注目度が上がっているようで、「オブジェクト指向 vs 関数型」みたいな記事もありますし、Go 言語や Rust はクラス構文をサポートしてなかったりで、ワードを耳にする人も多いのではないのでしょうか。

ところが関数型プログラミングに関する情報は意外にも少なく、かつ難しい情報が多い気がします。

ここでは関数型プログラミングについて 1mm も知らない人をメインに、基礎概念から説明をしていこうと思います。

かくいう筆者も関数型プログラミングに造詣が深いわけではないので、間違っている箇所等あれば教えてくださればと思います。

# そもそも関数とは？

関数型プログラミングと言うのですから、まずは関数って何だというところから入りましょう。
皆さん中 1 のときに関数とはこういうものだと教わったはずです。

```
xの値が決まると、それに対応してyの値がただ一つに定まるとき、yはxの関数である
```

いやそれはそうだけど...って感じですよね。
まあまずは関数ってこ

元記事を表示

JavaScript 第5回 addEventListenerのコールバック関数設定で間違えたので

# はじめに
第3回、4回の記事では、addEventListenerメソッドを使用して、ボタン押下時の動作を試してきました。
addEventListenerの構文の一つのaddEventListener(type, listener)において、listener部分は、「イベント発生時に通知を受け取るオブジェクトで、関数。」でしたが、この関数は、コールバック関数と呼ばれます。
今回は、このコールバック関数について、理解したいと思います。
addEventListenerのlistener設定で誤った設定をしてしまい、はまったので記録しておきたいと思います。

# 今回実施する内容
コールバック関数を使用して、Hello world!を画面に表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/23067031-ec61-8c20-e1fd-34ab9063cc81.png)

# ソースコード(Git Hub)
https://github.com/Build-Mo

元記事を表示

[redux]redux-persistの使い方

# はじめに
redux-persistの使い方について簡単に書いていきます。

# redux-persistとは
redux-persistは、storeに保存したデータを永続化してくれるライブラリです。

https://github.com/rt2zz/redux-persist

# 使用方法
使い方の説明をしていきます。

## インストール
まずはインストールです。
```:npm
npm install redux-persist
```

```:yarn
yarn add redux-persist
```

## 実装コード
コードを書いていきます。
まずは、ルートファイルに以下のコードを書きます。
```index.tsx
import { store, persistor } from "../src/store/store";
import { PersistGate } from "redux-persist/integration/react";
import { Provider } from "react-redux";

root.render(

元記事を表示

ESLintのチェックを無効にする方法

# はじめに
ESLintを特定の箇所のみ無効にする方法について書いていきます。

# 設定方法
以下がサンプルコードです。
※「node-schedule」のコードに対して、設定していきます。

```
const rule = new schedule.RecurrenceRule();
rule.tz = "Asia/Tokyo"; // 日本時間
rule.hour = 14;

// eslintを無効にするコメント
/* eslint-disable */
const job = schedule.scheduleJob(rule, function () {
pdf.deletePdfFolder(APP_NAME);
});
/* eslint-disable */

```
このようにすることで、「/* eslint-disable */」で囲った部分は、eslintが適用されないようにできます。
どうしてもeslintが邪魔だなっていう部分に適用させたい時に使えるのかなと思います。
また、ファイル全体で、eslintを無効にしたい場合は、ファイルの先頭で「/*

元記事を表示

ユーザーの興味関心を取得するGoogle Chrome Topics APIの概要

[Supership](https://supership.jp/)の名畑です。「[鬼太郎誕生 ゲゲゲの謎](https://www.kitaro-tanjo.com/)」は鬼太郎ファンはもちろんのこと、鬼太郎を知らない方にもぜひ見て[水木しげる](https://www.mizukipro.com/)の世界への入り口としてほしい映画でした。ただし[PG12](https://www.eirin.jp/img/4ratings.pdf)なのでご注意を。

## はじめに

2月1日に「[Google Chrome プライバシーサンドボックス Topics APIの概要と試し方](https://qiita.com/nabata/items/023beb585949aa69fef3)」という記事を書きました。

あれから10ヵ月近くが経ち状況も変わりましたので、改めてまとめます。

## プライバシーサンドボックスとは？

> ウェブ向けのプライバシー サンドボックスは、サードパーティ Cookieを段階的に廃止し、隠されたトラッキングも制限します。新しいウェブ基準（英語）を策定すること

元記事を表示

OTHERカテゴリの最新記事