- 1. Figma Pluginの開発でi18n(国際化)する方法
- 2. 【JavaScript】Event.stopPropagation()・Event.preventDefault()
- 3. ESLintでimportの整列・追加・削除を自動化する
- 4. Recoilを基礎から理解しよう！(Selector編)
- 5. Recoil入門（Atom, useRecoilStateの使い方）
- 6. 【Nuxt.js・Firebase】書籍紹介診断アプリをつくりました！
- 7. WebComponents(Custom Elements / ShadowDOM / ESModules)を使用してExcelライクなライブラリを作ってみた
- 8. uWebSockets.js を使った Webサーバー・WebSocketサーバーのお試し【Node.js】
- 9. さぁ君もKotlin/JSを始めよう【Kotlin/JS】
- 10. はじめてNuxt.js「プロジェクト立ち上げから、テンプレートに変数表示、ページ遷移するまで
- 11. 【React】本番環境にデプロイして画面が真っ白になった時の解決方法
- 12. javascriptで文字列を掛け算する方法
- 13. JavaScriptで記事日付を年度別でソートして表示する
- 14. リファクタ目的のVue + Storybook で Injectが便利
- 15. Rails6でJavaScriptの動的読み込み
- 16. Railsでphina.jsの動的読み込み
- 17. Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる
- 18. HTMLのファイルに関するAPIの最新の事情
- 19. Socket.IO の最新版 4.x の情報を見てみる（2022年3月）
- 20. Google Formsの回答をFetch APIでPOSTする
Figma Pluginの開発でi18n(国際化)する方法
先日、また新しく[Figmaプラグイン](https://www.figma.com/community/plugin/1080046874598231357/Status-Changer)をリリースしたんですが、これを開発した際に各エリア別の情報を出さなければならないことがあり、少しだけトンチを使ったので備忘録として残しておきます。
（尚、メニューからの呼び出しとかは多言語化できませんでの悪しからず、また記事中にJSと出てるのはTSに置き換えても問題ないのですが便宜上JSと記述しています。）## どうしてプラグインごとき？でも多言語化しなければならないか？
今回どうして多言語化しなければならないか？と言ったら**時刻**を扱うからです。
そうじゃなくても通貨とかインチ、cm、フィート、kg、ポンド、華氏、摂氏とか結構面倒です。日本人でも多いと思いますが、もし**私がアメリカ人だった時に表記が**「**2022/01/02 23:00**」**とかだったら**「**読みづらいなぁ**」**と感じる**と思います。
UI/UXを作る？ツールなのにそのプラグインのU
【JavaScript】Event.stopPropagation()・Event.preventDefault()
## Event.stopPropagation()
キャプチャリング・バブリングの過程において、イベントの伝播を停止する。
ただし、リンクの参照先への移動やチェックボックスのチェックなど、ブラウザデフォルトのイベントは停止できない。### キャプチャリング
下記イベント処理のフェーズのうち、イベントがターゲット要素まで下りるフェーズ。1. キャプチャリングフェーズ
同上1. ターゲットフェーズ
イベントがターゲット要素に到達したフェーズ1. バブリングフェーズ
ターゲット要素から祖先要素までバブリングしていくフェーズ### バブリング
要素上でイベントが発生した場合、イベントが発生した要素の祖先要素までイベントハンドラが実行されること。## Event.preventDefault()
ブラウザがデフォルトで定義しているイベントを無効にする。## サンプル
### 通常
チェックボックスをクリックすると、メッセージ表示とチェックボックスにチェックがつくイベントが実行される
ESLintでimportの整列・追加・削除を自動化する
## 概要
ESLintのプラグインとVS Codeの設定でimportの追加・削除・整列を自動化して幸せになれる記事です。
**こんな人におすすめ**
– チーム間でimportの順番などのルールが決まっておらず。人によってフォーマットがバラバラなのが実は気になっている。
– 未使用のimportを消すのを忘れがち。
– コンポーネントやライブラリの関数を書いたら勝手にimportしてくれたら嬉しい。
– import周りを触るのがシンプルにめんどい。## 使用するプラグインと設定
– `source.addMissingImports`
– importの自動追加に使用する
– VS Codeで設定する
– `eslint-plugin-import`
– importの整列に使用するプラグイン
– `eslint-plugin-unused-imports`
– 未使用のimportを削除に使用するプラグインESLintのプラグインはnpmからインストールしておきましょう。
## source.addMissingImportsの設定
Recoilを基礎から理解しよう！(Selector編)
この記事は
– Reactで状態管理ツールを使ってみたい。
– でも学習コストが高くて難しそう。そのように感じている人向けに、Recoilの使い方をまとめたものになっています。
– [Recoilを基礎から理解しよう！(環境構築・Atom編)](https://qiita.com/takusan64/items/bdb61b46d46395e913df)
– [Recoilを基礎から理解しよう！(Selector編)]() :point_left_tone2: now# 注意書き
本記事は「[Recoilを基礎から理解しよう！(環境構築・Atom編)](https://qiita.com/takusan64/items/bdb61b46d46395e913df)」で環境構築を行った、`Next.js`で動作確認を行います。
よろしければ前回の記事を参考に環境構築を行ってください！# Selectorって何？
`Selector`は前回説明した`Atom`や、他の `Selector`を参照し、新しい値を作成する機能になります。
また作成したSelectorは参照元の値を
Recoil入門（Atom, useRecoilStateの使い方）
## Recoilとは
Recoilは2020年5月にFacebookによってリリースされたReactの状態管理ライブラリです。React Hooksの`useState()`はコンポーネント内でのstate（状態）を管理するのに対し、Recoilはアプリケーション全体でのstateを管理します。
(Reduxとの違いは[こちら](https://ics.media/entry/210224/)の記事に詳しく記載されてました。)## Recoilのインストール
Recoilをインストールするには次のコマンドを実行します。
“`Bash
$ npm install recoil
“`
または
“`Bash
$ yarn add recoil
“`## RecoilRoot
Recoilを使用するためにはコンポーネントを`RecoilRoot`で囲む必要があります。
ルートコンポーネントであるApp.jsxに配置するのが最適。
ルートコンポーネントに配置することで全ての子孫コンポーネントでRecoilが利用できます。“`jsx:src/App.jsx
import
【Nuxt.js・Firebase】書籍紹介診断アプリをつくりました！
# はじめに
こんにちは。
こちらの記事では、Nuxt.jsとFirebaseを用いて開発したポートフォリオについて記しています。
機能の追加・修正は随時対応中（2022年3月12日現在）# アプリの概要
読書を通して新しい自分と出逢うきっかけを作る「書籍紹介診断アプリ」です。## 想定ユーザー
・自分を変えたいけど何すればいいかわからない方
・やりたいことはあるがなかなか１歩踏み出せない方
・読書したいけど、どんな本を読んでいいかなかなか決められない方## ポートフォリオの制作背景
何かに挑戦するにあたって、正しい「マインドセット」や「習慣」を身につけることは必要不可欠と感じます。これらを学ぶのに適したツールは「読書」だと考えて。過去の私のように正しい「マインドセット」や「習慣」を
WebComponents(Custom Elements / ShadowDOM / ESModules)を使用してExcelライクなライブラリを作ってみた
# はじめに
近年、素のJavaScript(Vanilla JS)の進化は著しく、数々の便利な機能がリリースされています。しかしながら、ネット上の活用事例が未だ充実しておらず大体の人は諦めてフレームワーク(Vue,Angular,React等)を利用してロックインされているのが現状です。そこで本記事では、実際にWebComponentsを利用して作成をした、Excelライクな表作成ライブラリを用いてWebComponentsの機能を紹介します。(実際に作成したライブラリはGITに公開しています)
WebComponentsのメリットは一言でいうとカプセル化です。WebComponentsの主な機能は以下の通り3つあり（本当は4つですが4つ目は推奨されていないので省略）、WebComponentsの価値はそれらの機能を全て特定のフレームワークに依存せず実現できることにあります。
– WebComponentsの3機能
1. CustomElements：タグに紐づいた、そのタグの振る舞いのカプセル化
2. ShadowDOM : DOMの隠蔽化やCSSの分
uWebSockets.js を使った Webサーバー・WebSocketサーバーのお試し【Node.js】
以下の記事を書いた時に見かけた「uWebSockets」が気になって、情報を少し見てみたり、試してみたというものです。
●Socket.IO の最新版 4.x の情報を見てみる（2022年3月） – Qiita
https://qiita.com/youtoy/items/c57158f4a08e478dff57### Socket.IO のドキュメント内での記載
Socket.IO のドキュメント内だと、具体的に以下の部分などで登場しています。
## uWebSockets.js を試す
まず、uWebS
さぁ君もKotlin/JSを始めよう【Kotlin/JS】
こんにちは。
先日Kotlin/JS を使って遊んでみたらすごくおもしろかったので布教したいと思います。
先人が残してくれた記事なども古くなっているため、今から始める人の手助けになるような記事を目指して書きます。
また、今回使用したプロジェクトはGitHub にて公開しています。
https://github.com/rokuosan/Sample-Kotlin-JS
# Kotlin/JS ってなに？
公式ドキュメントによるとKotlin/JSは以下のように説明されています。
> Kotlin/JS provides the ability to transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies to JavaScript.
> Kotlin/JSは、Kotlinのコード、Kotlinの標準ライブラリ、および互換性のある依存関係をJavaScriptにトランスパイルする機能を提供します。(DeepL翻訳)
つまり、KotlinをJavaS
はじめてNuxt.js「プロジェクト立ち上げから、テンプレートに変数表示、ページ遷移するまで
学んだことを忘れないために、一度アウトプットしまする。
# 環境
### 実施時の環境
現時点のcreate-nuxt-appの最新版は（v4.0.0）です。
今回実施した環境についてですが、Windows10にWSL2のせて、そこにubunt走らせてます。
なので若干PowerShellやコマンドプロンプトの方とは微妙に違うかもです。
“`
$ npm -v
8.4.0
$ cat /etc/os-release
NAME=”Ubuntu”
VERSION=”20.04.2 LTS (Focal Fossa)”
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME=”Ubuntu 20.04.2 LTS”
VERSION_ID=”20.04 ”
“`
# 前準備
node.jsをインスールします。
https://nodejs.org/ja/# プロジェクト生成
### create-nuxt-app
“`
$ npx create-nuxt-app helloNuxtjs
“`
helloNuxtjsプロジェクトを生成### プロジェクト名
【React】本番環境にデプロイして画面が真っ白になった時の解決方法
初めまして！
外語大生フロントエンドエンジニアのジャックです。
今まで記事を閲覧することしかしていませんでしたが、この度、Qiitaを初投稿することにしました！初投稿ですのでお見苦しい文章かもしれませんが、暖かく見ていただけると嬉しいです。
よろしくお願いします:bow_tone2:# 前書き
ReactでSPAを初めて作り、デプロイした時に画面が真っ白になって数時間ハマってしまいました。
これから書く解決方法は中々見つけることができなかったのでReact初心者の人が同じ現象に遭遇した時に参考にしていただけると幸いです。# 現象
npm startでローカル環境では正常に描画されてるけど、npm run buildして本番環境にアップすると画面が真っ白になってしまう。
# 解決方法その1
`package.json`を開き、`”homepage”: “./”,`を追加するだけ。
“`json
{
“name”: “helpmeeeal”,
“version”: “0.1.0”,
“private”: true,
“homepage”: “./”
javascriptで文字列を掛け算する方法
## 概要
`Javascript`で同じ文字列を掛け算して羅列する際に、`Ruby`とは記載方法が異なったためメモとして残しておきます。## 記載方法
### Rubyの場合“`ruby
puts ‘a’ * 3
#=> aaa
“`
`Ruby`の場合は単純に文字列に数字を掛ければ求められる。### Javascriptの場合
“`javascript
console.log(‘a’.repeat(3))
//=> aaa
“`
`Javascript`の場合は`Ruby`のように単純な計算式ではなく、`repeat`メソッドを使います。
JavaScriptで記事日付を年度別でソートして表示する
誰かが実装してそうなものですが、意外と調べても見つからなかったので。
# デモ
See the Pen
Order By Financial Year by qwe001 (@qwe001)
on リファクタ目的のVue + Storybook で Injectが便利前回 Vue + Storybook + reg-suit で VisualRegressionTestのフレームワークを構築しました。
https://qiita.com/kozayupapa/items/0099cea005b3ce0b6274そのstoryを拡充していきたいと思います。
## 何がしたい？
前提としては、今回StorybookのStoryを追加したいのは、 リファクタリングが必要なくらいvueのcomponent,ページが巨大になってしまっているケースです。すべての変数がpage のdataとして定義されているような例です。prop になっていれば、storyからのテストデータ設定も楽なのですが、
dataのなかみをtest story側から好きな値に書き換える方法がないかを検討していました。## Vue Provide/Injectとは？
地道にvueのドキュメントを読み進んでいたら、良さそうなものがありました。
離れた階層からでも提供でき、 どこから挿入されたかは指揮せずに Inject されたあとのコードを受け側に追加すれば良い。ほしかったのは
Rails6でJavaScriptの動的読み込み
## 実現したいこと
JavaScript内からDB内のデータを動的に読み込みたい✅## 開発環境
Rails６系
Ruby３系アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)## 結論
view内の“`scriptタグ“`に“`erbタグ“`を用いて動的に読み込ませたいJSを記載します！たしかにRails６系のJavaScriptの記述は“`app/javascript/packs“`以下にするのが通常です。
しかし上記pack
Railsでphina.jsの動的読み込み
## 実現したいこと
バックエンド（Rails)から保存したDB内のデータを呼び出して、動的にフロント（phina.js）に入れて、ゲームをプレイできるようにする✅[phina.jsとは](https://phinajs.com/)：ゲームを簡単に作ることのできるJavaScriptのライブラリ
## 開発環境
Rails６系
Ruby３系
phina.js 0.2.3（CDN）
アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)## 1. viewでphina.jsの環境構築
ゲームプレイ画面を作成するvi
Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる
以下の記事を書いた時などに見かけた「[Fastify](https://github.com/fastify/fastify)」が気になって、情報を少し見てみたり、試してみたというものです。
Fastify だけでなく、関連して出てきた fastify-websocket も気になったので、合わせて見てみました。●Socket.IO の最新版 4.x の情報を見てみる（2022年3月） – Qiita
https://qiita.com/youtoy/items/c57158f4a08e478dff57公式の GitHubリポジトリは、以下になるようです。
– [fastify/fastify: Fast and low overhead web framework, for Node.js](https://github.com/fastify/fastify)
– [fastify/fastify-websocket: basic websocket support for fastify](https://github.com/fastify/fastify-webs
HTMLのファイルに関するAPIの最新の事情
# はじめに
いくつかのウェブアプリを現在制作中である。いずれもファイルを扱うものなので、ファイルに関するAPIが必須である。
自分のこれまでの知識としては、HTML5と言われてた頃のFile APIやA要素による擬似的な保存テクニックくらいしか知らなかった。
ふとGoogle のブログを眺めていたら、**FileSystemAccess API** なる、気になるAPIがすでに実装されているとのことで調べてみた。本記事はその忘備録としてまとめたものである。## 参考
[The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
[MDN – File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
[MDN – window.showOpenFilePicker](https://developer
Socket.IO の最新版 4.x の情報を見てみる（2022年3月）
2013年か2014年くらいに初めてさわった気がする「[Socket.IO](https://socket.io/)」。
最近は、リアルタイム通信系は WebSocket を直接扱ったり、MQTT を使ったりという感じで、Socket.IO を使わなくなっていました。そして、いつのまにかメジャーバージョンアップが複数回行われて、現在は 4.x になっている状況。
●Socket.IO
https://socket.io/それで、久しぶりに最新版の Socket.IO を軽く使ってみようと思って、この記事の内容をやってみました。
## 公式の最新情報を見てみる
Socket.IO は、リアルタイム通信をするための仕組みを提供しており、サーバ側とクライアント側のそれぞれの仕組みを提供しています。### 対応言語（サーバ側とクライアント側）
[Socket.IO公式の「Introduction」のページ（v4 のもの）](https://socket.io/docs/v4/)で、サーバ・クライアント用として提供されている仕組みの最新の状況を確認してみます。
にもっと詳しく説明している方がいたので、合わせてご参考になさってください。—
Google Formsの作成方法を一通り知っている前提で話しています。
