My new error...
2023 年度の僕のエラーハンドリング について書きたい。 昨日Safe Data Fetching in Modern JavaScriptを読んでいて、fetch に限った話ではないが一家言ある内容だったので書きたくなった。 おそらくやりすぎだとか非効率と言われる点はあると思うので、みんなの一家言も教えて欲しい。 対象は Typescript での サーバー開発想定だが、TS であればクライアント開発にもほとんどに当てはまる話だと思う。 例外のスローではなく Result 型を使う Result は失敗するかもしれないという文脈を与えてくれる型 エラーハンドリングの戦略として例外を投げるのではなく、Result 型を返すやり方がある。 Result 型というのは export type Result<T, E> = Ok<T> | Err<E>; export interface Ok
TypeScript・モジュラーモノリスによる型安全なWebサービス開発
こんにちは。SALESCORE株式会社CTOの成澤です。 祝・Publication機能のオープンβリリース🎉🎉 ということで、SALESCOREのテックブログを発信し始めます！ テックブログの一発目ということで、2022年で一番開発体験が変わったTurborepoによるモノレポ・モジュラーモノリスによる開発について紹介します。 今後もTypeScriptでのWebサービス開発について記事を出していく予定なので、気になる話題などあればコメントいただけるととても嬉しいです🙋♀️ モジュラーモノリスという選択肢 ソフトウェア開発における重要な要素の1つは抽象化です。 抽象化をあえて噛み砕いて、平坦な言葉で言うならば 「適切なグルーピング」 と呼んでも良いでしょう。抽象化とは、ものごとをグルーピングして、適切な名前を与えることです。 100行の処理の羅列は分かりづらいが、10行ずつグルー
フロントエンドで 良いコードを書くために
Keeping it simple: Cilium Mesh - networking for multi-cloud Kubernetes and beyond
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや 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
アンサー: named exportは有害なのか - uhyo/blog
こんにちは。ここ数日は、以下の記事が話題になりました。 named exportは有害だと考えられます「named exportは有害」という主張はこれまで常識と思われていたこととは異なるため、界隈のエンジニアからは否定的・懐疑的な意見が見られます。実際、筆者もnamed exportが有害であるとは1ミリグラムも思っていません。 しかし、自分と異なる意見は当然に下等・幼稚なものであるというのは筆者が最も嫌う考え方ですから、このような異なる意見を分析・理解する必要があると思い、アンサー記事という形でまとめました。具体的には、異なる意見に達する理由としては前提が異なることと論理が異なることが主に挙げられます。前提が異なることが分かれば、自分と異なる意見に至った理由を理解でき、場合によっては取り入れることもできます。論理が違うのであれば、それは瑕疵であり指摘しなければいけません。 なお、そもそ
Electron & React & Redux & TypeScript アプリ作成ワークショップ 1日目 - Qiita
1日目（この記事） 2日目 3日目 4日目 5日目 6日目 7日目 8日目 9日目 概要 本書は、 Electron を利用したマルチプラットフォーム・デスクトップアプリケーションを、 React-Redux で作成するワークショップです。 言語には、 JavaScript ではなく、 TypeScript を利用します。 これらの技術を組み合わせることで、中～大規模開発においても非常に効率よく設計・実装ができるようになります。 1日目では、それぞれの技術の概要の説明と、npm / yarn を使ったライブラリの導入まで行います。 対象者 Web開発の経験があり、ある程度 JavaScript は知っている人。 Electron を試してみたい人。 前提条件 Node.js がコンピューターにインストールされていることが必要です。 執筆時点の Node.js のバージョンの最新版は、 12
Real World GraphQL on Next.js SSR
tl;drNext.jsはv9.3.0以降Initial Loadingの扱いが変わったクライアント側ではApolloを利用することができるが、Authorization Headerを設定するなら一工夫必要SSR時にはfetchによるシンプルなAPIリクエストをすると良い昨今のWebフロントエンド昨今のWeb開発において、React、TypeScriptとかのベース知識は当然として、やはりNext.js(あるいはNuxt.js)のような、SPA/SSR両方のニーズを汲み取りながら、dynamic routingを提供してくれたり、ビルド環境を高速に整備してくれるフレームワークが重宝されるようになってきていると感じます。 また、Reduxもアリですが、スキーマ駆動開発が推進できるGraphQL、特に尋常じゃなくステート管理が用意になるHooksとApolloクライアントの組み合わせは、フロ
現場から届けるReactプロジェクトの悩みと改善
Transcript ݱ͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ Έͱվળ� 6*5���ਐԽ͢Δ�3FBDU�KT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBDU XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w'SPOUFOE�5SBJOJOH�.FFUVQ� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� ࠂ None *OTJEF�'SPOUFOE��� �����݄��։࠵ʂ✨ IUUQT���JOTJEF�GSPOUFOE�DPN� $'1ืूͷకΊΓ ໌ �݄����࣌�� ·Ͱʂ ·ͩؒʹ߹͏ʂʂʂ ࠂऴྃ ݱҰͭҰͭʹ3FBDUʹؔ͢Δ͕͋Δͱ͓ͬͯΔ ࠙ձͰͦΜͳͰΓ্͕Γ͍ͨ ͷ3FBDUϓϩδΣΫτͷݱͰվળ
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
TypeScript導入で得られる「変えていく勇気」 / The courage to change by TypeScript - Speaker Deck
2018/9/1、GDG DevFest Tokyo 2018にて発表した資料です。
Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
TypeScript のコンパイル時計算はどこまでできるのか？ - Qiita
最近は仕事で TypeScript を書いています。この TypeScript は、コンパイルすると JavaScript にできるという特徴をもつ altJS と呼ばれる言語の仲間です。なかでも、推論つきの静的型検査がついていることが最大の特徴でしょう。 さて、話は変わりますが、プログラマは「コンパイル時計算」という言葉が大好きで、とくにうっかりチューリング完全になっちゃったものとかを見つけると、手を叩いて大喜びしたりするわけですね。 TypeScript にもコンパイル時計算があって、コンパイル時の型検査がそのひとつです。今回は、この型検査を利用して、どのレベルの計算機能までを実現できるのか試してみました。 結論からいうと、TypeScript のコンパイル時計算を使って組み合わせ回路を実現できました。 実証コードとして、コンパイル時 4bit 加算器をつくってみました。4bit 加算
ES modulesのexport defaultは使わないほうがよい - Islands in the byte stream
ES modulesにexport defaultってのがあるんですが、default exportのexport対象に名前が必須でないため、IDEによるコード補完と相性が悪いです。 他のところはどうしてるのかなと思って調べてみると、GoogleのTypeScript Style Guide では禁止されてました(v1.0.0, 2019/07 現在）。 https://github.com/google/gts/blob/v1.0.0/tslint.json#L40 ("no-default-export": true) TypeScript compiler coding guidelineには特に言及はないみたいですね。 https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines そもそもexport defaultは
Vue + TypeScript + poiで小さいプロジェクトを作る時の手順 - No Regrets in Bathing
TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。 お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのスライドが良い。 とにかく楽してVue.jsでTypeScriptを使いたい from さくらインターネット株式会社 www.slideshare.net 上記の内容と、webpack-simpleという自分が愛用しているテンプレートと、vue-class-componentのexampleを見ながら書いた雛形が下記に置いてある。 github.com それはそれとして、今日はpoiを調べた。 poi + TypeScript poiは設定より規約感のあるツールで、書捨てのプロジェクトにはwebpac
Flow導入して数ヶ月がたった所感 - tomoima525's blog
ReactNativeプロジェクトで、型がないことによるつらいシーンが多くなり(特に変数の解釈に起因するバグ)、Facebook製の静的型解析ツールであるFlowを数ヶ月前に導入しました。導入時の学びと、しばらく運用して感じていることについて個人的な感想を書きました。 Flow選定理由 Javascriptで静的な型付けをするといえばTypeScript(正確にはJavascriptのスーパーセット)がありますが、プロジェクト途中からの導入しやすさの観点からFlowにしました。Flowはお作法(行頭に @flow つける等)さえ押さえれば誰でも使えることから導入障壁はだいぶ低いといえます。導入のメリットについては以下のスライドがとてもわかりやすいです。 speakerdeck.com flow status でプロジェクトに対して静的型解析を走らせることもできますが、 コーディング時にワー
TypeScript+webpack+Hypernova on RailsでSSRするときの設定ファイル - Bit Journey's Tech Blog
「Roppongi.rb #3 で「RailsエンジニアがReactを始めてSSRとReduxを導入するまで」という発表を行いました - Bit Journey's Tech Blog」あたりの話のなかで触れている、KibelaにおけるJSのビルド環境に関係する設定ファイルなどを公開します。 現在もこのときと基本的な構成は変わっておらず、すでに数ヶ月安定して運用できています。 環境 Rails v5.1 TypeScript v2.5 webpack v3.6 Hypernova*1 webpackerは不使用で、webpack-rails*2を使用 ディレクトリ構成 client/ - フロントエンド用TSコード（.ts, .tsx,.json） spec/javascripts/* - テスト用TSコード なおプロダクション用フロントエンドコードは 100% TypeScript です
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 内で JS のクラスインスタンスを用いる - fsubal
032130