f@ctor

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

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

N予備校の教材をブックマークする拡張機能を作った話

# N Bookmarksについて

N Bookmarksは、N予備校の教材をブックマークすることができる拡張機能です。

この拡張機能を入れると、「質問する」ボタンの隣に **「ブックマーク」ボタンが出現するようになります。**

![btn.png](https://camo.githubusercontent.com/7deb330d5764889d58fd73f48ab970b4bb82d74a049fc849d21a4bc3dd0fd0a2/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f333538383038332f36383739346461312d366534302d646238632d363639652d3364343462396235343862352e706e67)

ブックマークした教材は **「マイコース」から見ることができます。**

![マイコース.png](ht

元記事を表示

Wiki.js を AWS ECS on Fargate + RDS で動かすハンズオン

Wiki.js は無料で利用できる OSS の Wiki です。高速な Node.js エンジンで実行され、多機能でデザインもモダンな次世代の Wiki です。

Wiki.js の概要・特徴についてはこの記事にまとめています。

https://qiita.com/Michinosuke/items/e84e0cf00b0a28f0e0f7

そんな Wiki.js を AWS Fargate 上にデプロイしてみます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/1a7c8c43-117c-465b-af60-fe0d719a1e44.png)

## データベース

Wiki.js はデータベースがないと起動できません。まずはデータベースを作成しましょう。

AWS コンソールの RDS のページから、「データベースの作成」を押下します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/

元記事を表示

Pleasanterの期限付きテーブルでユーザの操作が最小限、かつ自動で見積工数と実工数との予実差を計算するタスク・工数管理テーブルを作成した

# Pleasanterの期限付きテーブルでユーザの操作が最小限、かつ自動で見積工数と実工数との予実差を計算するタスク管理テーブルを作成した

つたない文章・長文ではございますが、何卒ご容赦ください。
また、本記事に掲載しておりますキャプチャが少しぼやけており見えにくいことをあらかじめご了承ください。

## はじめに

私はSI案件にて、某大手自動車メーカー様とお仕事をさせていただいております。開発当初から参画させていただき、現在は運用・保守を担当させていただいております。
運用・保守では課題管理として、毎日さまざまな課題が起票されるため、私自身のタスク管理が行き届いておりませんでした。さらに、SI案件に使える工数が決まっていますが、こちらの工数管理も同時にできておりませんでした(ちなみに、今期の目標です)。
そのため、今回の投稿内容にあるようにタスク管理＆工数管理をするためにPleasater(プリザンター)の期限付きテーブルに標準機能とJavaScriptを実装したテーブルを作成しました。
また、こちらのテーブルでは、ユーザの操作を最小限にできるような工夫を実

元記事を表示

Kiite Worldやニコニコ動画で再生している動画のなうぷれツイートをワンクリックでコピーするブックマークレット

# 1.概要
Kiite Worldや、ニコニコ動画で再生中の動画のなうぷれツイートを、たったワンクリックでクリップボードにコピーします。

Kiite Worldでなうぷれしようとすると、新しいタブが開かれるのがうっとうしかったので、作りました。

((ついでにニコ動のなうぷれにも対応させました。))

# 2.ブックマークレット
“`javascript:
javascript:(function(){const currentURL=window.location.href;if(currentURL.startsWith(“https://world.kiite.jp”)){const iframeVideo=document.querySelector(“iframe”);const textVideoId=iframeVideo.parentNode.id;const videoId=textVideoId.substring(13);const elements=document.querySelectorAll(“.bgt2.primary–text”);con

元記事を表示

Fractional Indexingによるデータ並び順の実装

## はじめに
この記事は一休.com Advent Calendar 2023 9日目の記事です。

アプリケーション開発において、ユーザーがデータを任意の順番に並び替えたいというユースケースが発生することがよくあります。

今回は、 Fractional Indexing　というアルゴリズムを使って、一つのレコードを更新するだけで順番を表現できる手法を紹介したいと思います。

## 一般的な手法
### 1. レコードにIntで順番を持たせる
素朴な方法を考えると、それぞれのデータに1〜連番を振っていき、順番を変更したら番号も振り直すという手法が取られることがあります。

以下のようにpositionで順番を表現します。
|ID|NAME|POSITION|
|—|—|—|
|1|A|1|
|2|B|3|
|3|C|2|

この実装にした場合、AとCの間に新しいレコードを追加しようとすると、 C = 3 と B = 4 というように複数のレコードに新しい順番を書き込む必要があります。

件数が多くなるほど、書き込み件数も増えていきます。

### 2. レコードに浮動小

元記事を表示

NS高キャンパスの図書管理システム開発！

# Flaskを用いたCPの「図書管理システム開発」の概要
![SystemImg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538359/e6351992-8b1b-f224-0a1f-d9a791933189.png)

### 制作デモページ
制作中のものになりますが、９割型完成しています。
ngrokを使用したデモになるので、自宅でProgramを動かしてないときは止まります。
基本的にこの記事公開中は動かしっぱにしておく予定ですが、メンテナンスの影響で停止させることや想定外のエラーで停止する可能性があります。
データベースなどは、テスト用のデータなので、アカウント登録などは自由にやっていただいて大丈夫です。
https://frank-sole-boss.ngrok-free.app/

### 制作意図
筆者が通学するNS高等学校”F”キャンパスには３００冊以上の先輩や歴代のキャンパス長が寄贈していただいた本が多くあり、もっと管理を確実にしてより多くの人ひとに本の魅力を伝えたいとい

元記事を表示

React入門７: ゲームの勝利判定

# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式)](https://csb-jp.github.io/)

## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. [React入門２: 盤面の作成](https://qiita.com/banana_bancho/private/c50495b5d4c30555cec3)
1. [React入門３: イン

元記事を表示

早い、うまい、安いブラウザでのデバッグ方法

# はじめに
WebApp開発の際に有用かつ便利なブラウザでのデバッグ方法をいくつか見つかりました。
その中に、特に利用頻度が多い方法を紹介します。
※本記事はChrome の機能をご紹介します。
# 本題

### ログポイント

ブレークポイントに、console.logを追加することで、実行中のプログラムを中止せずにログを残すことが可能です。
![logpoint.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3623071/3cb252cb-646c-bfcf-a38f-52c84749cb5e.gif)

その他、console.logではなく、console.countを使用すると、そのラインが何回実行されるかも確認できます。

### Watch Pane

Watch Paneにもconsole.logを追加可能です。例えば、プログラムがデバッガーで停止する度、localStorageを確認したければ、Watch Paneにconsole.table(localStorage) を追加

元記事を表示

ロボコンの得点自動集計システムを作った件 (ショート版)【WRO Scoring System】

# 目次

| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | この本記事について |
| 2 | [WROとは](#2-WROとは) | WROについて説明 |
| 3 | [得点集計システムとは](#3-得点集計システムとは) | 作製したシステムについて説明 |
| 4 | [システム要件・システム構成](#4-システム要件-システム構成) | システムの具体的な仕様について |
| 5 | [完成したシステム](#5-完成したシステム) | スクショを交えながらシステムを紹介 |
| 6 | [まとめ](#6-まとめ) | まとめ |

# 1. はじめに

この記事は、2023年12月25日公開予定の [小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】]()のショート版記事です。

↑の記事ですが、書きたいことを書きすぎて分量がとんでもないことになってしましました… **(ざっと2万字程度…)**
そこで、初めての方にもサラッと読んでまずは興味を持ってい

元記事を表示

【フォーム制作】バックエンドからの要望に基づいたコードの書き方

# はじめに
弊社ではフロントエンドとバックエンドが分かれているので、組み込みがあるときにはHTMLデータを共有して制作してもらいます。
今回は備忘録も兼ねて、実際にあったバックエンドからの要望に基づいたコードの書き方をまとめました。
あくまで弊社バックエンドとのやりとりに基づいているので、他社様だとやり方が違う部分があると思いますが、何か少しでも参考になる部分がありますと幸いです。

# コードの書き方
## nameやvalueは基本的に空でOK
バックエンド側で管理しているデータベースの値が入るので、基本的に場所だけ用意すればOKです。
動作確認等で`name`を設定する必要がある場合は、その旨をコメントで残すようにしています。

“`html:index.html

// 動

元記事を表示

2023年中にuseRefについておさらいしておく

こんにちは！！株式会社エイチームライフデザインの @TMDM と申します。
この記事は、[Ateam LifeDesign Advent Calendar 2023 シリーズ1](https://qiita.com/advent-calendar/2023/ateam-life-design)の9日目の記事です。

# useRefについて理解を深める

useRefには主に2つの用途があります。

– DOM要素への参照
– Reactコンポーネント内の特定のDOM要素に参照できます。参照されたDOMはuseRefで操作が可能です。
– データの保持
– コンポーネントの再レンダリング間で、データを保持することが可能です。
useStateとは違って、値が変わっても再レンダリングされません。

上記を念頭に置いて、[公式の内容](https://ja.react.dev/reference/react/useRef)を実際に動かして理解していきます。

—

# useRef

> レンダー時には不要な値を参照するための React フックです`
– useRefに値を保

元記事を表示

うるう年の一年前を取得すると…

## 冒頭

現場のＰＪでの詳細設計にて以下のような記載をしました。
「○○日より1年前の日付を取得する。」
特定の日付を基準にして、その前後の日付を取得するというよくある処理だと思うのですが
レビューにて「うるう年の一年前の日付を取得した場合どうなりますか?」と質問があり、私もふと疑問に思いました。

「うるう年の一年前の日付を取得したら、前年の3月1日なのか?それとも2月28日なのか？」

今回の記事はそんな疑問から始まった記事であり、実際にいくつかの言語、DBで試してみた結果を書いていきたいと思います。

## Javaの場合

Javaにて日付の計算を行う場合、Calendarクラスを使用します。Caleandarクラスのインスタンスを生成し、生成したインスタンスのsetTimeメソッドの引数にDate型を指定することで日時の設定ができます。そしてaddメソッドにて第一引数にCalendar.YEAR、第二引数にint型(加算の場合は正の数、減算の場合は負の数)を指定することで日付の計算が可能となります。
以下がサンプルコードになります。
“`java:main.java
i

元記事を表示

【JointJS】カスタム要素にHTMLのタグを使用する

## はじめに

この記事はJointJSのカスタム要素で、SVG外の通常のHTMLタグを使用するための方法を紹介します。
この記事を読むためには[昨日の記事](https://qiita.com/acnaman/items/d9eb80ce25ebd50749d9)のカスタム要素の作り方の知識が前提となります。カスタム要素自体の作り方がわからない方は、まずそちらの記事をご確認ください。

https://qiita.com/acnaman/items/d9eb80ce25ebd50749d9

## HTMLはそのままでは利用できない

JointJSで描画される図形は、最終的にはSVGのタグで出力されます。
SVGの中にHTMLのタグをそのまま入れてしまうと、構文エラーとなり図形が描画されなくなってしまいます。

## 利用するには`foreignObject`を使用する

ではHTMLタグは利用できないのか、というとそうではありません。SVGには``という要素が用意されており、この要素の中ではHTMLのタグを使用できます。

### コード例

“

元記事を表示

【JavaScript】特定の要素までスクロールする

以下のように記述すると特定の要素までスクロールできます。

“`js
const element = document.getElementById(‘sample’)
element.scrollIntoView({
behavior: ‘smooth’
})
“`

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

元記事を表示

return 0はreturn falseではない？

formのvalidationをするためのBest Practiceを探しています。
是非いいアイデアがあれば教えてください。

フォームの中に複数のinput要素等があって、それぞれのvalidationを行う必要がある場面というの多々あると思います。
しかも一つのページに複数のformがある場合などは、validationは関数化する方がいいと思割れますので、いつも私は下記のような手法を取っています。その際に、少しつまづいた点があるのでメモを残します。

フォーム内に位置する複数のinputのうち、一つでも空欄があれば送信しないという単純な仕組みです。

“`html