f@ctor

JavaScript関連のことを調べてみた2021年11月21日

JavaScript関連のことを調べてみた2021年11月21日
目次

p5.jsで作品を額縁にかざる方法

# サマリ?
p5.jsで作成したスケッチを額縁にかざる方法をシェアいたします。
結論からいいますと、今回の成果物`PictureFrame Class`を使うとできるよという話です。

# 成果物
https://gist.github.com/tetunori/cedbcc6fcbdbc0a6be7e15e2242fc8f1

※ 本記事の下のほうにもソースコードをおいておきました。(ライセンスはpublic domain)

これを使うと、このようにアート作品をそれっぽくバーチャル展示できますよ！

[神奈川沖浪裏 x p5.pattern](https://openprocessing.org/sketch/1362259)

InDesign JavaScript XML アンカー画像にオブジェクトスタイルを適応

構造からレイアウトにドラッグして配置された要素にアンカー画像が含まれている場合、アンカー画像にオブジェクトスタイルを適応するスクリプトは、これで良いのかな・・・？

adobeコミュニティにて助けて頂きました。

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2021/11/21
*/

// アプリ指定
#target “indesign”;

// 名前空間
#targetengine “kohakuNekotarou”

// スクリプト名
var scriptName = “アンカー画像にオブジェクトスタイルを適応（AFTER_SELECTION_ATTRIBUTE_CHANGED版）”;

// ダイアログ
var dialogueFlg = confirm(“構造からレイアウトにドラッグして配置された要素にアンカー画像が含まれている場合、アンカー画像にオブジェクトスタイルを適応します。” + “\r\r”
+ “スクリプトのイベントの機能を使用しています、次に表示されるウィンドウを閉じると終了します。”

元記事を表示

JavaScriptのimportとexportを理解する

JavaScriptのimportとexportを理解するには、前提知識として**モジュール**、**ES Modulus（ESM)**、**CommonJS（CJS）**について知る必要があります。

## モジュール
**ソースコードを機能毎に分割して、メンテナンスしやすくする仕組み**のことです。
モジュールには規格があり、代表的なものに**ES Modulus（ESM)**と**CommonJS（CJS）**が存在します。

## ES Modules(ESM)
**EcmaScriptの仕様に基づくモジュール管理システム**のことです。
importとexportを使って読み込みや露出を行います。ESModulesは主にブラウザ側で使用します。

## CommonJS(CJS)
**Node.js上でモジュールを管理する仕組み**のことです。
requireとexportsを使ってモジュールの読み込みや露出を行います。
Node.jsが開発された際にはJavaScriptをモジュール単位で開発する仕組みがなかったため、CommonJSが開発され、Node.jsでモジュール管

元記事を表示

何故この世界は馬鹿で溢れてどうしようもないのか

現在この世界はメタバースだのコンピュータサイエンスだの横文字を並べて射精しているパソコンカタカタ君に占領され、食事は低糖質高タンパクという戯言を合言葉にパサパサした肉や味の薄いドレッシングがかけられた聞いたことねー野菜が持て囃され、連絡ツールはDiscord,Instagram,slackなどヒキニートゲーマー、オシャレボッチ飯クン、社畜が各々の色を出したがる為に統一感が無く、現実を見たくない20代30代のアニメファン達はいつからか異世界転生モノしか見れない鳥頭になってしまった。

何故こんなにも狂った世界になってしまったのか。答えはパソコンカタカタヒョロガリ短小眼鏡クンに何かの間違いで世界の覇権が移ってしまったからである。
これまでの世界の歴史を紐解いてみるといつでも覇権を握っていたのは我々筋骨隆々カリ高日焼けマンだった。
それがITの進歩とかいうオタク革命によりドSマッチョ自民党からマゾオタク民主党に政権が移ってしまったのである。

私から言えることは一つ。オタクに支配は無理。
君たち隠キャ君はトイレでボッチ飯がお似合い。
キミたちの短小チンチンでは集合体のニーズというポルチオに到

