f@ctor

JavaScript関連のことを調べてみた2022年08月23日

JavaScript関連のことを調べてみた2022年08月23日
目次

規約などが更新された時に確認をして自動遷移する

## 規約などが更新された時に確認をして自動遷移する

よくある「規約が更新されましたので、ご確認ください。」をPHP内で実現したかったので。

### 必要なもの

– 新規規約開始日は9月1日
– DBには同意日をDATE TIMEで保管済み
– DBから$result[“agrDate”]で同意日を取得済み

### コードの骨子

“`php:top.php
$new_confirm_date = date(“Y-m-d H:i:s”, strtotime(‘2022-08-31 09:00:00’));//前の日にしている
$agree_date = date(“Y-m-d H:i:s”, strtotime($result[‘agrDate’]));

//規約の同意日を確認
if($new_confirm_date >= $agree_date){
/*規約更新ページへ移動する*/
$doui_alert = “

# ヒントと思しき？ツイート

このツイートと一緒にツイート履歴に出てた感じなのでもうこれほぼ答えやん的な気がした

# なんか悔しいのでリファレンスもガン見する
Arrayに関する一覧を見たいので[Arrayのページ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)を見て使えるメソッドを探す
→やっぱりfla

元記事を表示

figma pluginをサクッと作って理解する

## この記事について
[figma公式](https://www.figma.com/plugin-docs/setup/)が提供しているサンプルプラグインを作成する記事です。
前半はプラグイン作成、後半はどのように動作しているのかをまとめています。

「プラグイン作るのってなんか難しそ〜」と思いなんとなく試せずにいたのですが、やってみると意外にもすんなり作成できたので忘れないようにまとめました。

## 対象
- figmaプラグインを作ったことない方
- figmaプラグインってどんな感じで動いてんのーが気になる方

## 事前準備
- figma-pluginを動作させるコードを管理するリポジトリ(管理したい方のみでOK)
- figmaデスクトップアプリ
- VScodeなどのお気に入りエディタ

## figma でテンプレートを作成する
1. figmaデスクトップアプリ版にて、「Plugins > Development > New plugin...」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-

元記事を表示

Next.js の Middleware を使ってサクッと迷惑 Bot たちを追い払う

こんにちは。ぬこすけです。

皆さんは Bot のアクセスに悩まされたことはありますか？

**私はあります。**

[私が個人開発しているサイト](https://nuko-programming.com/)でも Bot からガンガンアクセスがきます。
![スクリーンショット 2022-08-18 22.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/dfec9cf9-ca65-cc0b-fce9-462dcd56aca1.png)

1ページリクエストすると画像や js ファイルなどの追加のリクエストも走るのでやっかいです。
私のサイトは `Cloud Run` で動かしていますが、リクエストに比例して料金が加算するようにしているので、 Bot からの余計なリクエストを抑えてお財布に優しくしたいところです。

一方で、 `Next.js` のバージョン 12.2 で `Middleware` という機能が安定版としてリリースされました。

https://nextjs.org

元記事を表示

【挑戦状の正解発表＆解説】配列の要素を増やすには？〜面白解答も紹介〜

# 先日、Twitter上でこんなクイズを出題しました

↓こちらです。

### この記事では、クイズの正解発表をして行きます。

# クイズの内容

クイズの内容は以下です。

### 【JSクイズ】
`/* ここに回答を書いてください */` の部分を埋めてくださいやで！

```ts
const array1 = [1, 2, 3, 4, 5, 6]
const array2 = array1./* ここに解答を書いてください */

console.log(array2)
// -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]
```

---

要は、

> `[1, 2, 3, 4, 5, 6]`という配列から
> `[1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]`という配列を生成するには
> どうすればい

元記事を表示

Streamlit / How to create Components

https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634

# Tutorial

https://dev.to/andfanilo/streamlit-components-scatterplot-with-selection-using-plotly-js-3d7n

https://streamlit-components-tutorial.netlify.app/

https://auth0.com/blog/introduction-to-streamlit-and-streamlit-components/

https://blog.streamlit.io/elm-meet-streamlit/

https://blog.streamlit.io/how-to-build-the-streamlit-webrtc-component/

元記事を表示

【Tesseract.js】画像から数字を読み取って数独を解くWebアプリを作ってみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729479/f9559eae-3e19-602d-8d29-03cedab109d4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729479/19f8728a-851d-65f3-d4d2-802abb5a02c5.png)

# はじめに
　タイトルの通り、画像から数字を読み取って数独を解くWebアプリを作ってみました。現状では、うまくいく場合もあれば、そうでない場合もあります。

　完全に自己満足なので、詳しい説明はしないつもりです。

# `Tesseract.js`について
　[この記事](https://qiita.com/hiroism/items/bd537e014e71d3cab1f9)を参考にさせていただきました。
　ざっくり説明すると、`Tesseract.js`とは、画像から文字を認識するためのライ

元記事を表示

ajaxでリクエストしたレスポンスをもとにエラーメッセージを表示する仕組みを簡単に一枚図で説明する

# やりたいこと
### ボタンをクリックすると、、、

### エラーメッセージが表示される

## 一枚絵

元記事を表示

deno deployで「ReferenceError: h is not defined」が出たときの対処法

deno deploy上でReactなどのライブラリを使ってJSXを記述した際に、「`ReferenceError: h is not defined`」というエラーが発生することがあります。これは、JSXを使ってSSRする際のオプションの設定方法が原因です。

特にこのエラーは「本番環境ではエラーが出るがローカル開発ではエラーが出ない」という事態になりやすく、なかなか開発中は気づきにくいです。

この記事では、このエラーの解決方法を紹介します。

## 原因

まず、DenoはJSXを直接実行することができます。ただし実行の際に、裏側ではJSXが素のJavaScriptに変換されたうえでJavaScriptに渡されます。

```tsx:このソースコードは…
const a =

hello world

```

```ts:このように変換されてから実行される
React.createElement(div, null, "hello world"));
```

上の例では`React.createElement`に変換されていますが、**環境や設定によって

元記事を表示

OTHERカテゴリの最新記事