f@ctor

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

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

【便利アプリ】都内の路線を使いこなす！鉄道攻略アプリEKICHIKA

> この記事は，東京大学工学部電子情報工学科/電気電子工学科の後期実験「情報可視化とデータ解析」の自由課題でチーム「agegyoza」として作成した制作物を，少しでも多くの方に知っていただくことを目的として投稿したものです．
また，大変面白い実験なので，興味のある eeic 生は是非受講を検討してください！

# 都内の鉄道って…

突然ですが皆さん，東京都内の鉄道を利用されたことはありますか？ズバリこれが都内の路線図です！
![スクリーンショット 2022-07-19 22.09.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1322113/e365190e-5fbb-6afc-dba4-be0192da9412.png)
> [地図ナビ](https://www.map-navi.com/) 様より転載

__いや，路線も駅も多すぎやろ．__

この図はきれいにデフォルメされてかなり見やすくなっていますが，それでも **「都内の鉄道，複雑すぎない…？」** というのが私の感想です．

元記事を表示

インスタグラムの写真を海外へ！#個人開発 #personaldevelopment #个人发展

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

Twitter や Facebook, Line など日常的に SNS を使うことは多いでしょう。
とりわけ、写真を共有する場合はインスタグラムを使うことも多いのではないでしょうか。

私もインスタグラムを使っていて、美人なお姉さんの写真を眺めたり、芸術作品と称するクソ落書きをアップしていたりします。

![スクリーンショット 2022-07-23 12.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/1de6d303-ce5a-e5b3-443f-32b247663d29.png)

https://www.instagram.com/miyaaaaaa414/

インスタグラムは「#猫」のようにハッシュタグをつけて写真を投稿することができ、ユーザーはハッシュタグを使って写真を検索することができます。
もちろん、「#cat」のように英語でハッシュタグをつければ世界の人向けにも写真を共有できたりします。

もし自分の写真を海外向けに発信したいとき、イ

元記事を表示

【「createElementNS()」を使う必要あり】 p5.js Web Editor上の JavaScript で SVG を動的に生成（SVGフィルターで試す）

以前、以下の SVG を使ったモーションパスを JavaScript で生成したかったので、色々調べてみて試した内容があり、それを記事にしてみます。

将来の自分へのメモも兼ねているので、見返しやすいようにシンプルな内容の記事にできればと思います。

## 今回扱う事例
JavaScript で SVG を動的に生成する話を書いていくのに、冒頭のモーションパスの例だと内容がシンプルにならなそうでした。
そのような中、最近書いた以下の記事は SVG の内容がシンプルなので、それを題材にしてみようと思います。

●p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用） – Qiita
　https://qiita.com/youtoy/items/217bfe7e940f2a7e2626

## JavaScript で SVG を動的に生成する時のポイント（「createElementNS()」を使う）
冒

元記事を表示

【#38 エンジニア転職学習】Go WebApp　フロントエンド部分作成

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

使用しているGoのUdemy教材後半部分である、
Webアプリ作成演習を学習していきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。

https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
本日はCandleStickのデータフレーム作成、APIHandler、jQueryを使用したフロントエンド部分作成を学習しました。

* データフレーム
* APIHandler
* **フロントエンドchart作成　←Topics!!**

# フロントエンド chart作成
以下今回のフロントエンド部分作成時の個人的ポイントです。
* chart作成のHTMLは基本的なものは`developers.google.com/chart/`からテンプレート取得
* jQueryは「Google Hosted Libraries」よりリンク

元記事を表示

【JavaScript・HTML・(Python)】tableにあるボタンを押した行をモーダル上で削除する

### ※注意！！
タイトルでは、「削除する」とありますが、記事に書いているのは、**tableの1行をボタンを押してモーダルを出す→削除する手前まで！！！** です。
削除機能実装については書いていませんのでご了承ください。

## 本記事の目的
1. JavaScriptを使って「欲しい！！」と思った**テーブルの行の情報を取得**できるようになる
1. ボタンをクリックして、**クリックした行の情報を取得**できるようになる
1. 上から降ってきた画面(モーダル)上のボタンを押して、プログラムを実行する手前まで実装することができる

の3つです！

## 目次
1. 実装した機能
1. この記事を書こうとした経緯
1. 具体的な実装方法
1. 参考にしたサイト

## 1. 実装した機能

今回実装したい機能は、こんな感じです。
![delete_event_category.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/782282/676d34a9-8de8-4300-822a-e4db89

元記事を表示

Markdownでレポートを書きたい2

こちらの記事は，[Markdownでレポートを書きたい](https://qiita.com/tt_and_tk/items/e16c524c9e647813d6e8)の続きです．

# レポートを楽に，綺麗に書きたい
※読み飛ばしOK

レポートを書くというのは，非常に時間のかかる行為です．できるだけ効率的に短時間で，でもきれいに書きたいという気持ちは多くの学生が抱いていることと思います．
そこで前回の記事ではMarkdownでレポートを書くということを考え，表紙や図番号などを作りました．でも，図番号については[こちらの記事](https://qiita.com/fujino-fpu/items/eeafe3143ae40addff84)などいろいろなところで紹介されている通りすでにあるようです．

いったん話は変わりますが，学校で求められるレポートは意外と多岐にわたります．「この社会問題について，自分の意見をA4二枚にまとめて」と言われることもありますし（実際に言われた），「この日の授業は来れないから代わりに練習問題を解いて提出したら出席扱いにする」と言われることもあります（実際に

元記事を表示

未経験からITエンジニアとして転職するためにテックキャンプに通ってみた

# テックキャンプを受講してみて
私は、未経験でのITエンジニアへの転職を行うためにテックキャンプというプログラミングスクールに通っていましたので、今後検討される方のために感想を中立な立場として記述したいと思います。
なお、こちらの記事の内容は一個人の見解ですので、参考程度にしていただければと思います。
その上で、私の属性は以下を参考にしていただければ幸いです。

# 前提条件
【当方の前提条件】
・大学は私立文系で3年次より金融専攻
・銀行の営業員として業務に従事
・新卒で入社した企業を1年で退社した、24歳の人
・在職中にHTML&CSSは本を使って学習
・スクール学習期間中は、11時間程度学習（土日関係なし）

# 結論
テックキャンプはお勧めできる。（条件付き）
考える上で「学習内容について」「費用面」「転職活動面」の大きく３つに分けてお話しします。みなさんが気になるであろう上記３つ以外にももちろんスクール選びのための要因や比較等もあると思いますが、ひとまずこちらの３点だけ記述させていただこうと思います。

### 学習内容について
他社サービスとは比較していないですが、テッ

元記事を表示

スプレッド構文を利用してUI表示をうまく切り替える

# React・VueのUI表示切り替えで使える

フラグで表示の切り替えを行うことって多いかと思います。
その時に使えそうなものがあったので今回紹介します。
大したものではないので、また普段使っている方も多いと思います。
ぜひ、使っていいい感じに切り替えできるといいなと思います。

## スプレッド構文を使う

“` typescript
const list1 = [1, 2];
const list2 = [10, 20];
const result = […list1, …list2];
“`
これですね。

“` typescript
const list1 = [[], 2];
const list2 = [10, 20];
const result = […list1, …list2];
=> [2, 10, 20]
“`

空の配列はマージすると消えることを利用したUIの切り替えが使えます。

例えば

“` typescript
const list1 = [
flag ?
[
{ title: ‘AAA’ }

元記事を表示

htmlのtableであれこれ（前回の続き）

## テーブル機能追加
前回の記事で作ったヘッダ固定スクロール表に機能を追加。
+ 見出し列のグルーピングについて、スクロールして表示される範囲の中央に表示。
+ セルをクリックしてテキストボックスを表示（実際の編集処理は省略）

See the Pen
Untitled by cfd-ack (BiLiBiLi動画で中国語学習が捗るJS

中国の動画サイトBilibiliで中国語学習をしている人も少なくないと思いまして、僕もその一人なわけでありますが、
Bilibiliではニコニコ動画のコメントのような動画上を右から左へ流れる特徴的なコメントシステムを搭載していますが、
このコメントがマウスで文字選択できない、というのが長年のストレスでありました。

文字選択ができないと単語をGoogle検索や辞書検索するのにコピペもできづらいですし、Google翻訳などで翻訳にかけることもできず不便であります。

そこでJSスクリプトを書きました。

– [Bilibili selectable danmu comments](https://greasyfork.org/en/scripts/448301-bilibili-selectable-danmu-comments)
– [Bilibili選択可能弾幕コメント](https://greasyfork.org/ja/scripts/448301-bilibili-selectable-danmu-comments)

Redditに投稿したら反応が良くて少し驚きました。

!

元記事を表示

console.log を print に置き換える

# console.log を print に置き換える

console.log と入力するのが面倒なので print にしたいという話です
いつもやり方忘れるのでメモしておきたい

“` javascript
function print() {
console.log.apply(console, arguments);
}

print(“hoge”, “piyo”, 1234);

“`

## apply と call による関数呼び出し
[関数].apply(thisポインタ, [引数１, 引数２, 引数３, …]);
[関数].call(thisポインタ, 引数１, 引数２, 引数３, …);
こんなイメージです。

“` javascript
// 使用例
var o = {
fn: function() {/* なんらかの処理 */}
};

o.fn.apply(o, [1, 2, 3]);
o.fn.call(o, 1, 2, 3);

“`

以上です

元記事を表示

私の運営しているサイトを紹介

私は「ラブドールの教科書」というラブドールのお役立ち情報を発信しているサイトを運営しています。興味のある方はぜひ訪問してください！

https://lovedoll-text.com/

元記事を表示

JavaScript 文字列操作メソッド 用途別チートシート

# 判定系

### 文字列が指定された文字列で始まるかどうかを真偽値で返す

“`javascript
/**
* startsWith(searchString, )
* @param {searchString: string} – 呼び出された文字列の先頭を検索する文字列。
* @param {position: number} – 呼び出された文字列内で検索を開始する位置（指定しない場合は0）。
* @return {result: boolean} – 呼び出された文字列が指定された文字列で始まるかどうか。
*/
const str = ‘Saturday night plans’;

console.log(str.startsWith(‘Sat’)); // => true

console.log(str.startsWith(‘Sat’, 3)); // => false
“`

### 文字列が指定された文字列で終わるかどうかを真偽値で返す

“`javascript
/**
* endsWith(searchString,

元記事を表示

初心者による初心者のためのJavaScript基礎２【配列・条件分岐・繰り返し】

# 目次
[1. 配列](#1-配列)
 [1-1. 配列の宣言](#配列の宣言)
 [1-2. 要素の取得](#要素の取得)
 [1-3. 要素の追加と削除](#要素の追加と削除)
[2. 条件分岐](#2-条件分岐)
 [2-1. 比較演算子](#比較演算子)
 [2-2. if文](#if文)
 [2-3. switch文](#switch文)
[3. 繰り返し（ループ）](#3-繰り返しループ)
 [3-1. for文](#for文)
 [3-2. while文](#while文)
 [3-3. break文とcontinue文](#break文とcontinue文)
 [3-4. forEachメソッド](#foreachメソッド)
[4. JavaScript基礎シリーズ](#4-javascript基礎シリーズ)
[5. 参考記事](#5-参考記事)

# 1. 配列
配列とは複数の値を一つのデータのように扱うことができるデータ構造のことです。

## 配列の宣言
Java

元記事を表示

画像ポップアップギャラリーをJavaScriptで実装

# できあがり

![screen_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560904/e2754b9f-7c93-8fae-51f7-266366614a07.gif)

# きっかけ

[magnific-popup](https://dimsemenov.com/plugins/magnific-popup/)を使おうと思ったのですが

* 次の画像への**遷移のときのフェードイン、フェードアウトが設定できない**

が解決できなかったので、自分で作ることにしました。

（ポップアップを開くとき、閉じるときのフェードイン、フェードアウトはmagnific-popupでも可です）

# 要点

* ポップアップを開くとき、次の画像に遷移するとき、ポップアップを閉じるときの**フェードイン**、**フェードアウトエフェクトが設定可**。
* **縦長の画像**は**縦幅が画面サイズ**になり、**横長の画像**は**横幅が画面サイズ**になる。
* ポップアップ画像の下に*

元記事を表示

【Recoil&React】グローバルstateの管理

### ゴール
Recoilを知る
使い方理解する

### はじめに
この記事はすべて〇〇である

### ざっと調べたstate管理方法
– Recoil
– 今回の注目ポイント
– 理由：簡単そう。シンプル。使いやすそう。
– React Context
– 標準的な方法
– ページ間情報のやり取りや何層にもコンポーネントが分かれているときのstate管理に限界を感じた
– Redux
– 一番良く聞く管理方法
– しっかりした方法ではあるが、手続きが面倒で軽量なアプリには向かなそう。大人数開発とかでは強そう
– SWR
– Next.jsを見ていて発見
– ただRecoilの方が流行りそうな気がしたため今回は深い追いせず

### Recoil（リコイル？）
https://recoiljs.org/
Recoilは、Meta社(旧Facebook)が開発し、2020年5月にリリースされた状態管理ライブラリ
Context APIのデメリットとReduxの使いづらさを解消するために開発されたらしい

大きく「Ato

元記事を表示

p5.js で SVGフィルターを使う（p5.js Web Editor上の HTML・JavaScript に手を加えて利用）

今年の 4月ごろ・6月ごろにツイートしていた、p5.js で SVGフィルターを使う話について、自分用のメモも兼ねて記事にしてみます。

今回の記事の内容は、シンプルに SVGフィルターを利用する話という範囲でまとめます。

## SVGフィルターに関するページ
SVGフィルターを試すにあたり、参照したページを記載します。

● – SVG: Scalable Vector Graphics | MDN
　https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

●SVGのフィルター効果 – SVGでやることのまとめ。
　https://lopan.jp/about-svg/filter/

## p5.js Web Editor上で SVGフィルターを試す
SVGフィルターを試す環

元記事を表示

【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話

## Openseaが意外とガバガバだった話。

元記事を表示

JavaScriptのClassについて part2

# 初めに
今回はクラスの継承や拡張についてまとめていきたいと思います。

# basic syntax
part1後の書き方の練習です。
“`jsx
class Person {
constructor(name, birthYear) {
this.name = name
this.birthYear = Number(birthYear)
}

calculateAge() {
const today = new Date()
return today.getFullYear() – this.birthYear
}
}
let Taro = new Person(‘Taro’, ‘1980’)
console.log(Taro) // Person { name: ‘Taro’, birthYear: 1980 }
console.log(Taro.calculateAge())
“`
インスタンスを創るのに、`constructor()`への引数に任して`this`オブジェクトを創り内部メソッドが`this`オブジェクトをア

元記事を表示

【TypeScript】’Cannot redeclare block-scoped variable’ 独自のスコープを持つファイルかグローバルスコープを持つファイルか？

TypeScriptの勉強中にあるエラーに遭遇した。

`Cannot redeclare block-scoped variable ‘users’`

`usersの変数は既に宣言されているので再宣言できないよ」`というエラーらしい。

今回は以下のような場合で発生した。

“`ts:src/chapter3/index.ts
const users = [];
“`

“`ts:src/capter4/index.ts
const users = [{ name: ‘jhon’, age: 27 }];
“`
※ちなみにディレクトリ構成はこんな感じ
“`
.
├── README.md
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── chapter-3
│ │ └── index.ts
│ └── chapter-4
│ └── index.ts
└── tsconfig.json
“`

あれ、同じファイル内でこのエラーが発生する

元記事を表示

OTHERカテゴリの最新記事