元記事を表示

[JavaScriptでよく使うイベント一覧]

#getElementByID
htmlから要素を取得してくる。
一番最初に出てきたもの。

元記事を表示

フロントエンドエンジニア(React)の技術質問

## What is this 記事？
この記事は、Webフロントエンドエンジニアとして働いてきた私が今まで受けてきた面接での技術質問と受け答えをまとめていくものです。
色々質問はあったが多く聞かれたものをまとめています。
指摘などありましたらコメントください。

## 質問集(基本編)

#### ・React Hooksはどのような問題を解決しているのか？

複雑になりがちなクラスコンポーネントを減らせる。
また、フックを使えば、ステートを持ったロジックを、コンポーネントの階層構造を変えることなしに利用できるため、多数のコンポーネント間でステートを共有することが簡単になる。

参考(https://ja.reactjs.org/docs/hooks-intro.html)

#### ・Reduxとは何か？Reduxではどう状態管理をしているのか？Reduxを使うメリットとデメリットは何か？

Reduxは状態管理のライブラリである。とくに状態管理が複雑になりがちな中規模以降のプロジェクトで採用することで、フロントの状態管理を容易にしてくれる。
Reduxで状態管理するには、まず

元記事を表示

JavaScriptの文字列のメソッド

#概要
Rubyを学んできて、JSにも手を出し始めた。文字列メソッドに関して違いがあったのでこちらに備忘録として書いていく。

##文字列の長さを調べる
ただ length プロパティを使用すればよいので、とても簡単

“`
let browserType = ‘mozilla’;
browserType.length;
“`

##特定の文字列を扱う
前の例と関連しているが、文字列に対して角括弧記法を使用することで文字列中の任意の 1文字が得られる。

“`
browserType[0];
=>”m”
“`

文字列の一番最後の文字を取得したいときは、先ほどの length プロパティと組み合わせてt次のようにする

“`
browserType[browserType.length-1];
=>”a”
“`

##部分文字列を探して抽出する
長い文字列の中に、ある文字列が存在するか調べたいとき、探したい部分文字列を引数に取る indexOf() メソッドを使用する。

“`
browserType.indexOf(‘zilla’);
=> 2 #部分文字列”zil

元記事を表示

【javascript】チェーンメソッド

# チェーンメソッド
異なるメソッドを連続して実行することができる。

# case
* Personクラスにhello,introduce,shakeHands,byeというメソッドがある。

“`js

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

hello(person) {
console.log(`${this.name} says hello ${person.name}`);
}

introduce() {
console.log(`Hi, I’m ${this.name}, ${this.age} years old.`);
}

shakeHands(person) {
console.log(`${this.name} shake hands with ${person.name}.`);
}

bye(person) {
console.log(`Goodbye, ${person.name}.`);
}
}

元記事を表示

[ネタ]開発者向けにF12で鑑賞するHTMLコメントの時計（こいつ・・・動くぞ！）を作ったので紹介

# 概要

モダンなブラウザで”F12(macのSafariだとoption+cmd+I)”キーを押すと出てくる”開発者コンソール”で眺めることができる時計をHTMLのコメント要素で作ってみました。「こいつ・・・動くぞ！」

## 対象読者

– WEBで、ホームページ程度が作れて、HTMLがわかる方
– F12のdev consoleが好きな方

# できたもの

ブラウザで、”F12″キーを押して、HTML要素を確認するタブで対応する要素を見ると、コメントとして時計が表示されます。

