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

Google Spreadsheet から画像データを取得する

GoogleSpreadSheetから画像データを取り出したくても、
GoogleSheetAPIからは画像の加工や移動ができるのみで、取り出すことはできないようです。
が、 **base64エンコードした画像を文字列としてセルに貼り付ける** という~~裏技~~ tips があります。

例えば以下はHTMLの中に画像データが内包されています。

“`







ViteとBootstrapで最速で開発しよう

[](https://asameshicode.com/vite-bootstrap/)

今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。

現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。

npmを使うのでライブラリを管理したい場合に最適になります。

さらに[Bootstrapのセットアップ](https://getbootstrap.com/docs/5.3/getting-started/vite/)の仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。

## **今日の環境**

* npmがインストールされていること
* Ja

TypeScriptを活用してのWebアプリケーションの作成（コンパイルとバンドル）

この動画はプログラミングチュートリアルさんの「本当の初心者からTypescript×Webpackの開発環境構築までをハンズオン形式で学ぼう！」をまとめたものです。

そもそもTypescriptとは、

Javascript + 型付 = Typescript

このように型付という機能を付与しただけなのがTypescript(以下、TS)である。
型付という機能を実装することで静的型付言語となる。

そして、そもそも型とは何か。

JS(Javascript)での変数宣言は以下のようになる。
“`
//変数の再宣言が出来る定義
var list = []:
var suuzi = 1;

//変数の再宣言が出来ない定義
const name = “プログラミング”;
“`

型の宣言がないため、変数に何を入れるのか入れるまでわからない。

一方でTSでの変数宣言は以下のようになる。
“`
//変数の再宣言が出来る定義
var list:String[] = [];
let suuzi:N

Lappinna技術部始動！

# 初めに！
皆さん始めまして！Lapinna技術部のしゃちょ～（仮）です！
このアカウントについての説明をさせていただきます！（やるとは言っていない）


※上記イラストに深い意味はありません。よろしくお願いいたします。

## 記事概要
このアカウントは、初心者向けの記事を投稿するアカウントとなっております。
現職でIT企業に勤めているプロのエンジニアが中心となって記事を上げていく予定となっております！（頑張ってね！

# 投稿予定
## AI関係（機械学習・深層学習/ニューラルネットワーク）
・AIに必要な画像処理技術をまとめてみた（仮）

## WEB開発（PHP/Laravel・HTML・CSS・JS）
・プロのエンジニアが初心者のためのWEBページ作成指導書作ってみた（仮）

## ゲーム関係
・Unityでインベーダー

Java C# JavaScript のクラスの違いを比較する

# Java C# JavaScript のクラスの違いを比較する

## はじめに

最近 Java を軽く学習したり、JavaScript の開発業務をやったりしてクラスにいろいろ触れてきたので、アウトプットを兼ねて 3 種類の言語のクラスについて比較していきます。クラスとは何か、オブジェクト指向とは何かという概念的な話は今回は触れません。

## 念のためクラスとは
とはいえ、軽くは触れておきます。
Wikipedia を参考に簡単にいうと「クラスとは、オブジェクト指向に登場する概念のこと。オブジェクトを生成するための設計図あるいはひな形に相当するもの」です。

## クラスの作り方

まずはクラスの作り方から比較していきます。

### コード

C#

“`C#
class TestClass
{
//クラスの中身
}
“`

Java

“`java
class TestClass
{
// クラスの中身
}
“`

JavaScript

