f@ctor

JavaScript関連のことを調べてみた2022年05月18日

JavaScript関連のことを調べてみた2022年05月18日
目次

HTML Canvasのインターフェイスのまとめ #2

HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。
本記事で2記事目となります（本記事でも触れきれないインターフェイスが多くあるので恐らく次の記事も執筆します）。前記事で触れた内容は割愛するので必要に応じて前記事もご確認ください。

前記事:

https://qiita.com/simonritchie/items/36e34bf409b6bd10f23a

# 描画系インターフェイス（追加分）

前記事で触れられなかった各描画系のインターフェイスについて以降の節で触れていきます。

## beginPathメソッド

beginPathは描画のためのパスを初期化します。初期化しなくとも単純な描画であれば出来るので使用は必須というわけではありませんが、beginPathを使わないと対応が面倒なことになったり厳しいケースがあります。

どのような時に役立つのか・・・のサンプルとして、以下のようなコードを考えてみます。

“`html


元記事を表示

Jestのまとめ –公式ドキュメントを読んで–（最低限で投稿、今後更新）

# What is Jest？
Jestは、JavaScriptのためのテスティングライブラリです。

# Jestを用いたテストの流れ
![Reactテストの流れ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303693/849f568f-85c5-ffa0-0f13-45a83d0f0fac.png)
図1.Jestを用いたテストの流れ
## セットアップ
データベースの初期化やコンテナを表示するDOMの準備といった、テストを行う前に実行する処理を記述する。
beforeAllでは、スコープ内（トップレベルならファイル全体、describe内ならdescribe内）のテストを実行する前に1度だけ実行する処理を記述する。
beforeEachでは、スコープ内の各テストの実行前に毎回実行する処理を記述する。
※細かい実行タイミングは、[公式ドキュメント](https://jestjs.io/ja/docs/setup-teardown#%E3%82%B9%E3%82%B3%E3%83%BC%E3%8

元記事を表示

【今度こそわかる】クッキーとセッション

# はじめに
今回、駆け出しエンジニアが何度学んでもすぐに忘れるあるあるトップレベルのクッキーとセッションについて、アウトプットも兼ねて簡単にまとめてみました！

この記事を読んでわかることは、
それぞれの**特徴**、**違い**になります。

それぞれの具体例も挙げつつ短めにまとめましたので、時間のない方でも気軽に読んでください〜！

# もくじ
1.[?最初の理解](#最初の理解)
2.[?クッキー（Cookie）とは](#クッキーとは)
3.[キャッシュとは](#キャッシュとは)
4.[セッションとは](#セッションとは)
5.[まとめ](#まとめ)

# ?最初の理解
クッキー、セッション、キャッシュについて学ぶ前に理解しておくべきことは、
**3つ**とも「**情報を一時的に保存しておく機能**」であるということです。
**3つ**とも「**効率的かつ速く、欲しい画面や情報をくれる**」というメリットがあるということです。

また、これら3つは、情報の**種類**と**保存場所**が異なるだけです！
これを念頭に読んでいただければと思います。

# ?クッキーとは
###

元記事を表示

(備忘録)今日つまづいたスマホレイアウトのあれこれ

今日スマホ実機で確認をした際に躓いたレイアウト、挙動面のエラーが
今後も起こりそうなので、備忘録を残します！

# inputエリアをタップ→画面が勝手に拡大
* 原因
iOSではfont-sizeが16pxを基準値としているため
cssでfont-size15px以下を指定すると、画面が勝手に拡大する

* 解決策
①font-sizeを16px以上に指定（意外と大きすぎない）
②metaタグのviewportに`maximum-scale=1.0`を挿入する

“`html



“`

#### ※ダブルタップズームは別途制御が必要
* 解決策
1. htmlに`touch-action:manipulation`
touch-actionには他にも色んなプロパティがあるようだけど
safariでは`auto`と`manipulation`しか使えないみたい。
`m

元記事を表示

パスパラメータ”/:id(\\d)”はどういう意味？　Node.js Expressのパスパラメータの設定の色々

## はじめに
Node.jsのExpressでは、以下のようにパスパラメータに正規表現を使う事ができる。

“`js
app.get(‘/posts/:id(\\d+)’, (req, res) => {
console.log(req.params.id);
res.end();
});
“`

今回は、Expressのパスパラメータの書き方の設定方法について、その種類とその挙動（curlコマンドでAPIを呼び出した時のconsole.log(req.params.id)の出力内容）について実際に試してみて理解を深めてみたのでそれについてみていく。

※Expressのversionは4.17.1になります。

## Expressのパスパラメータの設定方法の種類
以下のように設定方法は何種類かあり、それらについてどのようなconsole.log(req.params.id)の結果が得られるか？を見ていく（他にも設定方法があるかもしれないが今回は以下の5種についてみていく事にする）。
![image.png](https://qiita-image-store.

元記事を表示

JavaScript学習：DOM

# DOMや要素をイメージしやすくする

![javascript.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667981/9336107f-059a-b0e5-ada9-85402a228663.png)

 チーム開発でメンバーから思わぬ言葉が出たので、どうやって伝えよう？と試行錯誤してみた話。

【全体の話の流れ】
* [背景として](#背景として)
* [先ずはMDNでの解説を見てみる](#先ずはMDNでの解説を見てみる)
* [DOMとはどういうものか？](#DOMとはどういうものか？)
* [実際にDOMをいじってみる](#実際にDOMをいじってみる)
* [まとめ](#まとめ)

## 背景として
### 各々の前提知識から情報を提供しておくべきだった話
 先ず筆者は、経営情報学部出身である。
同学部では、軽くではあるけれども、 HTMLとCSSの授業は必須であるため、ある程度表側を触った経験はある。
プロゲートのHTML＆CSSくらい

元記事を表示

Leaflet入門

## [Leaflet](https://leafletjs.com/)とは
– オープンソースのJavaScript地図ライブラリ
– 軽量だが、必要な地図機能を網羅している
– デスクトップとモバイルの主要なプラットフォームで動作する

## 導入
– HTMLのheadタグ内にLeafletのcssとJavaScriptを指定する
– 執筆当時の最新バージョンは1.8.0だった
“`