【2022年最新】オススメの CSS in JS まとめ

## はじめに
今回は、2022年までに公開されている、オススメ**CSS in JS**を紹介します。

`Styled Components`や`Emotion`といったメジャーなものから
`Fela`や`Astroturf`といったマイナーなものまでまとめました。

CSS in JSを導入する時の参考や他のCSS in JSを勉強したいときなどの参考になれば嬉しいです。

## CSS in JS とは？
**CSS in JS**とは、外部ファイルでスタイルを定義するのではなく、
JavaScriptを用いて CSSを記述するために設計されたライブラリのことです。

**CSS in JS**を利用することで、コンポーネント内にCSSを定義することができ、
外部のCSSファイルに依存することなく、コンポーネント単体で独立させることができます。

例えば、外部ファイルでスタイルを定義すると、CSSの変更がどこに影響しているか分かりづらいことがよくあります。
それに比べ、**CSS in JS**を利用すると、コンポーネント内にCSSを変更しても他のコンポーネントへの影響がなくな

一次元配列の値が他の連想配列の中に全て存在するかチェックする方法

はじめに
—
reactで実装しているいて、配列を追加、削除、変更したり値が存在しているかチェックしたりします。
その中で、ある一次元配列の値が連想配列の中に全て存在するかチェックする方法がネットで見当たらず時間が少しかかったので備忘録として残します。
（ベストな書き方ではないかもですが。。)

everyメソッドとsomeメソッドを使用
—
everyメソッドは、配列内の値全てがメソッド内の条件式でtrueの場合にtrueを返してくれます。
そしてsomeメソッドは、配列内の値の一つでもメソッド内の条件式でtrueの場合にtrueを返してくれます。
この二つのメソッドを使用することで下記に一次元配列の値が連想配列内に存在するかチェックすることができます。

~~~react
fruits = [“apple”, “lemon”, “banana”]

