f@ctor

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

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

ジャニーズのジャケ写を公式から一括 DL するユーザースクリプト

# はじめに
ジャニーズの CD は iTunes に CD を取り込んでも，ジャケ写が読み込まれないらしい（友人談）．
ジャニオタの皆さんは，ネットから頑張って形態ごと（初版A,B とか）にジャケ写を探してきて登録しているようです．
今回は，ここをできるだけ自動化したいと考えてやってみました．

# めんどくさいことはユーザースクリプトにやらせよう
ジャニーズグループの Web ページは，
https://www.johnnys-net.jp/page?id=discoDetail&artist=41&data=2762
のように「アーティスト > Discography > 各 CD の詳細」 という画面構成になっていて，そこで実行すると全形態のジャケ写をローカルに DL できるユーザースクリプトを書いてみました．

“`javascript
// 画像をダウンロードする関数
const downloadImage = (url, name) => {
const d = document.createElement(“a”);
d.download = name

元記事を表示

ブラウザゲーム制作：赤と青のブロックを選べ！

## 目次

– [記事の内容](#記事の内容)
– [なぜ記事を書こうと思ったのか](#なぜ記事を書こうと思ったのか)
– [開発環境について](#開発環境について)
– [本編](#本編)
– [スタート画面の見た目](#スタート画面の見た目)
– [ゲーム画面の見た目](#ゲーム画面の見た目)
– [動くブロックの作り方](#動くブロックの作り方)
– [複数の動くブロックの作り方](#複数の動くブロックの作り方)
– [選択機能と時間表示を追加](#選択機能と時間表示を追加)
– [開始画面やクリア表示などを追加](#開始画面やクリア表示などを追加)
– [レベルを追加](#レベルを追加)
– [おまけ機能](#おまけ機能)
– [効果音を追加](#効果音を追加)
– [途中から始められる機能を追加](#途中から始められる機能を追加)
– [終わりに](#終わりに)

## 記事の内容
HTML、CSS、JavaScript（以降JS）を用いたゲームを作成しながら、JavaScriptを学んでいくための記事です。以下のgifがゲーム画面のイメ

元記事を表示

新しいSkyWayを使って文化祭やイベントで使えそうなWebトランシーバーを作ってみた

# はじめに
2023年1月31日から提供されている新しいバージョンのSkyWayを使って、Webアプリ上で動作するトランシーバー(以下Webトランシーバーと記載)を作ってみました。

この記事は「[新しくなったSkyWayを使ってみよう！](https://qiita.com/official-events/93564ad363199fa7999c)」のキャンペーンに誘われて作成したものです。

## 注意
::: note warn
この記事は私が個人として作成したものであり、私が所属する学校や委員会などの団体は一切関係ありません。
また、この記事のソースコードを利用される際は自己責任でお願いします。被った損害などについて筆者は一切責任を負いません。
:::

## とりあえず成果物

元記事を表示

React + TypeScript: エフェクトを使って同期する

React公式サイトのドキュメントが2023年3月16日に改訂されました(「[Introducing react.dev](https://react.dev/blog/2023/03/16/introducing-react-dev)」参照)。本稿は、応用解説の「[Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。

なお、本シリーズ解説の他の記事については「[React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ](https://qiita.com/FumioNonaka/items/d70585bd3c0a6d4edc24)」をご参照ください。

コンポーネントには、外部システムと同期しなければならないものもあります。たとえば、つぎのような場合です。

* React

元記事を表示

Zoom AppsをFlutter Webで実装する手引き – 事前準備編

## Zoom Appsについて

https://qiita.com/yosuke-sawamura/items/99b6ed443677c05d9a8d

Zoom JapanのQiita記事にて、丁寧に紹介されていました。

## 本記事のモチベーション

Zoom Apps実装経緯としては、
**1. 開発チームとしてFlutterベースでの開発が主流のため**
**2. Zoomを利活用するアプリの案件の中で、デフォルトのZoomクライアントアプリを利用したい、機能として画面を表示しながら開発アプリ上で操作を行いたいという要望がZoom Appsの利用ケースとマッチした**
以上の点で、FlutterでZoom Appsを実装するという運びとなりました。

Zoom AppsはJavascriptベースでのSDKであり、Zoom Appsのアプリ画面はWebViewから特定のページを表示させる形で構成されるので、**Flutter Web**の限定対応という形で開発が始まりました。

開発していた中で、Flutter Web上でZoom Apps SDKを利用するのにつまづい

元記事を表示

JavaScriptで簡単な開閉メニュー

・はじめに

　JavaScriptとCSSを利用して簡単なアコーディオンメニューを作ったのでそれを記録する記事です。もっとこうすればいいよなどのアドバイスがあればよろしくお願いいたします。

・コードと解説

　今回作ったアコーディングメニューはcheckboxを利用したもので、１つ開くと他が閉じる仕様ではなく、開こうと思えばすべて開くことができるようになっています。

・処理の流れ

　CSSでクラス名を指定してメニューの内容を非表示にする⇒JavaScriptでチェックボックスをクリックしたとき、チェックボックスがtrue状態に変われば、CSSの非表示のクラス名を削除して表示状態に、反対にfalse状態に変わればCSSの非表示クラス名を追加させて非表示状態にする

という流れで行います。

“`HTML:HTML

