f@ctor

JavaScript関連のことを調べてみた2022年12月13日

JavaScript関連のことを調べてみた2022年12月13日
目次

ESLintについて調べた内容

# ESLintとは何か
一言で言えば、EcmaScriptの財団で明示した仕様に反していないかをチェックしてくれるツールのこと。
ESLintは、コードのスタイルや規則に反するところを知らせてバグを産まないようにすることができる。
なお、コードのスタイルや規則は個人によって、または会社によって異なるケースもあるため、`.eslint`ファイルをもってカスタムすることも可能。

# 設定方法
やり方としては`package.json`に直接eslintの設定をする方法あり、`.eslint`ファイルに別途設定する方法がある。
もし、`.eslint`と`package.json`が両方存在する場合、`.eslint`が適用される。（内部的には`.eslint`が`package.json`にオーバーライディングされるらしい）

# `.eslint`の配置場所
監視したいファイルのルートディレクトリに保存すればOK。
“`
your-project
├── .eslint
├── lib
└── source.js
“`
上記のように`.eslint`ファイルを置くことで、`sou

元記事を表示

svelte-stripeを利用してSvelteにStripeの決済フォームを実装する

この記事は、[Svelte Advent Calendar 2022](https://qiita.com/advent-calendar/2022/svelte) 13日目の記事です。

Svelteは、WebアプリケーションやGUIを構築するためのUIライブラリの１つです。

https://svelte.jp/

Reactなどと異なり、仮想DOMを利用せず、軽量かつシンプルに実装できることを謳っています。

Svelteでアプリケーションを開発する場合、`svelte-stripe`ライブラリを利用することで、Stripeでのオンライン決済機能の組み込みが簡単に行えます。

https://www.sveltestripe.com/

## Viteでプロジェクトをセットアップする

早速Svelteアプリを作成しましょう。

今回はViteを利用します。

“`bash
$ yarn create vite svelte-app –template svelte-ts

..

Scaffolding project in /Users/sandbox/svelte-a

元記事を表示

jquery・Laravelでの簡易的なバリデーション実装

# 背景
モーダルに検索フォームが設置されている。
モーダル内部にLaravelのformクラスを利用しようとすると、
検索ボタンを押す→モーダルを開く→バリデーション　と時間がかる。
そのため、LaravelのFormクラスは利用せずjqueryで実装しようと考えた。

# 結論
Laravelのフォームクラスは優秀。
いろんなことを考慮して作られているため、
自分で同じようなことをしようとするとテストも含めて工数がかなりかかる。

# 実装の概略
入力時にフリーワード→セレクトボックスへ変更。
最小値・最大値が逆に入力されていないか判断するバリデーションのみを実装した。
セレクトボックスは変更後の値が不正な値である場合に、アラートを出すようにした。

# 実装
入力時の値を保持→変更時の値を保持
“`Laravel:.js
$(‘#form’).on(‘focus’,function(){
focusval=this.value;
}).change(function(){
selectedval = this.value;
//focusvalとsele

元記事を表示

×ボタンでしか閉じれないモーダルはウザいなぁ～　← Alpine.jsなら10秒で解決ってマ？

# ×ボタンでしか閉じれないモーダルはウザい

See the Pen
Untitled by gorimatyan (@gorimatyan)
on CodePen

元記事を表示

Reactでトースト機能を実装してみる

# はじめに

Reactを勉強したアウトプットとして簡単なWebアプリを開発しました。
その際に、ユーザへのメッセージ表示としてトーストを表示させるコンポーネントを作成してみました。
コンポーネントとして完璧とは言えませんが、なにか参考になればと思い実装方法を記載します。
(Windows10 * Chrome でのみ動作確認をしているため、他の環境では正常に動くか不明です）

# トーストとは

次のサイトにおいてトーストは、「操作に関する簡単なフィードバックを小さなポップアップに表示します。トーストでは、メッセージの表示に必要なスペースのみを使用します。現在のアクティビティは表示されたままになり、引き続き操作できます。トーストはタイムアウト後に自動的に消えます。」と記載されています。[1]

https://developer.android.com/guide/topics/ui/notifiers/toasts?hl=ja

つまり、スマートフォンなどでなにか操作をしたときに、
下からひょっこり出てきてフェイドアウトしていくあれのことです。

# 実装したトーストの挙動

実

元記事を表示

『Chair Person』上着を掛けた椅子をおしゃれに with obniz

この記事は [obniz Advent Calendar](https://qiita.com/advent-calendar/2022/obniz) 13日目の記事です。

非常にありがたいことに[ヒーローズリーグ](https://heroes-league.net/)の決勝に残りobniz賞を頂けました。審査員のお四方にもアプリケーション例としての発展性をコメント頂き嬉しいです。ありがとうございます！

## Chair Personとは

上着を掛けると背もたれにネクタイが現れさりげなくおしゃれ演出をする椅子のプロトタイプを作りました。
つい椅子の背もたれに上着を掛けてしまう人間の無意識の行動に着目しています。
椅子が上着掛けになるアフォーダンスを持っていることを利用したインタラクションデザイン作品です。