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

Webアプリケーションのアーキテクチャ (Webアプリ開発基本シリーズ　1)

Webアプリ開発基本シリーズ

※ 下記の人が対象のシリーズとなっています。

– Webアプリ開発をこれから学ぶ人
– なんとなくで開発していたので、基礎からしっかり学びたい人
– Alt JS や WebPack などを使った モダンなWebアプリ開発 を学びたい人

1. **Webアプリ開発基本** <-いまここ 1. [パッケージマネージャ](https://qiita.com/EBIHARA_kenji/items/33878c109a3022c683d1) 1. JavaScript でよく使用されるライブラリ 1. ECMAScript と TypeScript 1. Webpack 1. Webフレームワーク 1. React 1. Vue.js ## 概要 ここでは、Webアプリケーションを設計する上で必要な知識について学びます。 また、よく使用される言語やフレームワーク、ライブラリについてもお話します。 **ここで書かれている評価や見解は、あくまでも個人的な経験や調査した結果を考察した上での意見であり、参考程度としてください。** Web

yarn ではなく npm install を叩いたらエラーを出したいを実現する方法が簡単だった

## やりたいこと

`yarn` ではなく `npm install` を叩いたらエラーを出す仕組みを作りたい

## 実現方法

– npmrc に `engine-strict=true` を記載する
– npmrc とは npmの設定ファイル のことである

“`js
// .npmrc
engine-strict=true
“`

– package.jsonの `engines` を設定する

“`package.json
“engines”: {
“npm”: “npmではなくyarnを使用してください”
}
“`

2つの設定を完了させた上で`npm install`と叩いてみる

| npm install コマンドを叩いた結果 |
| — |
|  |

これで`yarn`を使用しているプロジェクトで
間

Node.js のビルドツール「esbuild」について！


# はじめに

esbuild は、キャッシュなしで高速なビルドを可能とする Node.js のビルドツールです。

ビルドツールには、esbuild の他に、Webpack、Gulp、Parcel、Rollup、Browserify、FuseBox などがあります。

私自身が webpack を普段使っていて、ビルドに時間がかかりすぎているのが気になり、esbuild について調べてみようと思いました。

esbuild の特徴としては、

– キャッシュなしでの高速なビルド
– ES6 と CommonJS をサポート
– ES6 の Tree shaking 対応（利用されていないコードの除去）
– JavaScript と Go による API
– TypeScript と JSX をサポート
– ソースマップの生成
– ソースコ

Java電卓（iphone風）


“`java
package myProgram;

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.math.BigDecimal;
import java.math.MathContext;
import java.math.RoundingMode;
import java.text.DecimalFormat;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.s

Node.js で発生させた乱数で自動で音を鳴らす（Sonic Pi に OSC通信でデータを送信して音を出す）

今回の内容は、以下の記事の続きです。

●Sonic Pi による音の出力を Node.js のプログラム（osc.js を利用）から制御： OSC over UDP による通信 – Qiita
　https://qiita.com/youtoy/items/a158b847b142f0a134a6

この記事では、Node.js のプログラムでキーの押下を検知し、それに応じた OSC通信と音の出力を行っていました。
今回は「音の高さと音を鳴らすタイミング」をプログラムで発生させた乱数で決めて、音を奏でてみます。

## 構成
構成は[前回の記事の内容](　https://qiita.com/youtoy/items/a158b847b142f0a134a6
)と同じで、以下の通りです。
詳細については、これ以降についても[前回の記事の内容](　https://qiita.com/youtoy/items/a158b847b142f0a134a6
)を参照してください。

– 送信側
– Node.js のプログラム
– ライブラリ： osc.js
– 受信側

サードパーティークッキー（3rd Party Cookie）の廃止

Googleが、Google Chromeで「サードパーティークッキー（3rd Party Cookie）」のサポートを2022年までに段階的に廃止する予定であると発表した。

Appleは、Safariで既にサードパーティークッキーを禁止（ブロック）している。他のWebブラウザもおおむねサードパーティークッキーを禁止する方向にあるようだ。

このため、アドテクノロジー（アドテク）業界は大きなダメージを受けると思われる。

###参考サイト
https://atmarkit.itmedia.co.jp/ait/articles/2105/10/news018.html

https://www.innovation.co.jp/urumo/adtechnology/

アドテクノロジー（アドテク）とは？種類を解説

https://gigazine.net/news/20210623-google-antitrust-cookie-technology/

JavaScriptのBOMの解説

# 背景

BOMと調べたら案外記事がすくなくて、勉強したものを一度共有したいと思います。

## 基本知識

現在主流ブラウザはIE6~11,Chrome,Safari,FireFoxとなる。

## JavaScriptとBOM関係

簡単に言うと、JavaScriptはブラウザで動き、ブラウザを操作するための言語である。そのブラウザの構成はBOMです。
JavaScriptとBOMはコミュニケーションしてるからこそ、今私たちが見てるブラウザになってる。

## BOMとは

JavaScript Browser Object Model (BOM)
それを理解するために以下を先に説明します。

ブラウザの機能構成（オブジェクト構成）

ブラウザはwindow、location、Navigator、Screen、History、Documentで構成されてる。
windowがlocation、Navigator、Screen、History、Documentの親

* windowオブジェクト

JavaScriptではすべてのグローバル変数は、Windowオブジェクトのプロパテ

ブラウザでGeoLocation APIを使ってみる

今回は、ブラウザ（Chrome）からシステム側のGPS情報を取得して、それを表示するサンプルプログラムを載せました。
まず、下記の２つのメソッドの違いですが、単発で位置情報を取得する場合は1番でよいのですが、電車、自動車などで連続的に位置情報を取得したい場合は、圧倒的に2番のほうが優れています。

1. Geolocation.getCurrentPosition()
2. Geolocation.watchPosition()

したがって、今回のサンプルプログラムは、単発的に位置情報をブラウザから取得するものとなっています。

（補足）このプログラムを普通に動作させようとすると、多くの方はPC上のVisual Studio Codeで新規htmlファイルを作って、そこにコピペして、左側に表示されているファイルツリー上でそのファイルを選択した状態で、マウスの右ボタンでOpen with Live Serverを選択して表示すると思いますが、ご存じの通り、PC（Mac）にはGPSが入っていませんので、全然面白くありません。

そこで、実際にスマホで試してみる際は、もし、普段使っているG

iPhoneでも全画面表示（iOS15への対応）

# はじめに

>以前の投稿からの iOS15 への対応となりますので、こちらもご参照ください。

https://qiita.com/MARUMOTOSHINICHI/items/151e93e54d367e36d7eb

# やってみるしかない
> サンプルコード

“`html:index.html