Object.keys() が返す配列の順序における数値キーの昇順には上限がある - カミナシ エンジニアブログ
はじめに こんにちは。昨年の10月にカミナシに入社したソフトウェアエンジニアの tokuse です。 気が付けば入社してから既に半年以上経っており、光陰矢の如しで驚愕しています！ カミナシではフロントエンドを TypeScript で開発しています。そんな中、先日 Object.keys() の仕様に起因する不具合が発生し、その際に Object.keys() が返す配列の順序に関する仕様について詳しく知りました。当稿ではその仕様について説明します（ECMAScript 最新前提です）。 はじめに 問題となった処理 Object.keys() の仕様 まとめ 余談 おわりに 問題となった処理 まず、問題となった処理をサンプルコードで紹介します。次のコードは、オブジェクトの数値キーのうち最大値を取得しようとした処理です。 type UserId = number; type User = {
ライブラリにTypeScriptコードを同梱するときはディレクトリを分けよう - Qiita
ライブラリがこんな構成になっていませんか？ TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか？フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話
この記事について Zenn では長らく通信処理に Axios を使っていました。 しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。 この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は！！！ って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しようと思います。 まず一番良くなったところといえば、ずばりサイト全体のビルドサイズが 10 KB も減りました。( ちなみに、10 KB は圧縮時のサイズで、圧縮しない場合 100 KB になります 😇 ﾜｰｵ ) グローバルのビルドサイズが 103.35KB gzip 時
今あえてTypeScriptのビルド＆バンドルツールを探してみる | フューチャー技術ブログ
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。 今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。 今回試してみたのは次の4つです。 Parcel Fusebox ncc Rome.js JavaScriptのビルドツールとはJavaScriptでビル
【入門】ElectronをTypeScriptで手軽に試したい
この記事はClassi developers Advent Calendar 2022の8日目の記事です。 はじめに Electronとは、Windows、macOS、Linuxで動作するアプリが作れるソフトウェアフレームワークです。 読者対象者は以下の様な方です。 Electronの概要は知っているが、触ったことが無い方 TypeScriptで実装し学習したい方 Vue.jsやReactなどのライブラリは考慮しないで、Electronが動く環境を試したい方 今回紹介する実装は、出来るだけシンプルな構成を目指しました。一旦依存関係を出来るだけ省きElectronの機能に集中する事を目的としています。 実は、Electron Forgeという簡単にテンプレートが作成できるツールもあります。ある程度Electronに慣れてきたら、こちらを利用してみても良いでしょう。 作ったもの 開発環境 ma
GoogleAppsScriptは何で書くべきか(公式orローカル / JSorTS ) - Qiita
初めに ライブラリ等でメリットデメリットが大きく変わってくるため、 大雑把になっています GoogleAppsScriptを書く手段 公式サイトで作成する 公式エディタ(https://script.google.com)でJavaScriptで記載する ローカルで作成する(EditorはVSCode) JavaScriptで記載し、そのままclaspでpushする TypeScriptで記載し、そのままclaspでpushする(自動でトランスパイルされる) JavaScript/TypeScriptで記載し、webpack等を使ってビルドして、claspでpushする それぞれのメリット・デメリット 公式エディタを使って、JavaScriptを使う メリット ライブラリ,サービスの使用やデプロイを、GUIで書ける JSDocで型を記載できる(paramとreturnしか使えない) 一応G
JavaScript / TypeScript の豆知識 10 選 - Qiita
JavaScript / TypeScript の豆知識 10 選 初めに JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。 コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。 少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。 それでは、以下が目次です。 JavaScript / TypeScript の豆知識 10 選 初めに 1.Nullish と Falsy 関連参考資料_1 2. tsconfig の便利な設定 関連参考資料_2 3. 依存関係の綺麗な図示の仕方 関連参考資料_3 4.正しい XSS のやり方 関連参考資料_4 5.removeChildren 関連参考資料_5 6.数値型を関数の引数として使う時の小技 関連参考資料_6 7.hi
importの順番をルール化して自動で整列させるeslint-plugin-import
typescript-eslint の no-unused-vars を off にする eslint/no-unused-vars をTS用に拡張したもの。 eslint-plugin-unused-imports と重複して no-unused-vars のエラーが報告されてしまう 'Hogehoge' is defined but never used. eslint (unused-imports/no-unused-imports) 'Hogehoge' is defined but never used. eslint (@typescript-eslint/no-unused-vars)
ESLintでimportの整列・追加・削除を自動化する - Qiita
概要 ESLintのプラグインとVS Codeの設定でimportの追加・削除・整列を自動化して幸せになれる記事です。 こんな人におすすめ チーム間でimportの順番などのルールが決まっておらず。人によってフォーマットがバラバラなのが実は気になっている。 未使用のimportを消すのを忘れがち。 コンポーネントやライブラリの関数を書いたら勝手にimportしてくれたら嬉しい。 import周りを触るのがシンプルにめんどい。 使用するプラグインと設定 VS Codeの設定 source.addMissingImports importの自動追加に使用する VS Codeで設定する ESLintのプラグイン eslint-plugin-import importの整列に使用するプラグイン eslint-plugin-unused-imports 未使用のimportを削除に使用するプラグイン
TypeScript / JavaScript の import を自動でソートする - Sansan Tech Blog
こんにちは。Eight でエンジニアをしている鳥山（@pvcresin）です。 マイブームはコンビニで買える GODIVA のベルギーダークチョコレート（アイス）を食べることです。 濃厚で甘すぎず、量も多すぎないところが気に入っています。 今回は TypeScript や JavaScript の import を自動でソートする話をしたいと思います。 といっても、TypeScript でソートがうまく行けば JavaScript でも大抵うまくいくので、主に TypeScript にフォーカスした話になるかと思います。 背景 import をソートしようと思ったきっかけは、チームのメンバーが出した 1 つの PR（プルリクエスト）でした。 新規作成したファイルの import が、ライブラリからの import とその他のファイルからの import でそれぞれまとめられており、見やすい
ESlint で import を自動ソートする
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
async await の使い方 - Qiita
これからはasync,awaitが読み書きできないと生きていけなそうだったので調べてみました。 ※コード例は一応TypeScriptですが、ほとんどJavaScriptです。 参考: async function - JavaScript | MDN
async await | TypeScript Deep Dive 日本語版
思考実験として、次のことを想像してみてください： await のキーワードがPromiseに対して使われた場合、JavaScriptコードの実行を一時停止します。そして、その関数から返されたPromiseが完了した場合にだけ、コードの実行が再開されます。このようにJavaScriptランタイムを制御する方法を想像してみてください: コピー// 実際のコードではありません。ただの思考実験です。 async function foo() { try { var val = await getMeAPromise(); console.log(val); } catch(err) { console.log('Error: ', err.message); } }
歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita
はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し
TypeScript Cheat Sheets
Popular Documentation PagesEveryday TypesAll of the common types in TypeScript Creating Types from TypesTechniques to make more elegant types More on FunctionsHow to provide types to functions in JavaScript More on ObjectsHow to provide a type shape to JavaScript objects NarrowingHow TypeScript infers types based on runtime behavior Variable DeclarationsHow to create and type JavaScript variables
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
JavaScript / TypeScript全体研修を実施 ~歴史あるサービス保守からモダンフロント開発まで幅広く手掛ける為に~ | NIJIBOXのフロントエンドエンジニア
フロントエンドグループ JavaScript / TypeScript全体研修を実施ニジボックス フロントエンド開発室の高橋です。 3月4日、3月11日の2日間にかけて弊社、株式会社ニジボックスのフロントエンドグループ全体を対象にJavaScript, TypeScriptの全体リモート研修を実施しました。講師にはリクルートから３名のプロフェッショナルをお招きしました。参加者は総勢で50名近くになりました。 今回この研修の企画運営メンバーの一人として携わりましたので、研修当日の雰囲気や研修後の成果を含めてご紹介させていただきます。 ニジボックスフロントエンドグループの現状と課題ニジボックスフロントエンドグループはSUUMO, ゼクシィをはじめとしたリクルート内のWebサービスのフロントエンド業務に幅広く関わっています。 業界も様々ですが、使用している技術や開発フローもプロダクトによって大き
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
