f@ctor

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

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

ブラウザのレンダリングについて【学ぶ動機】

## 動機
働いている同期と話す中で、`ReactやNext.jsで用いられている技術のCSR,SSG,SSR,ISRはどのようなレンダリングをおこなっていてどんなアプリ開発に向いているのか。`というような疑問が出てきました。
[CSR,SSG,SSR,ISRの参考記事](https://qiita.com/hiroki-yama-1118/items/b3388c5dcb155e2e367d)
### そもそもレンダリングについて詳しくないではないかと…

そこで、ブラウザで行われているレンダリングから学んで、この記事にまとめておこうと決めました。

[ブラウザのレンダリングのサイクル](https://qiita.com/kosuke-17/items/aaf8ecb090fb664198f4)

***
**参考記事**
[【JavaScript】ブラウザのレンダリングの仕組みについて](https://qiita.com/wqwq/items/9e87e018e5725b8c2c0d)

**書籍**
[Webフロントエンド ハイパフォーマンス チューニング](htt

元記事を表示

ブラウザのレンダリングのサイクル

URLを打ち込むと、レンダリングサイクルの流れの後にサイト・アプリケーションが表示されます。

## ブラウザのレンダリングサイクルは4つ

**Loading　→　Scripting　→　Rendering　→　Painting**

### サイクル図

![スクリーンショット 2022-02-11 9.34.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1310301/cd6f1a56-65d1-63bf-9aa3-bdd7211bfcd9.png)

– Composite Layersが終わると、ユーザーが認知できる画面が表示される。

![スクリーンショット 2022-02-11 10.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1310301/d7e1747a-9810-481b-8e1f-735424f64ea2.png)

上記の画像は私が理解するために日本語化したものです。

本記

元記事を表示

フロントよわよわエンジニアによるJavaScriptの基本の言語仕様の理解

# 目次
– 自己紹介
– はじめに（想定読者／持ち帰ってほしいこと／お断り）
– 背景
– 書籍紹介／内容
– おわりに

# 自己紹介
– 2021/8~ PHPを使った開発に着手
– 2021/11~ Vue.jsを使ったタスクにも着手
– 最近ではちょっとづつレビュワーとしても動くようになりました。

# 想定読者
– あくまでメインはサーバーサイドorインフラでフロントはちょっとしか書かないよ、って方
– JSを基礎からきちんと学べていない方

# 持ちかえってほしいこと
– JSってこんなにクセあるんだ～と再確認してもらう
– 自分の認識（主にサーバーサイド言語）とのギャップを実感してもらう

# お断り
かなり、JSの土台の話になるので、、、

– フロントエンドメインの使い手の方
– 既にキチンと基礎からJS学ばれている方
– 逆にJS、JSライブラリ、JSフレームワークを実務で全く使っていない方

にとってはムダな時間になると思いますので、休憩、作業頂いて全く構いません:ok_woman_tone1:

# 背景
Vue.jsでとあるタスクに取り掛かっているときに

元記事を表示

【JavaScript関数ドリル】を毎日やる【勉強用】その３

#【JavaScript関数ドリル】初級編のuniq関数の実装のアウトプット

##uniq関数の課題内容

“`javascript:uniq関数の挙動
_.uniq([2, 1, 2]);
// => [2, 1]
“`
配列内の重複する値のみ取り除き、新たに出力するもの。
##uniq関数に取り組む前の状態

– ２回目でやったwithout関数の時に覚えた`Array.from(new.set(配列))`が使えそうだ
– すぐにできそう

##uniq関数に取り組んだ後の状態

– 初めて数分で実装できた
– 解答のように元の配列は変更していないことの証明もできれば良かった
– 初めにLodashのuniq関数を見たときに、すぐにArray.fromは思いついたが解説のようなfor文は思いつかなかった
– forループと反転if文のincludesの組み合わせがすぐに思いつくようになれば、もっと配列を自在に扱えそうだ
– 短時間でできたのでQiitaの投稿時の装飾について調べられた

##uniq

元記事を表示

XPath1.0でクラスセレクター相当の要素選択をする

※HTML文書からJavaScriptでXPath式を評価して要素を抽出するケースの話です。

# 概略

クラスセレクターやDOM APIの`getElementsByClassName()`メソッドを使うと、class属性のリストに特定の値を含む要素を抜き出すことができます。

XPathはCSSセレクターよりも柔軟で複雑な指定ができ、要素以外のノードも取得できる便利な道具ですが、単純な書き方ではクラスセレクター相当の挙動は実現できません。

しかし、式を工夫することでクラスセレクターと等価な[^1]選択ができるようになります。

[^1]: 正確に等価かどうかは自信がありません。粗があれば教えていただければ幸いです。

結論を言えば、class属性に`cls`という値を含む要素を取得したいとすると、
次のようなXPathを書けばよいです。

“`XPath
//*[contains(concat(‘ ‘,@class,’ ‘),’ cls ‘)]
“`

厳密にHTMLの仕様に従うなら、`@class`を`normalize-space()`で囲います。

“`XPath

元記事を表示

【帳票】stimulsoft report.jsのPDF日本語化問題について

#はじめに
帳票ツール[Stimulsoft report.js](https://www.reqware.jp/stimulsoft)を利用するときに、日本語の文字化け問題をどのように対処すべきか整理します。
特に帳票ファイルのPDF化には、PDFの特性をよく理解することが、この課題の対応の近道になります。

#前提
Stimulsoft report.js

#PDFの特徴
Stimulsoftの話の前にPDFの特性を理解します。
PDFは印刷ファイルとして、デファクトと呼べるほど非常に普及しているファイル形式となります。

PDFの優れた特徴に「正確に再現する」というポリシーがあります。このなかでも、「忠実性」「自己充足性」が文字化け問題を考えるときに意識しなければならないポイントになります。

例えばブラウザなどは、フォント情報などを参考にはしますが、最終的にはユーザーが見ることができるということを優先するので、フォントが見つからない場合も、代替フォントで表示しようとします。また罫線などのレイアウトも文字が収まるように枠の大きさなどは自動拡張がなされるというように正確性は二の

元記事を表示

相互フォローしている人限定でＤＭを送れるようにする。

地球の皆さんこんにちは。
今回は、この私が理解に苦しんだ、相互フォローしている人限定で、ＤＭのやりとりをできる方法を解説します。
私は、これまでプログラミングというものをやってこなかった…..そう、やってこなかったのです。
この苦しみ….あなたにわかりますか？わからないというなら……！くらえ！！！！

それでは、さっそく始めていきましょう。

>Rails 6.1.4
Ruby 2.6.3
Bootstrap, devise導入済み
Bookの投稿サイトを作っています

前提条件

Userモデル、コントローラ
relationshipsモデル、コントローラー(フォロー機能実装のためのもの)
以上が作成済みであること。

ちなみに私の好きな食べ物はオムライスです。

モデルを作ろう

さあ！ここで問題です。今から何を作るでしょうか！？
チッチッチッ……..
ヒントは好きな食べ物です！！！
さあ！答えをどうぞ！！！

そう！！モデルを作ります！！

“`ruby
rails g model Chat user_i

元記事を表示

JavaScriptでカレンダーを作る in ES2019

# 2022年になってもカレンダーを一から作る
みなさんカレンダー作ってますか？
「今どき、Google カレンダーでも埋め込んどけや」という声が聞こえてきそうですが、実際どうなんでしょう？

もしかしたら誰にも求められていない可能性がありますが、過去に投稿したカレンダー作成に関する記事のアップデート版としてこちらに色々と残しておくので、必要になったら使ってみてください。

ちなみに今回はロジックとマークアップを完全に分けました。
そのうえ、DOMではなくテンプレートリテラルで組み立てています。

ここ数年でフロントエンドでもテンプレートを使うのが一般的になってきましたし、そのほうが勝手が良さそうということと、処理中にDOMをいじるのがかなり面倒に感じたものですから。

なお、過去の投稿は下記のものです。

https://qiita.com/shingorow/items/6085693cb039f073c5e2

## まずはJavaScriptから
JavaScriptのコードは以下のとおりです。
コードのあとに補足を入れていきます。

“`javascript
const s

元記事を表示

JavaScript ループ 「break」「continue」

JavaScriptでループする意味のコードを記述するとき
「for文」か「while文」を使用するかと思います。

_for文コード_

“`
for(let i=0;i<5;i++){ document.write(i); } ``` _出力_ ``` 01234 ``` _while文コード_ ``` let i=0; while(i<5){ document.write(i); i++; } ``` _出力_ ``` 01234 ``` 上記のfor文とwhile文は同じ意味です。 この２の文に共通して使える「break」、「continue」という２つの命令があります。 簡単にいうと 「break」は、その時点で強制的にループを抜ける 「continue」は、後の処理をせずにループする という意味です。どういうことかというと、 _for文「break」コード_ ``` for(let i=0;i<5;i++){ if(i===3)break; document.write(i); } ``` _出力_ ``` 012 ``` 「document.wr

元記事を表示

vistaでphotoshop その9

#概要

vistaでphotoshopやってみる。
キャンバス作って、マンデルブロー書いて、pngで出力やってみる。

#写真

![test8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ebc1f42a-1a4b-4452-507f-982df4e2dee5.png)

#サンプルコード

“`
var v = [];
var pixelSize = 1;
var width = 300;
var height = 300;
var maxIterations = 100;
var mandelMin = -2.5;
var mandelMax = 2.5;
var infinity = 2;
var brightness;

function draw() {
for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { var map = function(num, in_min

元記事を表示

Stripe Webhookで、追加されたカードを自動的に「デフォルトの支払い方法」へ設定する処理を書く

Stripe Checkoutを利用してカード情報登録フォームを作ることができます。

https://qiita.com/hideokamoto/items/0ea4fe01cac8c8ad8669

# Checkoutの`mode=’setup’`は「デフォルトの支払い方法」を設定しない

`mode=’setup’`で登録した場合、その決済方法は「デフォルトの支払い方法」に設定されません。

そのため、Checkout以外のルートで決済を行う必要がでた場合に、支払い方法を個別に指定する必要がでます。

# Webhookで、登録した支払い方法を自動的にデフォルトの支払い方法に設定する

対策の１つとして、Webhookで追加された支払い方法をデフォルトに自動設定する方法があります。

## Next.jsのAPIでの実装例

実装例としてNext.jsのAPIを紹介します。
コード詳解部分を参考にすることで、Expressなどへも応用することができます。

**pages/api/webhook.js**

“`js
import Stripe from ‘stripe’

元記事を表示

floatさせた画像をボックスの左下・右下角に配置して、回り込んだテキストと画像を下揃えしたい

画像をボックスの左下や右下角に配置したレイアウトで、回り込んだテキストと画像を下揃えして表示したい。レスポンシブで！ その実現方法のメモです。
![demo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/2a80b9a7-ace4-fc67-307f-6db4b772c553.jpeg)
※素材画像 引用元：[Unsplash](https://unsplash.com/photos/PyRU3x6EJoI)

画像をfloatにして、テキストと下揃えする位置まで動かせば実現できそうです。
課題は、**下揃えになる位置をどのようにして取得するか？**です。ブラウザで表示してテキストの折り返しの状態を見ながら画像の位置を手作業で調整することによって画像とテキストを下揃えにする位置を見つけることはできますが、これではレスポンシブに対応できません。

そこで、JavaScriptの[Intersection Observer API](https://developer.mozilla.org/

元記事を表示

サーバに配置したWebViewのコンテンツからスマホのネイティブアプリのURLスキームの呼び出し方法

筆者は普段サーバサイドのエンジニアとしてWebシステムの開発をしているが、
担当している案件でスマホのネイティブアプリ内のWebView内にコンテンツを組み込む案件がありました。

その際に、URLスキームを使ってネイティブアプリとWebViewのコンテンツ間の連携でハマったので、備忘録として残しておきます。
本記事はあくまでサーバサイドの立場からの対処方法になります。

## URLスキームの書き方
筆者ははじめ、下記のコード用にfetch関数での読み込みを想定していました。
しかしURLスキームはネイティブアプリのWebViewのURLローダーの部分で実行する仕組みのため、
fetch関数のようなJavaScriptの非同期処理では実行が出来ませんでした。
そこで以下のように `location.href` にURLスキームを設定し、
ネイティブアプリのWebViewに読み込ませることで問題を解消しました。

“`
// 間違い
fetch(“【URLスキーム】”);
// 正解
location.href = “【URLスキーム】”;
// 参考例
location.href

元記事を表示

Sync Gateway機能解説： Sync関数APIリファレンス

## はじめに

以下の記事では、Couchbase Mobileにおいて、Sync関数のはたす役割を開設しました。

https://qiita.com/yoshiyuki_kono/items/c418475ab46bf9505938

ここでは、Sync関数で何を行うことができるかをより具体的に理解できるよう、ここでは、Sync関数を定義する際に、開発者が利用することのできるヘルパー関数に関するリファレンスを提供します。

なお、Couchbase Mobileについては、[Couchbase Mobileアプリケーション開発へのロードマップ](https://qiita.com/yoshiyuki_kono/items/6a5bbad1b02196a25417)に記事をまとめている他、（これらの記事を元に構成した）以下の電子書籍を無償で頒布しています。

https://techbookfest.org/product/5074954942939136?productVariantID=5042865933647872

また、Couchbase Mobileは、Couchba

元記事を表示

【JavaScript】西暦の年だけを用いて和暦の年を表示する方法

こうする

See the Pen
Untitled by qwe001 (@qwe001)
on CodePen.