████に入社して1年が経ちました - uhyo/blog
およそ2年前、新卒としての就活が終了したことを報告する記事をはてなブログに書きました（████に入社します）。ちゃんと2019年4月から████に入社して今まで働いていたのですが、そういえば入社したタイミングでは特に記事を出したりしていませんでしたね。2019年4月の入社から1年と少しが経ちましたので、このタイミングでここまでの道のりを少し振り返ってみることにしました。 今何をしているのか新卒として████に入社して、██日程度の研修ののちに████████████に配属されました。そのチームでおよそ1年ほど██████のフロントエンド開発に携わっています。██████は████の中でも比較的███な████を取っており、いくつかの████████が████████████████████████。その中でも自分は████████という████において██████にあり、新卒███████
TypeScript 4.0で導入されるVariadic Tuple Typesをさっそく使いこなす - Qiita
今日、Anders HejlsbergさんによってTypeScript 4.0に導入予定の新機能のプルリクエストが出されました。この記事では、この新機能Variadic Tuple Typesを解説します。 ちなみに、現在（この記事の執筆時）のTypeScriptのバージョンは3.9であり、4.0はその次のバージョンです。一見メジャーバージョンアップに見えますが、TypeScriptはsemantic versioningを採用していないため、3.9 → 4.0は特別なリリースというわけではなく、3.8 → 3.9とかと規模は同程度です。 Variadic Tuple Typesの基本 さて、Variadic Tuple Typesは、一言でいえばタプル型の中に...Tと書ける機能です。この構文はよく知られたスプレッド構文のいわば型バージョンであり、あるタプル型の要素たちを別のタプル型に埋
import文で画像やCSSを読み込むのはECMAScript仕様違反か - uhyo/blog
近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルをimport文やexport文を通じて連携させるのが基本です。また、それらのファイルはWebpackに代表されるバンドラによって事前に処理され、import文の解決・ファイルの結合といった前処理を施されるのが普通です。まったく、各ファイルが他に影響を与えないように(function(){ ... })()で囲んで文字列連結していた時代が懐かしいですね。 さて、import文の解決を担当するバンドラは、大抵JavaScriptプログラム以外のものを読み込む機能を備えています。Webpackならばloaderと呼ばれるものですね。例えば、style-loaderやcss-loaderが持つCSS Modulesの機能を使うと次のようなプログラムを書くことができます（Reactの例）。 import s
JavaScriptのthisは結局何種類あるのか - uhyo/blog
JavaScriptのややこしい機能としてよく槍玉に挙げられるのがthisです。その特徴のひとつは状況によって意味（thisの値）が違うことであり、これを指して「JavaScriptのthisは4種類」とする説も見られます。 そこで、この記事ではthisが何種類あるのか、ECMAScript仕様書を頼りに調べます。ECMAScript仕様書とはJavaScriptという言語を定義する文書であり、JavaScriptのthisがどのような挙動をするのかも当然定義されています。今回は仕様書の2020年5月26日版ドラフトを参照します。 https://tc39.es/ecma262/結論としては、最も大ざっぱに分けると3種類、最も細かく分けると157種類です。この記事では全種類漏れなくサンプルコード付きで説明します（似たようなやつはまとめて説明します。また、一部観測不能なものがあります）。 ス
JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について - Qiita
タイトルにあるように、文字列が半角英小文字・大文字と半角数字を全て含むかどうかを判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。 さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。 愚直に正規表現を使う方法 正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は/[a-z]/という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。 const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-
useEffectのdeps比較関数をカスタムしたくなったときにやること - uhyo/blog
Reactにおいて、useEffectなどいくつかのフックは第2引数として依存リストを取ります。 例えばuseEffectの場合、レンダリングの度に依存リストのいずれかの値が前回から変化したかどうかがチェックされ、変化していた場合はレンダリング後にコールバック関数が呼び出されます。 具体例としては、次のコンポーネントはcounterが変化するたびにconsole.logでそれを表示するでしょう。 const Conter = () => { const [counter, setCounter] = useState(0); useEffect(()=> { console.log(counter); }, [counter]); // ... }この場合、このuseEffectの依存リストはcounter一つということになります。 最初counterが0だった場合、次の再レンダリング時に
なぜJavaScriptのDateコンストラクタは例外を投げないのか - Qiita
Q. なぜJavaScriptのDateコンストラクタは例外を投げないのか？ A. NaNがあるから DateはJavaScriptで日時を扱うためのAPIで、JavaScriptの当初から存在します。 Dateオブジェクトは主にDateコンストラクタを用いて作られます。Dateコンストラクタにはいろいろな機能があり、new Date()のように引数なしで呼び出すと現在時刻を取得できるほか、new Date("2020-04-24T00:00+09:00")のように文字列から日時に変換したり、new Date(1587654000000)のように数値（UNIX時間）を日時に変換したりすることができます。 一般に、データの変換作業には失敗が付き物です。しかし、new Dateは決して失敗しません1。例えば、new Date("foobar")のように明らかに日時を表していない文字列からDat
JavaScript: Default Exportは、値を「default」という名前でNamed Exportしている - Qiita
JavaScript: Default Exportは、値を「default」という名前でNamed ExportしているJavaScript JavaScriptのdefault exportは、「default」という名前でnamed exportをしているということになります。 いや ES Modulesにおいてdefault exportは「defaultという名前でnamed exportする」こととして定義されている（ぇ — 🈚️うひょ🤪✒📘 (@uhyo_) April 16, 2020 この投稿では、具体的なコードを示しながら、default exportにちゃんと「default」という名前がついているのを確認していきたいと思います。 named export と default export まず、おさらいとして、named exportとdefault expo
Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか - Qiita
Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するかJavaScriptTypeScriptReact この記事は「Concurrent Mode時代のReact設計論」シリーズの3番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジション
Concurrent Mode時代のReact設計論 (2) useTransitionを活用する - Qiita
この記事は「Concurrent Mode時代のReact設計論」シリーズの2番目の記事です。 シリーズ一覧 Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 Concurrent Mode時代のReact設計論 (2) useTransitionを活用する Concurrent Mode時代のReact設計論 (3) SuspenseやuseTransitionが何を解決するか Concurrent Mode時代のReact設計論 (4) コンポーネント設計にサスペンドを組み込む Concurrent Mode時代のReact設計論 (5) トランジションを軸に設計する Concurrent Mode時代のReact設計論 (6) Concurrent Modeと副作用 Concurrent Mode時代のReact設計論 (
Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 - Qiita
Concurrent Modeは、現在（2020年3月）実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン（17.x）で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入（実験的機能） Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記事から始まる「Concurrent Mode時代のReact設計論」シリーズでは、ここから得た知見を共有しつつ、Concurrent Mode時代に適応したReactアプリケーションの設計を提案します。 なお、Concurrent Modeはまだ正式リリース
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
ワイ「スリープソート？ 寝ている間に小人さんがソートしてくれるんでっか？」 - Qiita
社長「やめ太郎くん」 ワイ「なんでっか社長」 社長「画期的なソートアルゴリズムをJavaScriptで書いたから見てくれや」 ワイ「ソートアルゴリズムちゅうのは配列を数字が小さい順に並べ替えてくれるやつでんな」 ワイ「（どうせバブルソートとかやろ）」 社長「これや」 function sleep(duration) { return new Promise(resolve => setTimeout(resolve, duration)); } function sleepSort(arr) { const result = []; return Promise.all( arr.map(elm => sleep(elm * 100).then(() => result.push(elm))) ).then(() => result); } sleepSort([1, 3, 6, 2, 1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Type Puzzles
🈚️うひょ🤪✒📘 TypeScript本発売🫐 on Twitter: "「配列のmapメソッドとか難しいから使わないでください！😡」という主張は今どき通らないから 「mapped typesとか難しいから使わないでください！😡」も同様に通じない感じがいい（ぇ 「条件演算子とか難しいからｒｙ😡」も「co… https://t.co/Rf2wGW8AiV"
uhyohyo.net