## 1. メータ部分の作成
メモリ使用量を取得する
作成しているサイトが重いと感じたとき、もしかすると、メモリをたくさん使用しているかもしれないです。`performance.memory`を使用すれば簡単に取得できます。メモリ情報の取得方法とそれぞれの値の意味はこちらの[ChromeでJavascriptのメモリ使用量を確認する方法](https://blog.pokechoi.com/archives/1096)の記事に書かれています。
以下のコードはぱっと見でどのくらい使用しているかを確認するためのメモです。
“`js
setInterval(() => {
getMemory()
}, 1000);
function getMemory() {
console.log(`使用可能なメモリ ${(performance.memory.jsHeapSizeLimit / 1048576).toFixed(2)}MB`);
console.log(`割り当てられたメモリ ${(performance.memory.totalJSHeapSize / 1024).toFixed(2)}KB`);
# EslintプラグインのREADMEを見る
例えばプラグインのRulesの説明にこんな風に書かれている (一部省略)
https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/docs/rules/no-custom-classname.md
“`js
…
“tailwindcss/no-custom-classname”: [, {
“config”: |
でなにをどこに書けば良いのか？と。
この場合、
– 配列の1個目 -> 文字列で `enabled` -> `off` `warn` `error` のどれかを指定する
– 配列の2個目 -> オブジェクトで他のプロパティを指定する。たとえば whitelist であれば文字列の配列を指定する。
ということのようだ。
rulesの構造はプラグインによって割と自由っぽい。
##
# ファイル形式
色々なファイル形式に対応している
– .eslintrc.js / .eslintrc.cjs – Javascipt形式 ( 値を動的に生成する場合はこれを選ぶ )
– .eslintrc.json – JSON形式
– .eslintrc.yml – YAML形式
– .eslintrc – コメントの入れられるJSON形式のようだが非推奨のようだ
どの形式でもプロパティの構成は同じ
# .eslintrc の生成
コマンドを使うと対話形式で作成してくれる。(選択肢が多い)
“`
npm create @eslint/config
“`
ファイル形式を聞かれるステップがあるのでここで好きな形式を答えると良い
“`
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
“`
# Javascriptファイル の例
“`cjs
module.exports = {
“env”: {
“browser”:
# 初めに
Reactでの開発にImmutable.jsを導入したく簡単に調べましたが、かみ砕いた説明が見つけられなかったので、個人的に調べた内容をまとめることにしました。
英語ができないので翻訳ソフトを使って訳したものをまとめているので、文章が不自然かもしれませんが、多少は目をつぶってください、、、
[参考：Immutable.js](URL “https://immutable-js.com/”)
# Immutable.js
– Immutable.jsは、JavaScriptのためのライブラリで、データを「変更不可能」（イミュータブル）にすることができます。
– 一度作成したデータは後から変更することができず、新しいデータを作る際には新しいインスタンスが生成されます。
## Reactとの相性
– Reactは、アプリケーションの状態を効率的に管理・レンダリングするためのライブラリです。
– Reactの中心的な考え方の一つは、コンポーネントの状態やプロパティが変更されたときに再レンダリングを行うことです。
## Immutable.js × Reactのメリット
–
# 背景
clsxを使ってみたく軽く調べたところ概要から基本的な使い方までを説明している記事があまりなかったので、簡単に自分の理解した範囲でまとめます。
私は初学者なので、基本的には同じ初心者向けの内容となると思います。
また、間違いも多少あるかもしれないので、その場合は優しく教えてください。
それでは行ってみましょう。
# 概要
## clsx とは?
– clsxは、JavaScriptやTypeScriptで使える軽量なライブラリで、主にReactコンポーネントなどでクラス名の文字列を効率的に、そして簡単に生成するためのものです。
– これは特に、CSSのクラス名を動的に構築する際に非常に役立ちます。
## なぜ clsx が必要なのか?
– Reactのコンポーネントでスタイリングをする際、propsやstateに基づいて動的にクラス名を変更したいという要件がよくあります。
– このような場面で、clsxは複数のクラス名や条件付きのクラス名を簡潔に、そして読みやすい形で生成するのを助けます。
## 主な特徴:
– 軽量:
– clsxはパフォーマンスを意識し
## イベント
イベントとはマウスクリックやドラッグ&ドロップなどユーザーの操作によって発生する動作や、Local Storageの操作のようなシステムで生じた出来事のことを指します。
JavaScriptを用いることでイベントが発火した時に特定のJavaScriptの関数を実行させられます。その関数のことをイベントハンドラと呼び、それをイベントに紐づけるように定義することをイベントハンドラを登録すると言います(イベントハンドラはJavaScriptの関数と書きましたが、厳密にはそれに限定せず実行される特定のコードブロックのことを指します)。
下の例では`button`という`id`を持つ要素をクリックしたときにアラートを出すようなイベントハンドラを登録しています。
“`js
const button = document.getElementById(‘button’);
button.addEventListener(‘click’, () => {
alert(‘clicked’)
});
“`
`addEventListener`でイベントハンドラの登録を行なっています
## スタイルのカスタマイズとセレクトボックスのデザイン変更
セレクトボックスは、ウェブサイトやアプリケーションで頻繁に使用されるコンポーネントの一つです。デフォルトのスタイルでは、デザイン性に欠けている場合があります。そこで、javascriptを使用してオリジナルのセレクトボックスを作成し、スタイルをカスタマイズする方法について説明します。
### セレクトボックスのスタイルカスタマイズの基本
セレクトボックスのスタイルをカスタマイズするためには、以下の手順に従います。
1. htmlでセレクトボックスの要素を作成する。
2. cssでセレクトボックスのスタイルをカスタマイズする。
3. javascriptでカスタマイズしたスタイルをセレクトボックスに適用する。
まず、htmlでセレクトボックスの要素を作成します。
“`html
学習した事のアウトプット、備忘録です。
– 参考書籍：確かな力が身につくJavaScript「超」入門
– ダイアログボックスの表示
windowオブジェクトを使用する。
– 確認ダイアログボックスの表示
※confirmメソッド：ダイアログボックスに表示された「OK」か「キャンセル」をクリックすると実行結果をtrueかfalseか返す。trueかfalseの両方を合わせてブーリアン値という。
“`
window.confirm(‘表示させたい文章’);
“`
– ダイアログボックスにテキストフィールドを表示させる
“`
window.prompt(‘表示させたい文章’);
“`
– if文
“`
if(条件式) {
条件式がtrueになる（成り立つ）時に実行する処理
} else {
条件式がfalseになる（成り立たない）時に実行する処理
}
“`
※falseの時に実行するものが何もなければ、else以降は省略できる。
更に条件式を追加するなら、
“`
if(条件式) {
条件式がtrueになる（成り立つ）時に実行する処理
} elsif(
GoogleSite使っている方いますか？個人的にはそこまで親近感を感じてはいないのですが、ちょっとした社内ポータル作るのにいいという話もあったりとか。
今回社内で管理部門に色々情報を書いてもらって、システムチームで入り口ページを作ってみました。で、以下のような情報を各部門に入れてもらってます。
これをそのままポータルのメニュー（アコーディオン）として出せれば見やすいかなと思って今更感のあるjQueryとSpreadSheetのGASを使ってAPIを作ってみたのでそのやり方をご説明します。
こちらが完成イメージです。
ソースコード
“`
## はじめに
思考実験として、投稿とそれに対するコメントやいいねができるシステムを考える（DBスキーマは以下のようなテーブル構成とする）。
このシステムでは、投稿テーブルでコメントの合計数を持つような設計になっているとする。そのような設計になっているがゆえに、コメントを行うAPIがあった場合には、以下のような実装になる必要がある。実装におけるポイントは、コメントを行うごとに投稿テーブルのcomment_countをインクリメントする必要があるので、投稿テーブルの行ロックを取る必要がある部分になる（ロックを取らずに投稿テーブルを更新すると、数値がおかしくなる）。
このような実装をしたとき、どれくらいのAPIコールがされると行ロックを取っていることがネックになり、サービスに影響が出る（ロック待ちでAPIの応答が遅くなる）が出るのか気にな
## はじめに
未経験からフロントエンドエンジニア目指してます25歳女です。
今日からJSの基礎文法を学び始めたばかりです。
JavaScript超初心者が使用する予定の教材を載せます。
こういうのは、終わってから振り返るのが多いかもですが、自分の記録用として自分のために書きます。
同じようにJavaScriptの学習を始めようと情報を集められている方の参考になれば幸いです。
※使用教材が多く、ツヨつよエンジニアの皆様は遠回りだと感じられるかもしれないですが、見守ってくださると嬉しいです。（何かアドバイスやおすすめ書籍の情報あればコメントくださると嬉しいです。）
もう10月ですが、年内までにしょぼくてもいい（できればモダン技術を使用した）ポートフォリオをなんとかして作成します。ほんまに焦ってます！！！
がんばるます！！！！
#### 使用予定の教材
##### 教材
paizaラーニング
(https://paiza.jp/works/js/primer/beginner-js1/12001/1)
基礎が定着しやすい。
[JavaScriptをとことんやっ
## オプションの動的生成と選択肢のリアルタイム反映
javascriptのセレクトボックスには、静的な選択肢を設定するだけでなく、動的に選択肢を生成して追加することもできます。また、選択した項目に応じて別の選択肢を表示することもできます。
### サンプルコード
`javascript
// セレクトボックスの動的な選択肢生成
function createoptions() {
var selectbox = document.getelementbyid(‘myselectbox’);
// すでに選択肢があれば一旦削除する
selectbox.innerhtml = ”;
var options = [‘オプション1’, ‘オプション2’, ‘オプション3’];
for (var i = 0; i < options.length; i++) {
var option = document.createelement('option');
option.value = i;
option.text = options[i];
今回は、日頃業務をしながら気になったことを勉強してみました。
HTML内にあるscriptの処理とデータの渡し方です！
この記事を通じて、JavaScriptのデータの渡し方やイベント制御のテクニックを習得に繋がればと思います。
## まずはコードと仕様
“`
Document
