f@ctor

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

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

HistoryAPIのreplaceStateの第2引数’unused’について

## 概要
HistoryAPIを使う必要があったため、replaceStateメソッドのドキュメントを見ていたら以下のような構文が書かれていました。

“`javascript
replaceState(state, unused)
replaceState(state, unused, url)
“`

https://developer.mozilla.org/ja/docs/Web/API/History/replaceState

第2引数を見てみると`unused`と書かれています。なんだこれは・・・。
引数の説明には以下のように書かれていました。

> この引数は歴史的な理由のために存在しており、省略することはできません。空文字を渡すことが、将来このメソッドに変更が加えられたときに安全です。

どうやら元々使う予定だった引数だったが、何かしらの理由で利用されなくなってしまったようです。
「歴史的な理由」という言葉にがぜん好奇心がそそられたため、少し調べてみることにしました。

## replaceStateの第2引数は何者か？
まず第2引数にはもともと何が渡される想定

元記事を表示

コードフォーマッター「Prettier」を初心者にも分かりやすく解説

# 概要
この記事では、Prettierとは何か、なぜ使うべきか、そしてどんなシチュエーションで使えるのか、どんなことが出来るのかを、初心者向けにわかりやすく解説します。

# 1. Prettierとは
Prettier（プリティアー）は、コードフォーマッターの一種で、コードを自動的に整形してくれるツールです。
多くの言語をサポートしており、手動でコードを整形する手間を省き、一貫したスタイルでコードを書くことができます。
[Prettier公式サイト](https://prettier.io/)

“`md:対象言語
– JavaScript (including experimental features)
– JSX
– Angular
– Vue
– Flow
– TypeScript
– CSS, Less, and SCSS
– HTML
– Ember/Handlebars
– JSON
– GraphQL
– Markdown, including GFM and MDX v1
– YAML
“`

# 2. なぜPrettierを使うのか

公式サイトには **「

元記事を表示

javaScriptのコピーについて

javaScriptのコピーについて、少しつまづいた所があったから、備忘録として記録する。
意外と今までなんとなくで対応していたなと思ったので、今回を機に色々調べてみた。

# javaScriptの型について
javaScriptは動的型付け言語ですが、データに対してちゃんと型はある。
分類としては、**プリミティブ型・オブジェクト型**に分けることができる。

以下、例を書いておく。

プリミティブ型
– String
– Number
– BigInt
– Boolean
– Undefine
– Symbol
– Null

オプジェクト型
– Object
– Array
– function
– Date
など

プリミティブ型以外は全てオブジェクト型となるため、様々な例が考えられる。

### プリミティブ型とオブジェクト型の違い
プリミティブ型とオブジェクト型の違いとして、値の格納方法がある。
プリミティブ型は、**変数に値を直接保存**する方法に対して、オブジェクト型は、**変数にオブジェクトへの参照を保存**している。

つまり、オブジェクト型は、変数にオブジェクト

元記事を表示

React Server ComponentsとApp Routerをそろそろちゃんと理解したい

「仕事で React や Next.js を使っているのに、RSC とか App Router とか Suspense とか何にも分からない。。やばい。。。」と焦りを覚えたので、勉強しつつ、Qiita にまとめてみました。

この記事を読めば、以下の項目が理解できるようになるでしょう。

– React や Next.js の基礎知識
– React Server Components とは何か？
– React Server Components のレンダリングの流れ
– Suspense とは何か？
– App Router とは何か？

少しでも私と同じような悩みを抱えている方の助けになれば幸いです。

## TL;DR

– React は UI を簡単に構築するための JavaScript ライブラリ
– Next.js は React のフレームワーク
– React は以下の流れでレンダリング（CSR）を行う
1. レンダリングのトリガーを検知
2. ブラウザレンダリングする内容の決定
3. 変更を DOM に適用
– Nex

元記事を表示

ビルドとアセットパイプラインの動作についてまとめてみた

# はじめに

プログラミング初学者の者です。
Rails7でミニアプリを作成していましたがビルドやアセットパイプラインの働きについて理解ができていなかったためまとめました。
間違いなども多いとは思うのですがご指摘いただけると嬉しいです。

# 対象者

– Rails学習中の方

# 目次
| 章 | タイトル | 備考 　|
|—:|————-|————|
| 1 |[ミニアプリの動作環境](#chapter1)|
| 2 |[ビルドとはなんなのか](#chapter1)| |
| 3 |[ビルドツールが動作するために必要なもの](#chapter1)| |
| 4 |[アセットパイプラインとは](#chapter1)| |
| 5 |[アセットパイプラインの各コマンド](#参考文献)　| |
| 5 |[私が勘違いしていたこと](#参考

元記事を表示

脳みその説明されたときにfunctionが出てきた話

どうもAtsu1209です
今日はなぜか脳みその話になったときにfunctionが出てきた話をしたいと思います。
# 本題
脳ってどんな感じなんだろっておもって
脳みそに詳しい友達に大脳と小脳の違いを聞いてみた。

例えば喋る動作(alertとする)は
大脳だと
“`javascript:talk.js
alert(“明日何食べる?”);
alert(“ラーメン食べたい”);
“`
今感じで一回一回書くのが大脳

小脳だと
“`javascript:talk.js
function talk(){
alert(“明日何食べる?”);
alert(“ラーメン食べたい”);
}
“`
こんなかんじで、関数にまとめて`talk();`で呼び出すだけってかんじらしい

短いけど
以上

元記事を表示

Cocos Creator 2.41 アプリ開発の感想

# はじめに
はじめまして。
完全未経験から2年目に突入したソフトウェアエンジニアです。
本記事は **Cocos Creator**(**TypeScript**) を学び始めてから約半年のなかで気になったことや、困ったポイントを紹介します。具体的な内容は実際に携わった2DのWEBゲーム開発をもとにします。
主な読者として **Cococs Creator** ・**TypeScript(JavaScript)** のビギナーを想定します。
使用言語は **Cocos Creator** が推奨する **TypeScript**です。
**JavaScript**の標準仕様(**ECMAScript**)については、公式が保証する [**ES2015(ES6)**](https://262.ecma-international.org/6.0/) を前提とします。

:::note info
本記事では **TypeScript** の説明や感想を述べるための比較対象として **Object Pascal** が登場することがあります。
**Object Pascal** は [**

元記事を表示

GAS で公開するウェブページをスマホ画面に対応させる

# GAS でウェブページを公開する

Google Apps Script (GAS) のコードでウェブページを公開することができます。

[HTML サービス: HTML の作成と配信  |  Apps Script  |  Google for Developers](https://developers.google.com/apps-script/guides/html)

“`javascript:コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile(‘index.html’);
}
“`

自分が利用するウェブアプリを作って公開するのに使っています。

[蔵書管理アプリを作り直した – Speaker Deck](
https://speakerdeck.com/tinymouse/zang-shu-guan-li-apuriwozuo-rizhi-sita)

![1-v.png](https://qiita-image-store.s3.ap-northeast-1.amaz

元記事を表示

Visual Tests and Networking参加レポート【TC39】

大阪で開催された**Visual Tests and Networking**に参加しました。レポートを書きます。
https://www.meetup.com/ja-JP/osaka-web-designers-and-developers-meetup/events/295693488/

クリスチャン・ウルブリッヒさんがチョコレートをドイツからお土産にくれました。アーモンドチョコとてもおいしかったです。
![PXL_20230923_090422731.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/9692239e-277a-8106-ec75-f5195bdc194e.jpeg)

# Practical Problems with Visual Testing

![PXL_20230923_080456848.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/b98bfed1-fc50

元記事を表示

巷で話題のnue.jsを試してみた(2) v0.1.1でのコンポーネントレンダリング

先日書いた [巷で話題のnue.jsを試してみた](https://qiita.com/haruyan_hopemucci/items/93d4556afb76b0c964b9) の続きです。

[create-nue](https://github.com/nuejs/create-nue)のソースコードを読んで、前回の記事で完成できなかった複数コンポーネントのレンダリングができるようになったので後悔、もとい公開しようと思います。

## TodoリストとTodo入力を作ってみる

実装例としてよくあるTodoリストを作ってみます。

### Todoデータ管理コンポーネント

[Sharing code between components](https://nuejs.org/docs/nuejs/reactive-components.html#sharing-code-between-components)の章に記載されているように、コンポーネント間でコードの共有を使った方法を試してみます。

以下のようなTodoデータ管理コンポーネントを作成します。

“`js:todo

元記事を表示

Youtubeのチャンネル別に最新動画を全部見たい

# 動画の自動再生が歯抜け再生されるのがイヤ
最近、といっても１年位前からだがYoutubeを頻繁に見始めた。
気に入ったチャンネルが１０個くらいあってそれを巡回しているだけなのだが、少し間が開くとチャンネルに２，３個動画が追加されていたりして。
これだけ連続で見て最新動画に追いつきたい。だけど自動再生は歯抜けで過去の動画に飛ばしたりする動き。プチストレス。
そのプチストレスをgreasemonkyスクリプトで解決してみた。
greasyformに登録なんかもしちゃったりして。
[youtube-create-sorted-playlist-related-channnels-when-clicked](https://greasyfork.org/ja/scripts/475584-youtube-create-sorted-playlist-related-channnels-when-clicked)

# スクリプト
“`javascript:code
// ==UserScript==
// @name youtube-create-sorte

元記事を表示

処理を実行しているscript要素を取得する

Document.currentScriptプロパティは現在処理中の`
```
ログの出力は以下になります。
```