元記事を表示

高校生エンジニアが解説！コンピューターサイエンスを学べる技術書5選

# はじめに
みなさん、こんにちは。公立高校に通いながら、放課後や休日はIT企業のエンジニアとして働いてる[Raio](https://twitter.com/Raio14f)です?

今回の記事では、コンピューターサイエンスが学べる技術書を5冊紹介します?
ご興味のある方は、是非最後まで読んでみてください！

↓筆者について↓

https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0

# 技術書を無料で読む方法
KindleUnlimitedを使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**?

– 200万冊以上の書籍が何冊でも読み放題
– 月額980円が今なら1ヶ月無料
– 場所に囚われず、様々な端末で使用可能

勿論、技術書以外にもビジネス書や漫画など種類豊富です！

**↓入会したい方は画像をクリック↓**
[![画像タイトル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1341254/39184240-343f-a756-e7e

元記事を表示

React-Slickでレスポンシブデザイン実装する方法を簡単に解説

## 投稿の趣旨
ポートフォリオサイトを作成する際にスライダーでReact-Slickを使用したのですが、React-Slickのレスポンシブに関する情報が少なくて僕自身困ったので、今回得た知見を投稿しようと思います

そのため、これはReact-Slickの網羅的な内容を解説する内容にはなっていません
## React-Slickでの設定
“`js
import React from “react”;
import Slider from “react-slick”;
import “slick-carousel/slick/slick.css”;
import “slick-carousel/slick/slick-theme.css”;

export default function SimpleSlider() {
const settings = {
dots: true, //スライダー下の点の表示/非表示
infinite: true, //無限スクロールの有効/無効
speed: 500, //スライド切り替えの速度
slide

元記事を表示

スターバックスの黒板アートを生成系AIを使って描かせてみたら…。

## 作ろうと思ったきっかけ
私はスタバが好きで週6～8日、スタバに行くのですが、私がスタバに行く楽しみの一つが黒板アートです。黒板アートというのは、新作のドリンクの紹介などで、入口近くやメニューの横に掲げられている手書きの看板です。手書きゆえに個性や温かさを感じることができ、ついいつも見惚れてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217319/33dcc1aa-e6a0-4af3-78ca-fe6eb6d40b0e.png)

本当は店員さんの書いた黒板アートが好きなのですが、今、ちょうど画像生成系AIの学習をしていたこともあって、もしかしたらこの黒板アート。AIで描けるかもと思いました。(私の心の中では、店員さんが書いた方が、心の温かさとかいっぱいつまってるから絶対店員さんの絵を推したい人なのですが）、とはいえ私も技術者の端くれですので、今の画像生成AIの実力がどの程度か確認しておかねばという想いも一方でありました。

そこで今回、DALL-Eという画像生成AI

元記事を表示

AR名刺を作ろう！

名刺からARが飛び出してきたらカッコいい！
そう思って、AR名刺を作ってみました！

![Screenshot_20230519-184547~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/e48e3621-7c20-5eef-236b-ffc0a70f3761.png)

名刺から猫ちゃんが飛び出してきて、とっても可愛い。

https://ar-js-org.github.io/AR.js-Docs/

ARの実装にあたっては、AR.jsというJavaScriptのライブラリを使用しています。
scriptタグで埋め込めば、HTMLだけで完結するので github.io にお手軽公開することもできます。

書いたコードはたったこれだけです（3dモデルは別に必要）

“`HTML


元記事を表示

【自分のためのGAS関数 10選】2年向き合って必要そうなのだけまとめてみた✨

こんにちは、mi2です。

GAS(Google Apps Script)と2年間ほど向き合ってみて・・

ふと、
**スプレッドシートの操作に必要な処理って意外と限られるのでは・・・？**

ただ、
**もちろんなんでもこれだけで・・・という感じではない・・・**

みたいな気持ちがありつつ。

誰かの開発スピードもUPするといいなぁと思ってまとめてみました。

:::note warn
※基本的に、スプレッドシートに紐づくGASを操作するためのコード（コンテナバインド型）を想定しています。
:::

## スプレッドシートのなにか系
### ✨ 1. スプレッドシートをアクティブにする関数
SpreadsheetAppというGAS特有の書き方を覚えることに失敗した結果これができました。

愚直に書いてもいいんですけど、あると便利じゃない・・・？
“`JavaScript
const activateSpreadSheetBySsName = (sheetName) => {
const spreadSheet = SpreadsheetApp.getActiveSpread

元記事を表示

【初心者】Reactで作る勤怠状況管理アプリ（作成中）

## こんなの作りました

coming soon

## はじめに

React・Javascriptを勉強し始めて、何か作てっみたいなと思い、「どうせなら業務で役に立つものを作ろう」ということで今回のアプリを作成しました。

本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。

そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## スキルレベル（筆者自身）

– HTML,CSSの知識はある（実務経験2年）
– JSで簡単なコードなら書ける、読める
– Reactで基本的なチュートリアルは済んでいる

## ゴール

現在、部署内では勤務状況をスプレッドシートを使用して管理しています。

**現状の問題点**

> – 操作しずらい
> – 挙動が不安定
> – 見た目がださい

現状の機能を維持しつつ、上記問題点を解決できるようなアプリを作る！というのが今回のゴールになります。

## 設計

必要な機能

元記事を表示

【Node.js / Express】JWTを使用した認証機能を実装

## ゴール

– ログインAPI実行時にJWTを生成する。
– ローカルストレージに生成したトークンを保存し、リクエスト時には保存したトークンをヘッダー`Authorization`に自動で付与されるようにする。
– ヘッダーに付与されたトークンを元に認証チェックを行うミドルウェアを作成する。
– Axiosのインターセプターで、401エラー発生時にログイン画面に遷移するようにする。

## 前提
– [こちらのリポジトリ](https://github.com/whopper1962/vue-express-base-js)のフォルダ構成/アーキテクチャに基づいて実装しています。
– 今回の認証機能を実装したサンプルコードは[こちらのブランチ](https://github.com/whopper1962/vue-express-base-js/tree/feature/auth)を参照してください。

## CL(Vue)側実装

### ログイン画面の実装
シンプルなログイン画面を実装しておきます。
~~~vue:src/views/LoginView.vue

元記事を表示

あなたのモニターに窓をつけよう！

# 「モニターに窓をつける」とは
この記事を読む方は、普段業務中にオフィスにいて、PCと向き合っている方が多いでしょう。
そして作業に追われて出る一言。
*「うわぁ、もうこんな時間だ！」*

そんな少し悲しい瞬間を無くすために、
**「時間に対応して（空の）画像が切り替わるページ」**
を作っておきました。
名付けて **「窓」** です。

## 使い方
1.フォルダを用意します。
2.お好みの朝、昼、夜の空の写真を用意します。
3.それぞれ`morning.jpg`、`afternoon.jpg`、`night.jpg`とでもしておきましょう。
4.用意したフォルダに画像を入れます
5.後述の`index.html`、`script.js`、`styles.js`を同じフォルダに作りましょう
6.`index.html`をブラウザで開けば、モニターに窓が出ます

:::note info
画像の名称について、コードが書き換えられる人は`index.html`を書き換えてもOK
:::

## コード一覧

“`html:index.html

元記事を表示

React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える

[Framer Motion](https://www.framer.com/motion/)は、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。

ライブラリの基本的な使い方については「[React + TypeScript: Framer Motionでアニメーションを加える](https://qiita.com/FumioNonaka/items/ccadd4261522aafe51f5)」をお読みください。本稿は、公式サイト「Animation」の「[Variants](https://www.framer.com/motion/animation/#variants)」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。

**サンプル001■React + TypeScript: Framer Motion Variants 01**
https://codesandbox.io/s/react-types

元記事を表示

【CSS】CSSだけでTooltipを自動で画面内に表示できるようになるらしい

## はじめに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f7f5c5c3-1f0b-db86-19d6-6ca0b644c893.png)

みなさんは、[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)をご存知ですか？

[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)は、まだ実験中の機能ですが、CSS Anchor Positioningを使うと、
特定の要素をAnchor（アンカー）として、tooltipなどの要素の位置を決めることができます。

この記事では、そんな[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)を紹介しようと思います。

## CSS Anchor Pos

元記事を表示

【JavaScript】データ型

### データ型とは

データの種類のこと。
例えば、「データのかた」、「dataType」は文字列、1、-1、3.14は数値型、true (真) / false (偽) は論理型に分類される。

### データ型の分類

データ型は、大きく基本型と参照型とに分類できる。
両者の違いは値を変数に格納する方法。

– 基本型の変数
値そのものが直接に格納される
– 参照型の変数
その参照値が (値を実際に格納しているメモリ上のアドレスのようなもの) を格納する

データ型一覧
分類 データ型 概要
基本型 数値型 (number) $\pm5\times10^{-324}$ 〜 $1.7976931348623157\times10^{308}$ (

現場で使えるRuby on Rails5速習実践ガイドを読んで感じたこと

Railsの学習に際し、インプット教材にRuby on Rails5速習ガイドを選び今回読み終えたので全体の感想をまとめていきます。

# 初の実践には持ってこいの辞書

一通り読み終えて感じたのは、これは参考書であると同時に辞書引きができるようになっているものであると感じました。

どうしてそう思ったのかは以下の点を感じたからです。

– 開発の全体像を掴むことができる
– アプリケーションの作成から機能追加や削除を一通り学べる
– Rspecでのテスト技法が記載されている
– 概念への理解
– JSへの理解度の追求
– チーム開発の流れ
– バージョンアップへの対応の姿勢

Railsアプリケーションを作るのは簡単ではありませんし、今後ECサイトをHCの課題で制作していくわけですが、根本的な部分の理解度がないとそもそもアプリケーションを作れないでしょう。

どういう手段を用いて開発へ取り組むべきなのか、

またどういったステップで次へ行っているのかを明確にする時、

本書は開発経験がヒヨコな私のような駆け出しには必要な書籍であると感じました。

わからない

高校生エンジニアがオススメするNuxt.jsの入門書3選

# はじめに
みなさん、Nuxt.js使ってますか？

– Nuxt.js勉強したいけどどの本が良いか分からない
– Nuxt.jsに興味がある

こんな方達の為に、今回の記事では**高校生エンジニアがオススメするNuxt.jsのおすすめ入門書3選**をまとめました。

ご興味ある方は、是非最後までご覧ください?

↓高校生でIT企業のエンジニアになった筆者の話はこちらから↓

https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0

## 技術書を無料で読む方法

KindleUnlimitedを使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**?

– 200万冊以上の書籍が何冊でも読み放題
– 月額980円が今なら1ヶ月無料
– 場所に囚われず、様々な端末で使用可能

勿論、技術書以外にもビジネス書や漫画など種類豊富です！

**↓入会したい方は画像をクリック↓**
[![画像タイトル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1341

【プログラミング勉強】完全無料のプログラミング習得ロードマップ【JavaScript】

私は大学3年生（2023年時点）で[Matcher株式会社](https://matcher.jp)のエンジニアインターンをさせて頂いております。

この記事では、**完全独学・費用を一切かけずにエンジニアになりたい**という方向けに書きました。「**プログラミングってよく聞くけど、何から始めればいいの？**」という気持ちを少しでも解決する手立てになれればと思っております。

# どのプログラミング言語を学ぶのが最適か
プログラミング言語を選定することが一番難しく感じる方も多いと思います。Python, JavaScript, Ruby, C++…挙げていけばマイナーな言語も含めてキリがないと思います。ではどの言語を勉強すればいいのか…

完全に私の主観ですが、結論**どれでもいい**です。理由は、一つでも言語をマスターすることができれば、他の言語でもほとんど融通が効くことが多いからです。大事なことは一つの言語を完璧に身につけることが大切だと思います。

どれでもいいと申したのですが、記事を書く上で一つの言語に絞ってロードマップ的なことを書いていきたいので、今回は**JavaScrip

OTHERカテゴリの最新記事