f@ctor

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

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

ゆめみからの挑戦状3に挑戦した

# ゆめみからの挑戦状？
無職やめ太郎（本名）さんが出題しているプチ問題。
今回の問題はこちら。

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

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

# なんか悔しいのでリファレンスもガン見する
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`に変換されていますが、**環境や設定によって

元記事を表示

The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window’s load event.

## はじめに
RubyonRailsでアプリを開発していた時にjsを用いて写真プレビュー機能の作成時に起こったエラーです。
今回は２つの解決法を使って解説しましたので自分に合った解決法が見つかれば幸いです。

### 使用する環境
– MacOS(M１)
– Rails 6.1.4
– Ruby 2.6.3
– yarn 1.22.17
– Homebrew 3.5.0

### エラー文
「The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.」

## 解決法１：特定のページでのフルリロードを実行する

Before
“`application.html.erb
<%= javascript_pack_tag "application"

元記事を表示

jQueryのappendを書くときにメソッドチェーンでの階層構造っぽい書き方

備忘録として記載しておきます。
jQueryでappendを書くときに、こんな書き方をしていませんか？
例えば出力したいHTMLは以下の通りであるとき、
“`output.html

“`

jQuery
“`before.js
$(‘#hoge’).append(‘

【Angularアプリケーション開発 #9】ログイン機能とセッション管理について

# はじめに
今回、IDとパスワードでのログインを実装しました。
また、ログイン後の画面に直接アクセスした場合、ログイン状態を確認し、遷移先を分岐させるようにしました。

## ログイン
### ログイン画面
“`html:login.component.html

Login


Amazonの注文履歴を集計するメモ

## 概要
Amazonの注文履歴から、注文金額合計などを集計したかった。
ので、ささっとデータの確認をした方法をメモ。

### 使ったツール
– Chrome拡張「アマゾン注文履歴フィルタ」
– Tableau（集計できればなんでもいいが万能なので）
– Chrome Dev ToolsのConsole＋JavaScript（集計の検算に利用）

## Chrome拡張「アマゾン注文履歴フィルタ」をインストールする
### ダウンロードURL

※「注文履歴を見る」の項目でも触れるが、参考サイトにもリンクがあるので、リンク切れの場合はそちらを見るかググるかする。

https://chrome.google.com/webstore/detail/%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3%E6%B3%A8%E6%96%87%E5%B1%A5%E6%AD%B4%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF/jaikhcpoplnhinlglnkmihfdlbamhgig?hl=ja

### 引っかかりポイント
#### 拡

jQueryでajaxを動かしてみたので図でメモしてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745422/4fc96197-3462-258b-23bf-29a37ea15567.png)

初めてのウェブサービスに縦書きエディタを選んだ理由（２）

# 1.はじめに
　55歳を過ぎてWebの勉強を始め、[縦書きエディタ](https://www.sakubun.tokyo)を開発した[前回の記事](https://qiita.com/tategaki3/items/14266860629892376d29)が、思いのほかよく読まれたので、勝手に続編を上げさせてもらいます。コーディングも開発も技術系記事の執筆もなにもかも手探り。おかしい面も多々あることかと思いますが、遠慮なくご指摘ください。

# 2.縦書きにこだわる理由
　さて前回、縦書きエディタを開発した理由にGIGAスクールが関係していると書きました。児童・生徒が学校で使うChromebookのGoogle系ツールに縦書き機能がなく、国語の先生が困っているという話です。

　Googleは欧米の企業なので、Googleドキュメントなどが横書きなのは自然なことです。問題は日本語が縦書きも横書きもOKなことです。日本で出版される小説や文庫本、新書などは縦書きが主流ですが、技術系の雑誌や本はほとんどが横書きです。縦書きの文化を担ってきた出版、雑誌、新聞などのマスコミ業界はいずれも斜

完全未経験が２ヶ月半で一からWebアプリを作ったお話

# はじめに
ポートフォリオとして作成したWebアプリの紹介記事です。
アプリを作成する際に自分が何を考えて作成したのか、その過程をご紹介します。
苦労したことや楽しかったことなどもまとめましたので、是非最後まで読んでいただければと思います！

# 簡単に自己紹介
* 商社の営業マンとして働く29歳
* ポートフォリオ作成前は、Progateで基礎学習、Railsチュートリアルを一通りした程度

# アプリの概要と開発背景
### アプリ概要
* 自分の欲しいものを管理して支出予測するアプリです。
* サービス名は『Wantest』にしました。
* 欲しいものを登録して一覧化し、その合計金額を表示させます。

### 開発背景
* アプリの制作理由
みなさんは欲しいものを買うか迷ったり、欲しいものを買ってみて後悔した経験はありませんか？
私自身、本を買っても読まなかったり、ゲームを買っても結局やらなかったりと、買って後悔した経験が多々あります笑。
このアプリはそんな経験を少しでも減らせればという思いで開発に至りました。

* 誰のどんな課題を解決するか
**欲しいものを買うか迷っている

サムネ付きスライドショー作りました

便利なプラグインがたくさんあるスライドショーですが、できれば自作のものを使いたいと思いjsで開発しました。

ベースを作って自分のストック用として手動、自動、モーダルと1セット揃えました。
この際、逃げ腰だったタッチイベントにも挑戦。

## 手動スライド

[サンプルサイト＞](https://gallery.okamechan.com/slide/touch.html)

“`html:touch.html



【HTML & JavaScript & CSS】夏休みの自由研究的な感じでシューティングゲーム作ってみた。

# はじめに
:::note alert
シューティングゲームと書いていますが、そんな大層なものではないです。
プレイヤーがいて、敵がいて、少し動いて、弾が出る、その程度です。
プレイヤーは〇インビーを模しています。
:::
5日ほど夏季休暇があったので、何かを作ってみたいなという気持ちがあり挑戦してみました。

シューティングゲームの作り方は調べるとゴロゴロ出てくると思うのですが、折角？なので直接作り方を調べることはせずに手探り状態で自分なりに実装しました。

作業としては(本記事作成含め)1日2～3時間程度です。

滅茶苦茶なコードですが、すべて晒します。
汚いものを見ても耐えられる方のみ気が向いたときにご覧ください。
https://github.com/tacchan5424/CSSPrac

# アウトプット
※[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)を使うと遊ぶことができます。
![k1d4y-xjxj9.gif](https://qiit

Twitterの特定のユーザーの画像を全てDLするだけ

## 何を作ったか

友達に依頼されてTwitterの特定ユーザーのアップロードしている画像をまとめてダウンロードするプログラムを書いてみた。

流行りに乗ってdenoを使ってみた。

## できたもの

クリックして表示

汚いコードでごめんなさい

“`ts
import { download } from ‘https://deno.land/x/download@v1.0.1/mod.ts’;

const YOUR_BEARER_TOKEN = ‘YOUR_BEARER_TOKEN’;

const excludeNullFromKey = (obj: Record) => {
const newObj: Record = {};
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (value != undefined)

異なった高さの縦長の要素２つ、スクロールはじめと終わりをぴったり揃える。

:::note warn
この記事では、 heightが高い ＝ 長い、　heightが低い ＝ 短い　と表現しています。
:::

# 完成図

![完成図.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777827/53e26416-ce00-40af-1bd2-a32d0cce1ec1.gif)

長い要素にあわせて、短い要素の余白分を動かしていきます。
200vhくらいの高さの画像群を作るとイメージしやすいかもしれません。

以下のサイトを模写していて、調べてもなかなか出てこなかったので挑戦しました。
https://www.mammut.com/us/en

## コード

“`html:index.html

Loved by our

OTHERカテゴリの最新記事