“`javascript
class TestClass {
// クラスの中身
}

// クラス式
let Te

CSSをCSS in JSに変換しよう！(ついでに色々変換できるツールの紹介)

# CSSをCSS in JSに変換しよう！
## CSS in JSを使う時の悩み
FigmaやCSS設定ツールなど、便利なデザインツールの多くはCSSを出力します。しかし、CSS in JS(JSのオブジェクトで定義するタイプ)はCSSで多いkebab-caseではなく、camelCaseで書かれる(JavaScriptの流儀に則る)ので出力されたCSSをそのまま貼り付けることができません。

– kabab-caseをcamelCaseに直して…
– 単位付きの値をクオテーションで囲んで文字列にして…
– セレクタはネストしたり、キーを文字列にしたり…

このようになかなか面倒な作業です。vanilla-extractのように型補完の効く便利なCSS in JSがあっても、この辺りが厄介でCSSがそのまま使えるCSS Modulesや、既にコンポーネントになってるMUIやChakra UIを使う理由の一つになる時があります…

最近、筆者は会社の研修でFigmaのデザインをvanilla-extractで再現することになり、Figmaなどから貼り付けたくなったので調べてみました。

エンジニアインターン15日目

今日は完成させたスクレイピング機能を自社アプリの管理画面から使えるような仕組みを作ることになった。使う言語はVue.jsで、初めての言語だったため、コードを読み解くので精一杯だった。まじで頭抱えながらやっていたが、なかなか進まない…こんな時に頼るのはやはり先輩エンジニア！一緒にコードを読み解いてくださったり、これから実装していくタスクのこともイメージしやすく説明していただいたりほんとに助かる存在だ。でも、自分一人でも読み解けるようにならないといけないとも思っている。でもできない。とにかく今はたくさんコードを観て、たくさんコード書いて、成長していくことがとても大切だと感じた。いまはほんとに頑張り時だなと改めて思った。今日は作業もあまり進まず、技術的なことは書くことがない…まあ頑張らないといけないってことだな。

javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 後編

### 前編(こちらを読まなくても問題ないです)
https://qiita.com/Terao-Takumi/items/0c48ea7550f6e205077c

# サンプル

See the Pen
漢気割り勘ツール by terao takumi (tiny sqlite3 + node + sqlite_web

#tiny sqlite sample

## node + sqlite3
– create workspace

“`bash
mkdir your-directory-id
cd your-directory-id
npm init -y
touch index.js
“`

– install npm package [sqlite3]

“`bash
npm install sqlite3
“`

– copy code to index.js

“`javascript
const sqlite3 = require(“sqlite3”);
const db = new sqlite3.Database(“./somedb.db”);