コードの一式は、[こちら https://github.com/hrkt/f12-clock ](https://github.com/hrkt/f12-clock)にあります。

下図がイメージです。(‘#’が時、’$’が分、'”‘が秒。秒が動いてます)

![]()![f12-clock.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65002/e21c2172-9d65-686b-acb3-7a71625f688

元記事を表示

JavascriptとRubyの違いについて

#２つの言語の役割
初学者はRubyは学ぶことが多い言語です。
サーバーサイドの言語でwebアプリの裏側で処理が行われる言語で
“`ロジックが反映される言語“`です。
一方でJavascriptはブラウザなどの操作で使われる
“`見た目が反映される言語“`です。
最近は、***サーバサイドJavaScriptのNode.jsやDeno.jsもあり、
WebサーバをJavaScriptで動かす***ことも増えてます。

#JavascriptとRubyの言語選びの基準
最初にRubyです。
1 初学者でも取り組みやすい (コードがシンプルで教材なども豊富)
2 日本語のドキュメントも充実
3 Ruby on railsというフレームワークで開発スピードが速い

次にJavascriptです。
1 webサイトではほとんどJavascriptで使われる
2 1つ言語を極めればキャッチアップしやすいが、初学者でも取り組みやすい(個人的にはRubyの方が簡単)
3 教材やドキュメントが豊富

次からは具体的にコードの違いを見ていきます。

#JavascriptとRubyのコードの

元記事を表示

【DOM操作(後編)】JavaScriptのaddEventListenerについて、「・・したら」をまとめてみた

[前回](https://qiita.com/yasu-hoshi/items/ceaba8b8dbe0ebc7ec04)はDOM操作の大まかな流れを解説しました。
具体的には**「AをしたらBの処理をする」**の**「A（きっかけとなるアクション）」**について解説していきました。
(例)「クリックしたら」「ホバーしたら」など

今回はそのAの後の
**「Bの処理」**にてよく使用されるメソッドについて解説していきます。

#①ボタンをクリックするとリストが生成
まずは次のように記述

“`html

“`
“`javascript
const

元記事を表示

「GithubのHTMLをダウンロードせずにプレビューするアプリ」作ってみた!!

###今回は「GithubのHTMLをダウンロードせずにプレビューするアプリ」作ってみた!! です
私の業務効率化だけのために作ったと言っても過言ではないので、興味ない方はページをそっと閉じていただければと存じます ＜m(__)m＞

【以下サイトリンク】
https://github-html-view.azurewebsites.net/

## ことのはじまり
大学のプログラミング授業でGithubに課題を提出してもらうことに決めました。

**【実際にやってみた】**
１つのリポジトリに十数回分の課題提出が入ります。

**【困ったことが】**
毎回、授業の最初に講評するのですが、毎回ダウンロード、全ての課題がダウンロードされる。
大学のPCなので毎回ZIPをダウンロードして展開し、HTMLをブラウザで開き、講

元記事を表示

Vue.jsで404や500エラーページの制御がしたい

# 404エラーページ

[Vue Router](https://router.vuejs.org/ja/)を利用して制御する。
ワイルドカードのパスを作ることで、どのパスにもマッチしなかった時のビューに飛ばすことができる。
サブディレクトリで使う404ビューを変えることもできる。

“`javascript:src/router/index.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’

import Index from ‘@/views/Index’
import NotFoundError from ‘@/views/errors/404’
import FooNotFoundError from ‘@/views/errors/foo/404’
import BarNotFoundError from ‘@/views/errors/bar/404’

Vue.use(VueRouter)

const routes = [
{
path: ‘/’,
name: ‘Index’,

元記事を表示

あなたは〇〇系イケメン！？を判定するAIを作成

##はじめに

〇〇系イケメンって言葉がありますが…
いろいろ種類がありすぎてよくわからないですよね。

そこで今回、自分が何系イケメンなのか判定してくれるAIを作成してみました。

##参考記事

■イケメンに関して

イケメンの種類有りすぎじゃない？私なりに5パターンに分けてみました☆

■大まかな流れ

https://qiita.com/naokiuc/items/ad01f4dae0f371b31fda

##今回の流れ

Teachable Machineで学習しました。

画像プロジェクトを選択し、
今回は「中性的」「爽やか」「テルマエ」「ワイルド」「雰囲気」の5つにイケメンを分類しました。

画像の収集にはGoogle Chromeの拡張機能であるImage Downloaderを使用しました。

特徴としては、複数の画像をフォルダでまとめて自身のPCにダウンロードできるというメリットがあるかと思います。

Image Downloaderは[こちら](https://note.com/kkyosuke17/n/n1890832f05bd)のサイトを参考

元記事を表示

【Deno】標準ライブラリのサーバーにContent-Typeを設定する

毎回ググってる気がするので、忘備録として記事にまとめておきます。
タイトルを正確に言うと「標準ライブラリのサーバーで、Content-Typeを設定したレスポンスを返す」です。

## 標準ライブラリのHTTPサーバー

まず標準ライブラリのHTTPサーバーの書き方をおさらいです

“`ts:HelloWorldサーバー
import { serve } from “https://deno.land/std@0.115.1/http/mod.ts”;
console.log(“http://localhost:8000/”);
serve((request: Request) => new Response(“Hello World”)); // デフォルトはポート8000を使用
“`

単純なファイルサーバーとして使うには、次のように書きます。

“`ts:ファイルサーバー
import {
serve,
Status,
STATUS_TEXT,
} from “https://deno.land/std@0.115.1/http/mod.ts”;

consol

元記事を表示

Javascriptの変数の宣言について

#変数とは
値に名前をつける名札とイメージしてください。
名札に文字や数字を書いたりしてわかりやすくします。

※JavascriptをJSと呼ぶことにします。

#変数の宣言について
JSは変数を使うときに宣言をします。そのために下の3つを使います。

・“`let“`再代入ができる

・“`const“`再代入ができない

・“`var“`再代入ができる

※最近だとvarよりもletやconstの方が使うことが多いみたいです。
これだけだとわからないと思うので説明を続けていきます。

#スコープについて

●***グローバルスコープ***
どこからでもアクセスできるようになり

●***ローカルスコープ***
アクセス制限があります。例えば関数やブロックなどです。

#ブロックとは
***ブロックは{}で囲まれたコードです。***
if文、for文、while文、繰り返し文などと使うみたいです。

“`js
const number = 10;
{
const score = 150;
console.log(number);
console.log(

元記事を表示

フォームsubmitした時に確認アラートの通知をする方法

## 概要
LaravelのテンプレートエンジンBladeを使っている時に確認アラートを出す。
フォームの内容は何かしらの期限を変更するもので、入力した期限が現在の期限を越える場合に更新していいかの確認アラートを出したいとする。

“`HTML

@method(‘PUT’)
@csrf

期限

元記事を表示

VSCodeで動く天気Botを作り、GASで動く天気Botへ書き換えてみた。

VScodeで動く天気Botの作成に成功したが、VSCodeはその都度サーバーの立ち上げを必要とするのであまり実用的ではないと感じていました(Vercelを使えば永続化できる様なので、後に挑戦する予定です。)。いつでも使えるようにするために、GASであればいつでも動作することから、GASで動く天気Botを作ってみました。
（VScodeで動く天気Botを作成　⇒　GASで動く天気Bot　へ書き換え）
![名称未設定 1のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/5d9e0040-e57a-0d9e-6157-13e27476a319.png)

#作成の流れ
　①VScodeで動く天気Botを作成
　　オウム返しBOTを作成する
　　　1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest
　　　https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d#2-nodejs

元記事を表示

cssのみ(HTML+javascript)でcookie-Clickerをつくる！pt.1

##cssのみ(HTML+javascript)でcookie-Clickerをつくる！
###こんにちは！
今回から皆さんの力を借りてcssのみ(画像×)でcookieClikerを作ります。
まず、初期段階としてgithubにあげていますので、長くなってしまったので
ここではソースを表示しませんが、ソースとゲームをを見てください。
そして、いいCSS等が出来上がりましたら、コメント欄で教えて下さい！
お願いいたします。
[github](https://sugoruru.github.io/css-cookie-Clicker-PC/)をクリック！

元記事を表示

OTHERカテゴリの最新記事