こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロン...
DocBaseのフロントエンド改修をどのように進めたか
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロン...
TypeScript + React: Why I don't use React.FC
Update: React types for version 18 changed a lot! If you encounter problems described in this article, make sure you update to the latest version! In my recent article on TypeScript and React component patterns I’ve stated that I don’t use the built-in type React.FC<> but rather be explicit with typing children. I didn’t state why, and it sparked some interest. That’s why I want to elaborate a lit
2021年の密かなトレンド？ “型安全ルーティング”の概観
2020年は、型安全ルーティングが密かに盛り上がりを見せた年でした。この記事では、TypeScript周りのエコシステムで発生した型安全ルーティングという概念とこれまでの流れを振り返ってご紹介します。 ルーティングとは この記事でいうルーティングは、URL（特に/user/uhyoといったパス部分）を見てコンテンツを出し分ける機構のことを指します。ルーティングは、主にSPA (Single Page Application) で必要となります。SPAはどのようなURLでも同じHTMLとJavaScriptが動作し、JavaScriptによってアドレスに対応したコンテンツが表示されます。まさに、ルーティングがSPAの根幹となっています。また、一般のウェブサーバーも、異なるURLに対するリクエストには異なるレスポンスを返しますから、ここでもルーティングが行われていることになります。 従来は、文
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
Fintechサービスをスピーディーに立ち上げる技術スタック LINEエンジニアに和田卓人さんが聞く TypeScriptとマイクロサービス基盤 - はてなニュース
多くのユーザーに常用されるコミュニケーションアプリ「LINE」には、エンターテイメントやライフスタイル、ショッピングなど多種多様な関連サービスがあります。 その中でスマホ投資サービス「LINE証券」や、外国為替証拠金（FX）取引の「LINE FX」、個人向けローンサービス「LINEポケットマネー」、「LINE」アプリ上で損害保険に加入できる「LINEほけん」などファイナンシャル（金融）系サービスの展開も拡大しています。 こういったFintech事業に、LINEエンジニアはどう取り組んでいるのか？ 「LINE証券」を開発する3名に、事業を支える技術の詳細を伺いました。聞き手は、テスト駆動開発の第一人者でありITコンサルタント・ソフトウェアエンジニアの和田卓人（@t_wada）さん。 信頼性と高速性の両立が求められるFintech領域において、LINEはどのような工夫を行っているのでしょうか。
Context API と useReducer で custom hook を作る時のテンプレート
Context API と useReducer で custom hook を作る時のテンプレート2020-12-10 Context API と useReducer で custom hook を作る例が見つからなくて色々と思考錯誤をしていたのですが、現時点で自分なりにたどり着いた答えを紹介します。 フォルダ構成とそれぞれの役割 context, reducer, hooks で分けています。ただこだわりはなく、実際にはフォルダ構成はなんでもいいと思いますし、手を抜きたい時は Context のファイルに reducer を書いたりしています。 それでも技術的な関心には分離できるのでそのように分けることを意識しています。 context Context の作成と Provider でラップできる関数を作ります。 import { createContext, Dispatch, Re
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています 弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
React17におけるJSXの新しい変換を理解する
今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換
TypeScriptでテストコードを徹底的に型推論する / TypeScript Meetup 4
2020年6月16日 TypeScript Meetup #4 にて発表した資料です。
Gatsby + TypeScript で技術ブログを書くための知見
Blog を作りました！！！！！ 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog を作ってみたものの書く内容が特にないので、まずはこのブログをどうやって作ったかについて書きます。 「こういう記法にちゃんと対応できてる？」を試す目的でもあります。 技術スタック 根幹になっているものは、 TypeScript Gatsby です。 元々は amdx + NextJS, もしくは完全自作 SSG を考えていたのですが、 ブログは完璧を目指しているといつまでも完成しない ということは知っているので、自分にとって自信があるツールとして Gatsby を選びました。 しかし、ただ使うだけなのはチャレンジ性がなかったので、TypeScript を使ってみることにしました。 昔の Gatsby
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
僕のフロントエンド技術に対するスタンス｜erukiti
僕は日頃からReact Hooks + TypeScript 最高だの言ってますけど、実のところ、それらを超えるモノが登場したら一瞬で「React Hooksなんて過去の技術だよねー、#にゃーん（社会性フィルター）」とか「TypeScript？へなにそれ？過去の言語ですよね」とかボロクソに言ってる自信があります。 補足: ボロクソにいうとは限りません。その頃に、単に手のひらクルーって返してるだけで、新しい技術を「〇〇＋□□最高！」って言ってるだけになるように、人格的に成長してるかもしれませんｗ 僕にとっては技術はただの道具にすぎません。 道具に対して必要以上の思い入れもしなければ、信仰する気持ちもありません。というより今あるクソなモノよりマシなものを求める渇望がここ数十年ずっと続いてる感じです。 そんな僕が判定するフロントエンド技術の数々を書いてみます。ブログなんでぶっちゃけテキトウで率直
Section 4: @types/react and @types/react-dom APIs | React TypeScript Cheatsheets
The @types typings export both "public" types meant for your use as well as "private" types that are for internal use. Check SaltyCrane's React TypeScript Cheatsheet for a nice autogenerated complete reference. @types/reactLink to .d.ts Namespace: React Most Commonly Used Interfaces and Types ReactNode - anything that is renderable inside of JSX, this is NOT the same as what can be rendered by a
決定版！イマドキの ESLint 設定！ | DevelopersIO
2021 年度版は Zenn に書きましたのでご覧ください。 ESLint 設定を作成する技術 そろそろ書かねばな、と思っていたところに必要としてくださる方がいらっしゃることがわかったので書きました。 eslint, eslint-plugin-prettier, typescript-eslintの組み合わせは僕の中では完全に鉄板になったんだけど、「決定版！イマドキのESLint設定！」みたいなタイトルの煽り記事を書く元気はないんだよな…… — なかざん (@Nkzn) June 1, 2020 2020 年 6 月現在のまとめです。 TL;DR 先にベースの完成形となる設定ファイルをおいておきます。 JSON に比べ YAML のほうが記述量が少なく構造が把握しやすいので YAML で書いています。次の内容をプロジェクトのルートディレクトリーに .eslintrc.yml として保存し
「Redux よさようなら」最強の React 実装
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
ep.33 TypeScript による品質へのこだわり - 極北から現場までの道のり | UIT INSIDE
@potato4d が極北の TypeScripter @uhyo_ に、 LINE 証券における TypeScript の実践状況について聞いてみました。 PR TSConf JP に LINE 株式会社は協賛しています。 Show Note ゲスト紹介 @uhyo_ 2019年 新卒 LINE 証券のフロントエンドを担当 安全性の極北から見るTypeScript Speaker Background for LINE financial 基本情報 LINE証券：LINEで株が買える 去年8月にリリースした比較的新しいプロダクト 技術的にはTypeScript+React、いわゆるSPA LINEのSPAの中でも比較的大規模（TS10万行） フロントエンドのメンバー13人（業務委託3人含む） TypeScript初経験 立ち上げ時はTypeScript初経験のメンバーがほとんど（1人経験
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tagged Template Literals の TypeScript推論 - Qiita
react-ts-lp/README.md at master · atnr/react-ts-lp