fruitsMenuExpectTrue = [
{fruitName: “apple”, price: 200},
{fruitName: “banana”, price: 100},
{fruitName: “lem

Progate Javascript すべて終了。

やっと”プログラミング”のような内容

アロー関数に引数、因数を受け取る関数の呼び出しに戻り値、クラス・オブジェクトからインスタンス、コンストラクタ、メソッド等ざっと一通り基礎の基礎が終わった。（ファイルの受け渡しもやった）

考え方や概念に関してざっと理解しただけなのでどんどん実践を通して理解していきたいと感じる。来月にはまともなwebサイト作れるようになりたいのでサーバーの作成>>webアプリ制作とprogateの内容を進めて全体像をつかんでいきたいと思う。楽しみがいっぱい。

ペースがやや遅い

jsの内容も２日あれば終わらせることができたのでどんどん進めていくよう努める。

webpackというものを触ってみる – Babel導入

# はじめに

前回、webpackを導入してからの続きです。

https://qiita.com/kuro___inu/items/850fdc8e13bc537c9d03

最近のJsは変化が早く、ブラウザによって対応が異なっていたり、単純にユーザーのブラウザのバージョンが古いとかで、新しい機能を使うとユーザーによっては正しく動かないという事が発生します。
それをできるだけ解消してくれるのがBabelというツールらしいです。
よくあるのがES6からのアロー関数や `let` `const` の変数宣言等、対応していないブラウザ(というかIE11)で動作する様にしたいという要望で、読み込んだJsを変換して叶えてくれるそうです。
これをコンパイルとかトランスパイルとか言うそうです。

# 環境

– windows10 (wsl2)
– node(v16.18.0)
– yarn(1.22.19)

ディレクトリ構成やファイルの内容は前回の最後から引き続きです。

# Babelをインストール

とりあえず必要なツールをインストールします。

“`sh
$ yarn add -D

webpackというものを触ってみる – とりあえず導入

# はじめに

仕事ではなかなか触れる事が無いので、プライベートでwebpackというものを触ってみます。
普段フロント側を実装するときは、昔ながらのゴリゴリにHTML,Js,CSSを記述しているので時代から完全に取り残されていて大変です。
たまにフロント側のFWやライブラリを使ってみようとおもったら、インストールの手順に `npm`が必ず出てきそこから良くわかっていないので、色々勉強です。

# 環境

– windows10 (wsl2)
– node(v16.18.0)
– yarn(1.22.19)

# webpackのインストール

“`sh
# プロジェクト作成
$ yarn init -y

# webpackインストール
$ $ yarn add -D webpack webpack-cli
“`

これだけでJsをまとめられるらしいです…？

# ひとまずJsを用意する

以下の3つJsファイルを用意します。

“`js:./src/js/sum.js
export function sum(num1 = 0, num2 = 0) {
consol

IoTプラットフォームの「obniz」が IoTブロックの「MESH」に対応したので軽く試してみる【MESH-100BU ボタンブロックでのお試し】

この記事の内容は、以下のプレスリリースにも出てきている、「obniz」の「MESH」対応に関するものです。

●IoTプラットフォーム「obniz」　IoTブロック「MESH(TM)」に対応を開始｜株式会社obnizのプレスリリース
　https://prtimes.jp/main/html/rd/p/000000054.000040376.html

それに関して、まずは以下のボタンブロックとの連携を軽く試してみた、という内容になります。

●MESH-100BU ボタン(Button)ブロック – シンプルなボタンに無限の可能性 ワイヤレスボタン | ソニー
　https://meshprj.com/jp/products/blocks/MESH-100BU.html

## できあがったもの
まず、お試しで作ったものを掲載します。

以下のツイートの動画に出てきている内容です。

#obniz で @MESHprj_jp のブロックを利用するプログラム、
まずは、「MESH のボタンブロックのボタン押下で、obniz のディスプレイに文字表示」というシンプルなものから試した！

「ボタンを 1回押す・2回押す・長押しする」のそれぞれで、表示する文字を少し変えてみてます。

開発は Node.js にて。 https://t.co/lcD0AJ9FgH pic.twitter.com/4NUS7PoJnd

— you (@youtoy) October 9, 2022

MESH側で、「ボタンの 1回押し」、「ボタンの 2回押し」、「ボタンの長押し」のそれぞれが

function 引数を Object とし各プロパティのデフォルト値を個別に宣言する

# 要件

* function の引数を Object 化
* 引数のデフォルト値を指定したい
* Objectの property を個別に default 化したい

# 結論

“`javascript:sample.js
// default 値 を纏めた Object
const DEFAULT_ARGS = {
name: “hoge”,
value: “fuga”,
flag: true,
}

// 引数の default 値を Object に指定
module.exports = ( args = DEFAULT_ARGS ) => {
// default <= args 方向に差分をコピーする args = { ...DEFAULT_ARGS, ...args, } return args } ``` # 使用例 ```javascript:expample.js const sample = require("./sample.js"); let args; // 引数なし args = sample()

二つの配列を比較し、重複しているものを省く

## やりたいこと
ターゲットとなる配列と比較用の配列があり、ターゲット配列と比較配列の重複する値をターゲット配列から削除して新しい配列を生成したい。

### 例
“`js
const targetArray=[1,2,3,4,5];
const compareArray=[3,4,5,6,7];

const result=[1,2]
“`

#### filterとincludesを使う
“`js
const targetArray=[1,2,3,4,5];
const compareArray=[3,4,5,6,7];

const result=targetArray.filter((item)=>{
return !compareArray.includes(item)
})

console.log(result)
“`

ただこれは以下だとうまく行かない
“`js
const targetArray=[{id:1,name:”taro”},{id:2,name:”jiro”},{id:3,name:”sabuto”}];
const compareArra

GitHubのissueのフロントエンド向けラベルを精査したので、OctokitでLabel登録を自動化した

# はじめに

最近レビュワーとして案件に入ることが多くなりました。

Slackで箇条書きにして送るなんてやりたくないので、使用するGit環境的に可能であればGitHubのissueで返すようにしています。
その際、「ラベルを貼ると分かりやすかったりする…？」と思いたち、弊社の作業の進め方にあったラベルを考えてみたので、まとめたいと思います。

また、そのラベルを毎回リポジトリごとにﾎﾟﾁﾎﾟﾁ登録するのはそれもまた面倒なので、登録を自動化したいマンの道筋を書き記します。

# フロントエンドで”使える”ラベルを考える

我々のよくある作業フローとしては、こんな感じです。

1. コーダーがコーディングする
1. レビューを頼む
1. レビュワーがレビューする
1. レビュワーがissueをたてる
1. コーダーが修正しレビュワーに戻す
1. レビュワーが再確認する
1. 良ければissue close ダメならコメントし5へ

外部のコントリビュータが入ってきたりというのはほとんどなく、このフローを加味して実際に使われる、使いやすいラベルを決めていきたいと思います。

## とりあ

Phoenix LiveView の JavaScript Hook

Phoenix LiveViewのJavaScript Hook の設定記事です。chartjsで簡単なチャートを描くプログラムですサーバ側で生成したデータをリアルタイムにクライアント側のチャートに反映させます。
[JavaScript interoperability](https://hexdocs.pm/phoenix_live_view/js-interop.html)

**【関連過去記事】**
[Phoenix LiveViewの基本設定 – Qiita](https://qiita.com/sand/items/5aea96852ceb2981021b)
[Phoenix1.6の基本的な仕組み – Qiita](https://qiita.com/sand/items/f42dc35c47589eab687e)

**実行環境**
Elixir 1.13.0
Phoenix 1.6.12

# １．LiveViewの基本設定

まずプロジェクトを作成します。
“`
mix phx.new liveview_chart –no-ecto –no-mailer –

JavaScriptとは？

JavaScript
JavaScriptはWebブラウザ上で動くプログラミング言語です。
文章構造→HTML、装飾→CSSとともに、Webページを構築する上でとても重要な要素がJavaScripです。

例えば一例として、次のようなことが実現できます。
・ページ遷移せずに、画面の一部だけを切り替える
・HTMLの要素をアニメーションさせる
・フォームを操作する
・日付や時間を扱う
・時間に応じて背景を変化させる
・ユーザーのアクションに伴って処理を行う

JavaScriptは[JS]と訳すことがある。

『ライブラリ・フレームワーク』
JavaScriptにはさまざまなライブラリやフレームワークが存在しています。
『ライブラリ』
・汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。「こういう動きをJavascriptで作りたい」という時に、一から全て自分で書くのではなく、完成されたプログラムを使い回すイメージ。

『フレームワーク』
・「枠組み」や「骨組み」。「JavaScriptの開発を楽にするために用意された枠組み」と言えるでしょう

代表的なライブラ

Node-RED MCU EditionでIoTしてみた。

# はじめに

Node-RED MCU Editionの環境構築、簡単なフロー、Lチカ、ネットワーク接続(HTTP, MQTT)まで終わったので、組み合わせと連動(IoT)を試してみます。

環境構築と動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

GPIOの動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/bac2b860b7d26fb450f4

ネットワーク接続(HTTP, MQTT)については以下を参照してください。

https://qiita.com/kitazaki/items/9b93992f6c342828e8f8

# 前提条件

– Intel MacBook Pro (2017)
– macOS Big Sur (バージョン 11.7)
– M5Stick-C
– LED(GPIO10)
– HTTPサーバ、ダッシュボード (Node-RED, Dashboard)
– MQTTサーバ (

JavaScript で文字列や Date を yyyymmdd のようなフォーマットに変換する

## 概要

Vanilla JS での日付の整形に関する記事

例えば、”1970-01-01 00:00:00″ みたいな文字列を YYYY-MM-DD のような書式に整形したり、 “1970-01-01” を “1970/01/01” みたいな形に調整したり
エンドポイントから取得したデータをそのまま表示みたいなので済めばいいけど、プレゼンテーション上の要件で上記のような調整が必要になることがある。

Rubyだと `’2022-10-12′.to_date` とか `Time.zone.today.strftime(‘%Y/%m/%d’)` みたいに簡潔に実現できるが、
JavaScriptの標準APIだとこれほどシンプルなものは備わっていない気がしたのでワンライナーでは済まない程度のコードを書いて対応した。

今時TypeScriptは使いたい（使えない環境もあって今回はそこで必要になったコード）し、実装も適当なのでちゃんと書き直す必要はあるけど、
JavaScript案件で今後再利用することはありそうなのでスニペットとしてここに残しておく

## 文字列を YYYY-MM-

javascriptのawaitにタイムアウトを設定したい

### 通常の `await`

“`typescript
// ただ１秒待つだけの関数
async function sleepOneSec() {
await new Promise((resolve) => setTimeout(resolve, 1000));
}

async function main() {
await sleepOneSec();
}

// 実行
main();
“`

—

### `await` with timeout

“`typescript
/**
* await にタイムアウトを設定する
*
* timeoutを超えて await で待機すると UnhandledPromiseRejection 例外が throw されます。
* @param {Promise} promise – 実行したい promise 関数
* @param {number} timeout – タイムアウト(ms)
* @returns Promise
*/
export function withTimeout(p

JavascriptをHTMLファイルに反映させる方法

# はじめに
学習中のJavascriptについて自分用の備忘録としても書いていきます。
間違っている所等、ご指摘あれば教えてください。
## script要素
Script要素とはHTMLであり、HTML内で実行できるコードを埋め込んだり、参照する事のできる要素です。
“`html

“`
以上のように記述します。
script要素はbody要素の一番最後に記述することが推奨されています。
理由は、HTMLはブラウザで上から読み込まれていくため、複雑なJavascriptがHTMLの上部に記述されていると、Webページが読み込まれるのが遅くなってしまうからです。（アプリケーションによってはhead要素内に記述することもある）
## イベント
JavascriptはHTMLで「何かが起きたら」コードが実行されます。
その「何かが起きたら」をイベントと呼びます。
具体的には、「クリックをする」や「カーソルが上にくる」などになります。
また、イベントを認識してJavascriptのコードが実行されることを「イベントが

VSCode の Code Runner で Jest のテストを実行する

調べると [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) というそのものズバリな拡張が存在するが、
[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) ユーザーであれば ↑ を入れる必要はなく、下記の設定を書くだけで良い。

“`json:settings.json
“code-runner.executorMapByGlob”: {
“*.test.ts” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.spec.ts” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.test.js” : “cd $workspaceRoot; npx jest $dir$fileName”,
“*.spec.js” : “cd

画面文字コードがShift_JIS の場合、FormData を使ったファイルアップロードでファイル名が文字化けする

ので、FormData の第3引数に encodeURIComponent したファイル名を設定、

“`html:test.html

“`

受け側で urldecode して対応。

“`php:upload.php

Google Apps ScriptでFolder内のファイルを再起的に扱える関数を作成した

### 元の関数

“`js:recursive.gs
// rootFolder: Folderクラス
// type: both, onlyFolder, onlyFile
// func: function(object: Folder or File, type: “Folder” or “File”)
function recursive(rootFolder, type, func) {
const files = rootFolder.getFiles()
const folders = rootFolder.getFolders()

if(type==”both” || type==”onlyFile”){
while(files.hasNext()){
func(files.next(), “File”)
}
}

while(folders.hasNext()){
const folder = folders.next()
if(type==”both” || type==”onlyFolder”)

Reactの基礎４

https://qiita.com/hiro949/items/855e64ba7934d1774d91

https://qiita.com/hiro949/items/633a9086abfb1be274fe

https://qiita.com/hiro949/items/9fde00a08441c149f8fe

の続きです。

# ボタン操作

以下のようにしてボタンをクリックして関数を起動させることができます。次のコードではボタンを押すと関数handleClickが実行されて、コンソールに”I was clicked!”と表示されます。

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

function App() {
function handleClick() {
console.log(“I was clicked!”)
}

return (

模写学習 殴り書き日誌③（Codestep/英会話スクール）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

# 【HTML/CSS コーディング練習】中級編：ランディングページ／CSSアニメーション

※元サイトは[こちら](https://code-step.com/lp-menu/)

## 学び①：スライドショー

**＜完成見本＞**
スライドショーで画像が切り替わる。

**＜実装方法＞**
まずは仕組みから整理しておきます。

・スライドショー用の画像３枚を重ねて配置
・画像３枚を透明（非表示）にしておく
・以下を実行するアニメーションを組む
　(1)１枚目の画像の表示
　(2)１枚目の画像を非表示にし、２枚目を表示
　(3)２枚目の