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

【JavaScript】配列メソッド道場「reduce」

## reduce とは

`reduce`メソッドとは、「**配列内の要素を順番に処理して、1つの結果を算出するヤツ**」です。

以下では、配列`numbers`の数値の合計値を算出しています。

“`javascript
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);

console.log(sum); // 15
“`

個人的に`reduce`メソッドは、引数の多さや、複雑な見た目からJavaScriptの配列メソッドの中でも最難関だと思っています。

## 破壊的 or 非破壊的

`reduce`メソッドは、**非破壊的メソッド**です。使用しても、操作元の配列に影響は及びません。

> JavaScriptの配列メソッドには、実行した際に元の配列やオブジェクトそのものを変更する「破壊的メソッド」と、元の配列やオブジェクトを変更せずに新しい配

【 React 】CSS変数を使った効率的な色管理方法: サブカテゴリの使用 と その他色管理方法

## はじめに
CSS変数（カスタムプロパティ）は、色を含むデザイン要素の管理を簡素化し、コードのメンテナンス性を向上させる強力なツールです。

この記事では、特に色が多くのデザインパターンにわたる場合に、サブカテゴリを使用して色を効率的に管理する方法について解説します。

## 基本的なCSS変数の設定
まず、基本的な色の設定方法をおさらいします。
**CSS変数**を使うことで、再利用性が高まり、**一貫性のあるデザインを保つ**ことができます。

“`css:styles.css
:root {
–primary-color: #3498db;
–secondary-color: #2ecc71;
–background-color: #ffffff;
–text-color: #333333;
}
“`

これらの変数は、以下のように使用します。

“`css:top.css
body {
background-color: var(–background-color);
color: var(–text-color);
}

butt

Javaの値をJavaScriptで使用する方法

# やりたいこと
JavaScriptでJavaの値を使用する。
フレームワークはSpringBootで、thymeleafを使用する。

# 使用例
バックエンドであるJavaでデータベースの値を得て、JavaScriptがその値を参照したいとき。

# 実践例
“`HomeController.java
@GetMapping(“/home”)
public String view(Model model) {
model.addAttribute(“キー名”, 値);
return “home”;
}
“`
キー名を指定してJavaScriptで使用したい値をmodelに格納する。キー名は任意。
“`home.html