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

React + TypeScript: Next入門03 プリレンダリングとデータ取得

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの第3回です。アプリケーション内のディレクトリに収めたマークダウンファイルからデータを読み込んで、トップページに表示してみます。

# プリレンダリングとは

プリレンダリングはNext.jsのデフォルトで、各ページはあらかじめレンダリングされます。ページのHTMLをクライアント側のJavaScriptにすべてつくらせるのでなく、Next.jsが静的な処理は先に済ませておくということです。プリレンダリングは、パフォーマンスとSEOを高めるのに役立つでしょう。

生成されたページそれぞれに関連づけられているのは、必要最小限のJavaScriptコードです。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、完全にインタラクティブになります(「[ハイドレーション](https://zenn.dev/hisasann/articles/what-is-hidration)」と呼ばれます)。

Next.jsには、つぎのふたつのプリレンダリングの仕方があります。違いは、いつペー

npm install -g {packageName}は古いと言われた

先日、モブプロで開発作業中にnpm install -gを実行しようとして先輩に「npm install -gはもう古い。[npx](https://www.npmjs.com/package/npx)を使った方がいい」と言われた。

“`
npm install -g {packeageName} # インストールしたらディスク上残る上にインストール後に実行する必要がある

npx {packageName} # インストール、実行、削除、を全部やってくれる
“`

npxは node package executerの略でパッケージの実行ツールらしい。
パッケージを探してインストールして実行、処理が終わればパッケージを消してくれる優れもの。便利だなぁ～

JavaScript ~コレクション編~

・コレクションとは

コレクションとは、値をまとめて管理するオブジェクトのことである。コレクションには、Object、Array、Map、WeakMap、WeakSetの５種類ある。

・Array（配列）

・Arrayの初期化

　　`const 配列名 = [値1, 値2, …];`　又は `const 配列名 = new Array (配列の長さ or 値1, 値2, …);`

・配列のメソッド

　　`配列名.push(“Zoom”, “Discord”…);`　配列の一番後ろに要素を追加する。

　　`配列名.unshift(“Java”, “JavaScript”…);` 配列の先頭に要素を追加する。

　　`let shiftVal = 配列名.shift();` 配列の先頭の要素を削除する。 shiftValに削除された値が代入される。

　　`let popVal = 配列名.pop();`　配列の一番後ろの要素を削除する。 popValに削除さ

実務未経験でHTML5プロフェッショナル認定試験 レベル2に一発合格した

HTML5プロフェッショナル認定試験 レベル2に合格したので
これまでの学習スタイルであったり、学習方法などまとめて
同じ資格試験の合格を目指している方や、
これから取得に向けて勉強を始める方の
参考になる記事になればよいなと思います。

HTML5プロフェッショナル認定試験とは

特定非営利活動法人エルピーアイジャパンが主催する民間資格です。
HTML5プロフェッショナル認定試験にはレベル1とレベル2が存在し、
それぞれ出題範囲が異なりますが、レベル１の説明については割愛します。

レベル２の出題範囲

2.1 JavaScript
2.1.2 ES6（ECMAScript2015）以降の新機能(Ver2.5)
2.2 WebブラウザにおけるJavaScript API
2.3 グラフィックス・アニメーション
2.4 マルチメディア
2.5 ストレージ
2.6 通信
2.7 デバイスアクセス
2.8 パフォーマンスとオフライン
2.9 セキュリティモデル

オブジェクトの分割代入(Destructuring assignment)

はじめに

分割代入(Destructuring assignment)とは
配列やオブジェクトのプロパティを解体して、その値を個別変数に含めることができるJavaScript表現式です。

分割代入の適用前

以下のコードを見ると、this.feeds[i]オブジェクトが何回も使われています。
こんなのを見るとthis.feeds[i]を一つの変数に抜き出しておきたいわけです。
こんな時に分割代入にて綺麗なコードにすることができます。

“`typescript
renderView = () => {
if(this.store.hasFeeds) {
for(let i = (this.store.currentPage – 1) * 0; i < this.store.currentPage * 10; i++) { this.addHtml(`

【Wasm】RustからJavaScriptパッケージを利用する

[wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)を用いることでjsファイルで定義されたクラスや関数などをRustから[利用できます．](https://rustwasm.github.io/wasm-bindgen/examples/import-js.html)今回はそのwasm_bindgenとJavaScript等のバンドラである[webpack](https://github.com/webpack/webpack)を利用して，jsパッケージ(具体的には[plyr]())をRustから利用してみます．また，バンドルサイズを小さくするためにjsパッケージをCDNからも利用してみます．作成したクレートは[こちら](https://github.com/deepgreenAN/plyr-rs)．

## JavaScriptのバンドル
まずはwebpackを利用するプロジェクトを[webpackのGetting Started](https://webpack.js.org/guides/getting-started/

for文 と forEachメソッド の違い on kintone

# はじめに
研修等でお伝えしていることを書き起こしたような感じなので、色々と変な記述もありますが、大目に見てくださいませmm

# 最初にまとめを…
JavaScript言語において、for文は繰り返し処理を実現する **「構文」** ですが、forEachは、配列の要素を先頭から最後まで順番に取り出すという **「メソッド(関数)」** です。

同じ「for」という名称が含まれていますし、書き方によっては全く同じ振る舞いをするので、同じ様なものとして混同されやすいですが、**全く別もの** です。

ちなみに、forEach内の処理を **「中断」** することはできません。

forEachはforと違う書き方くらいだよねと言う感じの理解で最初は構わないのですが、本質的な意味合いの違いを知っていないと、どこかの時点で痛い目に合っちゃいますので、その違いを理解しておくことは重要です。

# kintoneの画面

![2023-01-25_13h03_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 長い長い数列

長い長い数列 (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_boss

# 方針
大きな流れ：

０、ふつうに二重ループだと、処理が多すぎて、タイムオーバーする。(誤答例参照)

１、二分探索に持ち込めないか考える。
「k番目に小さい値」は、「数列に x 以下の値が k 個以上含まれるような値 x の最小値」と　言い換えられる。
→xを二分探索する。本問においてx=表に書き込まれる値| A_i – B_j |。

２、xの二分探索の中で、x=midとしたときの、| A_i – B_j |<=midとなる値の個数を求める。 # 各解説 ## 大きな流れ１の解説：二分探索に持ち込めないか考える。 言い換えられないか考えることが大事です。 **数列の k 番目に小さい値は、 「数列に x 以下の値が k 個以上含まれるような値 x の最小値」 と言い換えることができます。** 例えば、入力例1の| A_i - B_j |を計算した、以下の配列を考えます

【テックジム】無料GAS講座「メルマガスタンドを作ろう」の感想

テックジム主催の無料講座、GAS講座「メルマガスタンドを作ろう」を受講しました。プログラミングを学ぶ目的は、エンジニアになるためと考えられがちです。この講座を受講すると、事務職の作業をエクセルとワードとGoogleを使い、効率化するためにも、プログラミングの学習が役に立つと思えました。非常に解りやすくオススメです。

1-1の解説
1-2の解説
1-3の解説
1-4の解説

Introduction to TypeScript

TypeScript is a programming language that is a super set of JavaScript. It was developed and is maintained by Microsoft. TypeScript adds optional static typing and other features to JavaScript, making it a more powerful and versatile language for large scale software development.

One of the main advantages of TypeScript is its ability to catch errors at compile time, rather than at runtime. This can greatly reduce the number of bugs in a codebase, and make the development process more efficient

paizaラーニング レベルアップ問題集 二分探索メニュー JavaScript 太巻きを分けよう (おなかいっぱい)

太巻きを分けよう (おなかいっぱい) (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search/binary_search__application_step3

# 解答例
太巻き１つ１つの大きさを求め配列Bとする。太巻きを左端から１本１本長さがmid以内のできるだけ長い長さにする。分けた本数がnを超えるか以下で分けて、範囲を狭めていく。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//長さ L [cm] の太巻き, n 人で分け, k 個の切れ目
const [L, n, k] = lines[0].split(” “).map(Number);
const A = lines[1].split(” “).map(Number);
//太巻きのそれぞれの長さB
const B = A.map((v

Javascript (ES5) オブジェクト指向（？） の書き方

# ES5でのオブジェクト指向

ES6以降では、Class構文が書けるようになったのでクラスを用いたプログラミングも簡単にできるようになってきました。
ただ、保守的な開発現場では、まだまだES5の書き方を使っているところもあるようです。

自分用としてES5でのクラスの作成～継承までをメモ

1. 親クラス作成
1. 子クラス作成
1. 継承

### 1. 親クラス　Personを作成
まずは、親クラス（基底クラス）になるオブジェクトを作成

“` javascript:親クラス Person
/**
* 親クラス
* Person
*
*/
function Person(name, age) {
this.name = name;
this.age = age;
console.log(“Construct Person Class!”);
};

// Personクラスにプロトタイプメソッドを追加
Person.prototype.greeting = function() {
alert(“Hi!, Im “+this.n

React + TypeScript: Next入門02 イメージとメタデータおよびCSSを扱う

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみようというシリーズの第2回です。前回は、トップページを書き替えて、新たに追加した別ページとリンクしてみたというくらいでした。今回から、公式作例に少しずつ近づけてゆきましょう。

# `Image`コンポーネントでイメージを差し込む
Next.jsはイメージなどの静的素材も扱えます。素材ファイルを置くトップレベルは、[`public`ディレクトリ](https://nextjs.org/docs/basic-features/static-file-serving)です。Reactコンポーネントを収める`pages`と同じく、アプリケーションのルートから参照できます。

ページに表示するプロフィール画像を用意しましょう。ディレクトリ`public`に`images`をつくってください。

* 画像を`public/images/profile.png`として収めます。
– [`next-learn/basics/basics-final/public/images/profile.jpg`](

Vue3で別オリジンからデータを取得する【備忘録】

別オリジンから情報を入手する際に毎度躓くので、取得の仕方の例をここに記そうと思う。

# 環境
– Windows
– Vue3
# 取得方法
vue.config.jsファイルを用いてプロキシの設定をする。
“`devServer“`の“`proxy“`にプロキシサーバのurlを設定する。

“`javascript:vue.config.js
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy:”https://example.com”
}
})
“`

“`axios.get(url)“`を用いて同一オリジンの変数“`url“`に指定してあるエンドポイントにリクエストを送り、404エラーが投げられる前にプロキシサーバを経由して、再度変数“`url“`に指定してあるエンドポイントへリクエストを行い、レスポンスを取得する。

“`

Vue +