db.serialize(() => {
db.run(“drop table if exists sometable”);
db.run(“create table if not exists sometable(id,number)”);
db.run(“insert int

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript パーティー

パーティー (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__party

# 解説
大きな流れ

1. 普通に二重ループで計算すると条件が煩雑かつタイムオーバー→条件を簡単にできないか、二分探索できないか考える。

2. 条件を簡単に：同時にパーティーに参加していた人の合計人数=全人数-同時に参加しなかった人数=全人数-(その人が来る前にいた人数＋その人が帰った後に来た人数)

3. a,lを昇順にソートできるので、二分探索できる!

4. 二分探索ができるので、条件を満たす最小インデックスを返す、関数binary_searchを用いて、その人が来る前にいた人数と、その人が帰った後に来た人数を求める。

5. 以上から、同時にパーティーに参加していた人の合計人数が求まる。

***
## 1.普通に計算
普通に計算すると、タイムオーバーします。誤答例参照。

## 2.条件を簡単に
同時に参加していなかった人数を求めたほうが簡単です。(*)

そ

Astro Docker環境作成

## Astroとは

MPA(Multi Page Application)でSSG(Static Site Generator)でき、特定のフレームワークに依存しない独立したフレームワーク。
[Astro | Build faster websites](https://astro.build/)

## 簡易なDocker環境作成
※Dockerそのもののインストールは省略

以下のような状態でフォルダ・ファイルを作成。

“`
astro-app
├─ app
├─ Dockerfile
└─ docker-compose.yml
“`

それぞれのファイル内容は以下

“`docker:Dockerfile
FROM node:16.15.0-alpine
WORKDIR /usr/src/app
COPY ./app /app
EXPOSE 3000
“`

“`yaml:docker-compose.yml
version: ‘3.9’
services:
app:
build:
context: .
dockerfile:

【JavaScript】フォームのinputタグでURLパラメータを取得する方法

先日、フォームのinputタグでURLパラメータを取得する実装を行いました。
備忘録のためにメモ残しておきます。

## 背景
– 広告の流入元を知るため、以下3つのパラメータを取得したい
– utm_source
– utm_medium
– utm_campaign
– 取得したパラメータをフォームで送信したい

## URLパラメータとは
プログラムに情報を送信するため、URLの末尾についた文字列

“`
https://hogehoge.co.jp?○○○=×××
“`

## パラメータの種類（？）
utm_source：どこからの流入なのかを分類
utm_medium：どのメディアからの流入なのかを分類
utm_campaign：メルマガなど広告を条件ごとに絞って分析する
utm_term：有料検索での「キーワード」を分析
utm_content：一つの広告に同一のURLを複数入れている場合、どの「コンテンツ」から流入したかを分類

## 実装内容
### 大まかな流れ
1. HTMLでinputタグを作成
1. JavaScriptでパラメー

Zoho SalesIQのチャットウィジェットを特定のページで表示させないようにする

設定では実現できなかったので、JSを使って制御する
“`html

“`
上記のコードを設置すれば実現できる。

React初学者のつまづきポイント、勉強法

## 概要

phpは書き慣れていたのですが、reactを学ぶにあたってつまづいたポイントまとめ。
言い換えると、下記については、それぞれちょ～～～っと腰を据えて学習する必要があった。
※ほんとのプログラミング初学者がreactから入るのは本当につらい

## つまづきポイント

### Javascript特有の記法

* アロー関数
* スプレッド構文（配列名の前に…をつけるやつ）
* if else を ? で書くやつ
* map関数、filter関数（要素を繰り返し表示したり、特定の要素の削除）

Reactはあくまでちょっと（かなり）便利なツール程度で、htmlとjavascriptをある程度ゴリゴリ書くことになるため、
「Reactはjavascriptの理解が必要」と言われる（

### ◆React特有のもの

#### 　ざっくり理解
* App.jsがレンダリング（もろもろ変換）されて丸々クライアント（ブラウザ）に渡される
* （↑を細かくいうと）最近pcもスマホも高機能なので、バックエンドでやってたようなな処理をでかいファイル（App.js）でまるまるクライア

Node.jsではmysqlよりmysql2を使うべき理由

mysql2が一番Weeklyダウンロードが多い




フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」

# はじめに
JavaScriptにおけるテストのベストプラクティスをまとめた「**javascript-testing-best-practices**」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。

（補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。
– Section 0: The Golden Rule
– Section 1: The Test Anatomy
– Section 3: Frontend
– Section 4: Measuring Tests Effectiveness

https://github.com/goldbergyoni/javascript-testing-best-practices

## 想定読者
– フロントエンドの実装はできるが、テスト経験はない方
– テストに対して解像度が低い方
– これからテストを学びたいと思っている方

# ?

JavaScript 日付フォーマット、日時分秒の差分計算（週末・年末まで）

JavaScript の日付処理でさっとやったやつをメモしておく
フォーマット、日付計算とかもっと良いのないかなと感じてます．．．
変数名も適当すぎる．．．

https://sueasen.github.io/javascript-exercise/work/datecalc/

“`JavaScript
// 曜日の日本語リスト
const weekdays = [‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’];

// 現在日時取得
const now = new Date();
// 今週末
const nextWeekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (6 – now.getDay()));
// 来年初日
const nextYearFirst = new Date(now.getFullYear() + 1, 0, 1);

console.log(dateFormat(now));
console.log(diffDate(now, nextWeek

Yahoo APIでの商品検索

# 本記事で紹介すること

1. Yahoo APIの導入方法
2. Yahoo APIを使ったYahoo Shopping相当の検索

今回は、その他内容には触れません。

## Yahoo APIとは

Yahooが開発したWebサービス（API）のことで、以下のようなAPIがある。

1. ショッピング（Yahooショッピング）
2. YOLP（地図）
3. テキスト解析
4. 求人
5. ニュース（Yahoo ニュース）

今回は **ショッピング**の**ショッピング情報取得API**を使う。

:::note alert
旧仕様と新仕様の二つがあるが、旧仕様は提供停止なので、利用できない
:::

使う前に必ず、アプリケーションIDを取得する必要がある。

## アプリケーションIDの取得方法

1. Yahooでアカウント登録
1. アカウント未所持の場合
2. 携帯の電話番号が必要
2. `https://e.developer.yahoo.co.jp/dashboard/`で*新しいアプリケーションを開発*をクリック
3. 必要な情報を入力し、アプリケ

【ES6】配列の要素の合計値をreduce()で求める【メモ】

“`js
// 数値を格納した配列を用意
const pureNumArr = [1, 2, 3]

// 合計値を求める
let totalNum = pureNumArr.reduce((sum, element) => {
return sum + element;
}, 0)
console.log(totalNum) // 6
“`

react-routerでnavigateする時、stateはどこに保存されているの？

# 結論

**window.historyのstate**

# 前提
react-routerはなんとなくで使えてしまうので、一応確認したという程度のメモ書きです。
[react-router公式](https://reactrouter.com/en/main/start/overview)のメインコンセプトによると、HistoryはURLの変更をsubscribeできるようにするオブジェクトで、ブラウザのhistoryをプログラム的に操作するAPIも提供していると記載があります。
> History – An object that allows React Router to subscribe to changes in the URL as well as providing APIs to manipulate the browser history stack programmatically.

また、LocationはWEB APIのwindow.locationを基にしているという記載もあります。
> Location – This is a React Rou