JavaScript関連のことを調べてみた

HERE Maps APIを使って避難所・避難場所を表示してみる

# はじめに

– 普段はOpenLayersばかりいじってて、自治体向けweb版ハザードマップとかやってたりします。
– JSフロントエンドフレームワークを使わずVanila JSが得意です。
– サンプルとしてコードを書いているので、表現が雑です。
– さらに、実際にコードを書いたのが半年以上も前のことで、詳しいことを覚えてません。

　そういうのでも良ければ、お目汚しかもしれませんが、どうぞ。

# 目標

　仙台市の避難所・避難場所を、とりあえず表示してみたい。
　なお、公式には、「[せんだいくらしのマップ \| 位置選択](https://www2.wagmap.jp/sendaicity/PositionSelect?mid=238)」から参照できる。

# 最初の一歩

　開発を始める前に、HERE無料アカウントの取得を行いました。
　参考→[地図 位置情報サービス HERE 無料アカウント有効化手順 \#初心者 \- Qiita](https://qiita.com/kekomat/items/d2e29bac84a27c1ec521)

　続いて、アクセスマネージャに

現代開発者のためのCSS基礎技術

ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。
ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。
仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。
本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。

特に

– プログラミング経験はあるもののウェブフロントエンドの経験が浅い方
– 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方

にお勧めです。

## プロローグ

CSSの書き方は一通りではありません。
好きな書き方を自由に選ぶことができます。
これは一見すると良いことですが、裏を返すと**最適ではない書き方がたくさんある**ということです。
この場において最適な書き方がどれか、CSSを書く側に判断を委ねているのです。
つまり、深い洞察力と思考力を持った者が、さらに重厚な知識を備えなければ、**ひどいものを大量生産**でき

【GAS】文法の基礎

### Logger.logとconsole.log
`Logger.log(変数)`などでログを出力する。
`console.log(変数)`も同様。

### 四則演算
“`
function myFunction() {
Logger.log(3+100);
}
“`
`+` `-` `*` `/`で計算できる。
### 変数
“`
function myFunction() {
const a = 3;
Logger.log(a)
}
“`
`const`で定義した場合、変数の上書きはできない。
`let`で定義すると、変数の上書きが可能。
`const`で十分な場合は、通常`const`を利用する。

### データ型
“`
function myFunction() {
const data = [1.44, 77]
Logger.log(typeof data)
}
“`
`type of` で変数の型を返す。

### 配列
“`
function myFunction() {
const data = [[1, 2, 3, 4]

グロービス学び放題の字幕機能の秘密大公開！😄

こんにちは、グロービスのフロントエンジニアAgataです。Udemyのような、動画学習サービスの[グロービス学び放題](https://unlimited.globis.co.jp/)というサイトの開発しております。

## 問題点

最近、ラーニングサポートのため、動画の隣に動画の全体の字幕が表示されるツールが増えてます。

例として、ユーチューブで使える[「Language Learning with Netflix & YouTube-AFL」プラグイン](https://chromewebstore.google.com/detail/language-learning-with-ne/bekopgepchoeepdmokgkpkfhegkeohbl?pli=1)みてみましょう。

⬆️[「Language Learn

演算子の&&を「かつ」で覚えていたため痛い目にあった

## この記事を書こうと思ったきっかけ
udemyでjsの勉強をしていて以下のような論理積演算子(AND)のコードで私が想像していた答えとは別の答えが帰ってきてその理由が意外な理由だったため忘れないため記事に残します。
“`
const ok = `hello` && `hi`
console.log(ok)
“`
私の最初の答えは&&＝「かつ」なので、okにはhelloとhi両方代入されていると考えたため、helloとhiの両方出力されるのではと思ったが、まさかの結果はhiのみの出力だった

## なぜ、hiのみが帰ってきたのか
結論、論理積演算子(AND)は左側がtrueなら右側を返し、左側の値がfalseだったら左側を返すから

## 上記を踏まえて以下のコードを見てみる
“`
const ok = false && true
console.log(ok)
“`
このコードではfalseが出力される
理由は左側の値がfalseだったら左側を返すから

演算子の||を「または」で覚えていたため解けない問題があった

## この記事を書こうと思ったきっかけ
udemyでjsの勉強をしていて以下のようなOR演算子のコードで私はどちらを返すかがわからなかったのですが理由を聞いて納得したので記事に残します。
“`
const ok = `hello` || `hi`
console.log(ok)
“`
私の最初の答えは||＝「または」なので、そもそも私にはhelloまたはhiのどちらがかえってくるか検討もつきませんでしたが帰ってきたのはhelloでした

## なぜ、helloが帰ってきたのか
結論、OR演算子は左側がtrueなら左側の値を返し、右側の値がどうであれ無視する。逆に左側の値がfalseだったら右側の値を返すから

## 上記を踏まえて以下のコードを見てみる
“`
const ok = false || true
console.log(ok)
“`
このコードではtrueが出力される
理由は左側の値がfalseなので右側の値を返すから

Next.jsでsymbol-sdk@3.1.0を使用してトランザクションを送信してみる

# はじめに

symbol-sdk@3を使用してWebアプリを作ろうと思ったのですが、VueやNuxtで試してみたもののうまくいきませんでした。

そこで、NEM/Symbolに詳しい[@Anthony14w](https://twitter.com/Anthony14w)に質問しました。

Next.jsでの使用ができるということで、実際に使用している例を教えてもらいました。

https://github.com/symbol/product/blob/dev/faucet/frontend/next.config.js

これを参考にして、手元でもやってみようと思います。

作る内容としてはとりあえず、ボタンを押すとトランザクションを送信するような簡単アプリを作成します。

# 手順

## インストール

まずは、Next.jsをインストールしていきます。

[Next.jsのインストールガイド](https://nextjs.org/docs/getting-started/installation)にもあるのですが、Node.jsがv18.17以上でなければなりません。

Mock Service Workerを使ってみた

:::note warn
この記事は、[Supershipグループ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/supership)の19日目の記事になります。
:::

# はじめに

Mock Service Workerの紹介の記事になります。

# Mock Service Workerとは

https://v1.mswjs.io/

モックのライブラリで、よくあるモックのライブラリより便利だった点は以下です

* アプリケーション側の通信するコードを書き換えずにモックができる
* アプリケーション側の通信する処理のコードで例えば環境変数だったりで、テスト時には通信しないというような分岐のコードなどの書き換えが必要がなかった

* モックサーバーを別に起動する必要がない
* 開発時にでモック用のサーバーが必要になった場合、モック用のサーバー作って別に立ち上げるという流れが多いがブラウザやNode.jsからそのまま動かせる

## テストコードで使う

“`json:package.js

【JS/ES6】ES6のよく使うタグの備忘録メモ

# はじめに
ES6を勉強する中でよく使うタグの備忘録メモ。

## varとletとconstの使い分け
### varとletは参照できるスコープが違う
varとletはどちらも定義した後に変更できる変数だが、参照できるスコープが違う。

– var : 関数内のどこからでも参照ができる
– let : ブロック内のみしか参照できない

#### varの場合
“`
const varScope = (scope) => {
if(scope == “var”){
var message = “hoge”
}
console.log(message); // hoge
}
“`

#### letの場合
“`
const letScope = (scope) => {
if(scope == “var”){
let message = “hoge”
}
console.log(message); // error
}
“`

### なぜスコープが狭くなったのか？
元々ES6以前は変数はvar

ものすごく丁寧に解説　初心者のためのReact　再レンダリングの仕組みと最適化

# 目的
Reactを学習しています。備忘録としてレンダリングについて自分なりにまとめてみました。誤りがあれば指摘をお願いします。

# レンダリングとは？
Reactがコンポーネントを呼び出すことをレンダリングという。

# レンダリングされるきっかけ
大きく分けると下記の２つがある。
①コンポーネントの初期レンダリング（画面の初期表示）
→rootのコンポーネントが呼び出される時
②stateが更新された時の再レンダリング
→状態（state）が変更された時

# 再レンダリングのタイミング
①propsの変更
②stateの変更
③親コンポーネントでレンダリングがあった場合

# サンプルコード（実際に動かしてみる）
インプットエリアとボタンでコンポーネントの表示/非表示を切り替えができる。
“`React:index.js
import React from “react”;
import ReactDOM from “react-dom”;
import App from “./App”;

ReactDOM.render(

テキストファイルをスプレッドシートにアップロードする

## Agenda
* はじめに
* やりたいこと
* どう実現するか
* 実装
* できた
* さいごに

## はじめに
O84です。
Excel(スプレッドシート)方眼紙にソースコードを貼り付ける機会、稀によくありますよね？
この記事ではアドカレ1日目で扱った内容の逆で、ファイルのアップロード処理を実装します。

## やりたいこと
1. ダイアログからファイルを受け取る
2. ファイルを整形してスプレッドシートに反映する

## どう実現するか
クライアント側でのファイル受付は適当にやる[^1] [^2]
“`google.script.run“`を使ってファイルをサーバに渡す[^3]
受け取ったファイルを任意の形式でスプレッドシートに反映する

## 実装

### クライアント側

“`html:upload.html