はてなブックマーク

import clsx from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' // Objects clsx({ foo:true, bar:false, baz:isTrue() }); //=> 'foo baz' // Objects (variadic) clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' }); //=> 'foo --foobar' // Arrays clsx(['foo', 0, false, 'bar']); //=> 'foo bar' // Arrays (variadic) clsx(['foo'], ['', 0, false, 'bar'], [['baz

はじめに アドベントカレンダーに参加した途端に仕事が忙しくなったため、死にそうになりながらこの記事を書いています。 早速ですがタイトルの通り「デコレータ」について少しまとめてみましょう。 書くこと デコレータの基礎 reflect-metadata 実践 デコレータの基礎 公式 とりあえず何事も本家のドキュメントを見てみるのが一番 公式 公式の日本語訳 デコレータはJavaScriptのStage-2状態の機能であり、 今後仕様変更が入る可能性があります。 ドラフト状態の仕様についての詳しい内容は こことかここ！ ↑の日本語訳サイトを読めば大体わかりますし こういった素晴らしい記事もあるので 本記事では簡単なおさらい程度にします。 デコレータとは デコレータとはクラスの宣言などにアタッチできる特別な宣言です。 クラス宣言 メソッド アクセサ(get, set) プロパティ メソッド引数 ↑

はじめに みなさんマインスイーパーをご存知ですか？ そうです！昔のWindowsに入っていたゲームです！ プログラミングの勉強の一環として作ったりすることも多い題材だと思いますが 今回はSass（SCSS）のみで作ってみたいと思います。（JavaScriptは一切書きません） ※ これはマインスイーパーの記事になるので、Sass(SCSS)の解説は控えめになっております 成果物 まず動くものはこちらです ソース →　GitHub 本当はCodePenに投稿しようと思ったのですが ソースコードの質が悪いようで動かなかったので諦めました あと、後述しますがビルド時のSCSSからCSSへ変換するタイミングで地雷の位置が決まるので 上記のリンクは地雷の位置が変わることはありません... 利用技術 以下のものを使っています yarn SCSS Pug node-sass プロジェクトにはstylel

はじめに みなさんHTMLタグの一つであるinputタグはご存知だと思います。 その中でもtype="file"についてぼくはこんな疑問を持ちました。 選択したファイルはどこのファイル？コピーとかされているの？ これみなさん知っていますか？ ちょこっと調べたんですがなかなか情報がなかったので いろいろ自分で調査してみました。 （本音は調査が面白そうだったのでそんなに本気で調べてないだけです 仮説を立てる まずは仮説をいくつか立ててそれぞれを検証していきます A. ブラウザはファイル参照だけ持っている B. ファイル選択時にTemp領域へコピーしている C. メモリ上に抱えている たぶんこれらのどれかじゃないかなと思っており、 個人的にはBが濃厚だと勝手に考えています。 調査開始 ファイルアップロード機能が必要なので 簡単にファイルをアップロードするだけのアプリを自前で作りました。 http

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに こんにちは。 みなさんVue&Vuex&TypeScript やってますか？ Vueクラススタイルコンポーネント向けのライブラリのなかで vuex-classというライブラリがすごく気に入ったのですが型安全ではありません。 ↑ リポジトリを見るとIssueは立ってるようです そこで今回、車輪の再発明を承知でライブラリを作りました！ vuex-class的な使い心地で型安全なものを目指します コード まずは作ったものはこちら vuex-map-decorators 基本的にデコレータを実装しているので、 実装内容より先に使い方を説明します。 使い方 シンプルな使い方 import { State, Mutation } from 'vuex-map-decorators'; interface SampleState { count: number; } interface Hog

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

const INCREMENT = 'app/example/INCREMENT' as const; const SET_COUNT = 'app/example/SET_COUNT' as const; export const increment = () => ({ type: INCREMENT, }); export const setCount = (num: number) => ({ type: SET_COUNT, payload: { count: num, }, }); type Actions = ( | ReturnType<typeof increment> | ReturnType<typeof setCount> ); interface AppState {} // 本記事の趣旨に関係ないため割愛 const initialState: AppState

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

うちの会社では導入されなかったプレミアムフライデーを求める関数を作ってみました。 コード 対象の翌月から1日引いて対象月の最終日を取得。 最終日が何曜日なのかを判定し、金曜日になるように日数を減算して完了 ※ 86400000 = 1000*60*60*24 function premium(year, month) { const d = new Date(new Date(year, month, 1) - 86400000); const w = d.getDay(); const n = 5 <= w ? w-5 : w+2; return new Date(d - n * 86400000); }