こんなに辛いことになるから、最初にがんばろう / 辛い開発状況をどうにかするためにやった13のこと
こんにちは！sugitaniと申します。 これまで有名芸能人と通話ができる(かもしれない)ライブ配信アプリとか、オリジナルマンガの配信サービスとか、コメントが横に流れるライブ配信システムとかを作ってきました。(SUGARは今も作業してます) 最近ご縁がありましてUUUMの子会社で、簡単に有料フォロワー向けの投稿が行えるFOLLOW MEを主に開発していて、NFTでデジタルトレーディングカード(※)を売り買いすることができるHABETをIndieSquare社さんと協業で運営しているNUNW株式会社(5月にFOROから社名変更)に入社し半年くらい経っています。最近CTOに任命していただきました！ ※NFTについては思うことがある開発者の皆様が多いと思っていますが、自分がどう思っているかは後述します 少し前に「スタートアップがまともなわけ無いから入るな」というインタビュー記事を書いて頂いたんで
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
どのようにTypeScriptを使うのか - uhyo/blog
現在、TypeScriptの重要性は、フロントエンド開発を中心としてますます増すばかりであります。それだけに、TypeScriptをどのように使うべきかという問題については多様な意見が見られます。 これまで筆者はTypeScriptの使い方に、特にコンパイラオプションの使い方について意見を散発的に発信してきましたが、このたび記事にまとめました。この記事では、特に次のような意見に対しての反対意見を述べます。 厳しいコンパイラオプションは型パズル愛好者のためのものであり、普通の人は細かいことを気にせず緩い設定でよい。熟練のJavaScript使いにはTypeScriptは必要ない。例え話最近はTypeScriptを補助輪に例えたりするのが流行っていますので、この記事でも例え話をしてみます。筆者の考えでは、TypeScriptというのは例えるならば料理人が使う包丁のようなものです。コンパイラオプ
TypeScript で type と interface どっち使うのか問題
はじめに あくまで一個人の意見なので絶対的な解ではないというのと、どっちをデフォルトに選んでも普通にアプリケーション開発してて困ることはほぼほぼないと思うので、そこまで気を揉むことでもない、ということだけ最初に述べておいて意見をしたためます。 TL;DR アプリケーション開発では基本的に type でおk Declaration merging したい時だけ interface ライブラリ開発のような使う側で拡張したい(Declaration merging したい)時は interface とりあえずチームでどっちをデフォルトにするかは統一しといた方が気持ちいい type と interface の違い 機能的にはそんなに大きな違いはなく、個人的に判断に関わるのは次の3つかなと思います。 interface では Declaration merging がされる。type ではされない
no.1 신차장기렌터카 7개사 통합비교견적
(주)카앤리치 | 서울특별시 마포구 양화로11길 12, 401호(현담빌딩) 사업자번호 : 586-86-01981 | 대표자:김미애 | 담당자 : 김미애 [개인정보처리방침]
"型パズル"との付き合い方
まえおき❌ Compiler API、Language Service❌ 難解な型パズルを出題して型マウント取る話❌ 全TSerが型パズルするべきだ🙆♀️ 型パズルと聞いて身構える方に身近に感じてもらいたい どっちが思考コストが高いかHTTPメソッド // ちゃんと渡せばOK const httpMethod: string = 'GET' // 正しくない値を渡してもエラーになってくれない const httpMethod: string = 'hogehoge'type HTTPMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE' // ... // ちゃんと渡せばOK const httpMethod: HTTPMethod = 'GET' // 正しくない値を渡すと型エラー const httpMethod: HTTPMeth
JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） - Qiita
単位は byte es2016以下の場合 async/await を使用した場合、トランスパイルで polyfill が挿入される よって、 async/await を使用しなければ、polyfill 分のサイズを削減できる ただし、その他の実装でも一切 async/await 使ってない場合に限る src全体で見て、他の実装で async/await を使っている場合、その実装のために polyfill が挿入される そのため、直列実行の実装を工夫しても polyfill 分のサイズは必ず増える es2017以上の場合 いずれの実装も、polyfillは挿入されない よって、書いたコード分のファイルサイズになる 所感 まぁ、妥当な結果 ベンチマーク 各 target の出力結果の JavaScript を実行 1 スレッド、100 Promise の直列処理 * 5 回計測の平均 es5
JavaScript/TypeScript で Promise を直列実行する - Qiita
2019/05/19 追記 パフォーマンス測定した JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） 目的 複数の Promise を直列実行したい 同期的実行・シーケンシャル・シリアルなど呼び方色々あるが、とにかく Not 並列に Promise[] を実行したい Promise.all のような書き心地がいい 技術的な正しさを追求した記事ではなく、雰囲気で使いこなせることを優先した記事である 動作イメージ この記事に出てくるサンプルコードについて Promise, async/await はなんとなくわかってる人向け axios で書いている 標準の fetch は、ボイラープレートコードが読みづらい・この記事の本質から外れそうなのでやめた よって、試す場合は jsfiddle などで実行のこと やりす
React開発において便利なTypeScriptの型まとめ - Qiita
React開発において個人的に便利だなーと思っているTypeScriptの型をだだーっとまとめてみました。私自身もまだまだTypeScript修行中の身ですので、新たに気づいたものがあったら随時追記していきます。みなさんも「こういう使い方できるぜ！」みたいなのがあったら、ぜひ教えていただければと思います。 対象とする読者 最近ReactにTypeScriptを導入し始めた人 ReactにTypeScriptを導入してそこそこ経つけど、いまいち使いこなせてる気がしない人 TypeScriptにあまり詳しくない人でもわかるように説明しているつもりではありますが、以下の記事がTypeScriptの入門用に素晴らしいので、そちらを先に読むとスムーズに読み進められると思います。 TypeScriptの型入門 Partial React開発においてよく定義する型としてコンポーネントのpropsの型があ
Typescript特有の組み込み型関数 | log.pocka.io
TypeScript には Promise や Symbol といった Javascript 特有のグローバルオブジェクト以外に、型を扱う上で便利になるような組み込みのジェネリックな型関数※1が存在します。これらは非常に便利で様々なプロジェクトで使われているので~すが、公式にリストもなく、説明も主にリリースノート等にしかないため、~使い方等を交えて説明を書いていきたいと思います。 なお、各定義はMicrosoft/TypeScript のsrc/lib/es5.d.tsにあります。 ※1 ... 型を受け取って新しい型を返す型。多分正しい呼び名ではない。 Partial 利用可能バージョン: TypeScript2.1~リリースノート: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.htm
Google Apps ScriptをTypeScriptで実装する(clasp/TSLint/Prettier) #gas #typescript - My External Storage
claspというGoogle Apps Script(GAS)をローカルで開発するためのツールがある。claspを使うと、TypeScriptを使ったGASのコーディングも標準で行える。 今回はclaspを使って以下の要求を満たしながらGASの開発を行う際の設定をまとめる。 TypeScriptによる実装 Gitによる構成管理 Prettierによる自動フォーマット TSLintによる静的解析 TL;DR claspを使えばGoogle Apps Script(GAS)をローカルで開発できる https://github.com/google/clasp claspはwebpackなどを使わずにTypeScriptで実装できる https://github.com/google/clasp/blob/master/docs/typescript.md 静的型付けをすることで補完などを使いな
typescript-fsaに頼らないReact × Redux
2018年11月1日、株式会社メルカリにて「React会」が開催されました。第1回となる今回は、5人のエンジニアがReactにまつわるさまざまなトピックスについてライトニングトークを展開しました。プレゼンテーション「typescript-fsaに頼らないReact × Redux 」に登壇したのは、日本事務器株式会社の甲斐田亮一氏。講演資料はこちら typescript-fsaに頼らないReact × Redux 甲斐田亮一氏：「typescript-fsaに頼らないReact × Redux」というタイトルで始めさせていただきます。僕は日本事務器という会社でフロントエンドエンジニア兼デザイナーをしている甲斐田といいます。 ふだんの業務で、React、TypeScriptでアプリケーションを書いています。 今回話すことですが、最近のTypeScript 2.8以降の機能を使って、React
dwango.co.jpをReact/TypeScript/Storybookでリメイクしてみた。 - Qiita
はじめに この記事は 第2のドワンゴ Advent Calendar 2018 の9日目の記事です。 2018年3月にdwangoに内定をもらい、8月からアルバイトとして働かせてもらっているhiraike32と言います。 2019年4月からは新卒としてお世話になります。 アルバイトの配属はWebフロントエンドで、この4ヶ月間はReact/Reduxをゴリゴリと書いてきました。 今回はアドベントカレンダーの担当をいただいたので、学んできたことを生かしてWebを作ってみます。 dwango.co.jpをリメイクする dwango.co.jp ちょっと1からWebを作るのは荷が重かったので、dwangoの年代を感じる伝統のあるHPをReactで作り直してみました。 こんな感じです。 dwango-remake まあ、ほとんど同じデザインで作ったので、見た目自体はさほど変わりません。 変わったのは
自作フレームワークをつくって学ぶ 仮想DOM実践入門
昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！ そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは？ D
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
TypeScript 2.9.1 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 2.9.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ！ この辺に僕が試した時のコードを投げてあります。 ちなみに、次のバージョンは2.10じゃなくて3.0らしいです。 変更点まとめ ファイル名のリネームのサポート Add 'renameFile' command to services ファイル名をリファクタリングできるようになった 選択範囲を別ファイルに切り出す操作のサポート Add 'move to new file' refactor 定義を別ファイルに切り出すリファクタリングができるようになった 使ってない定義があったら教えてくれるようになった Show unused declarations as suggestions --noUnu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのCollection操作をする時はお願いがある、一呼吸置いてから操作をしてくれ
032130