【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅲ. React応用編】： #りあクト でよりディープにReact入門 - Rのつく財団入り口
りあクト！ 技術同人誌のりあクト！、【Ⅲ. React応用編】の読書記録と感想です。 りあクト！ 【Ⅲ. React応用編】 第10章 React におけるルーティング 第11章 Redux でグローバルな状態を扱う 第12章 React は非同期処理とどう戦ってきたか 第13章 Suspense でデータ取得の宣言的 UI を実現する まとめ：IIIでさらにディープにReactの神髄に触れられる本 関係書籍など oukayuka.booth.pm 【Ⅲ. React応用編】 大変革であるReact Hooks登場を受けて第3部では副作用処理をテーマとし、公式でもこれからリリースでまだ実験的な機能のSuspenseを扱った応用編の話となっています。 りあクト！【Ⅲ. React応用編】 第10章 React におけるルーティング 10-1. SPA におけるルーティングとは サーバーサイド
Webサービス開発の文脈で、モノレポ環境を作る方法について整理しました。 ※バックエンドもフロントエンドも全てTypeScriptで開発している前提 この記事を書いた背景 世間で言われる「モノレポ」がどのように達成されているのか知らなかった 参考記事を読んでると実現方法が異なっていたり、運用のイメージが見えなかったり、ベストプラクティスが分かりづらかった Turborepoのようなモノレポツールを導入すれば解決しそうだが、このツールが何をしてくれるのか理解できなかった モノレポ何も分からない………になった この記事ではモノレポに関連する仕組みを1つ1つ丁寧に把握し、最終的に理想的なモノレポ環境を実現することを目指します。 モノレポとは？ まずは用語の整理から。 モノレポを素直に訳せば「1つのリポジトリ」という意味でしかなく、1つのリポジトリで開発していればそれは「モノレポ」と呼べそうです。
Layouts RFC
This RFC (Request for Comment) outlines the biggest update to Next.js since it was introduced in 2016: Nested Layouts: Build complex applications with nested routes. Designed for Server Components: Optimized for subtree navigation. Improved Data Fetching: Fetch in layouts while avoiding waterfalls. Using React 18 Features: Streaming, Transitions, and Suspense. Client and Server Routing: Server-cen
10km40分切りが2020年の目標、メドピア長距離部の小宮山です。 みなさんTailwind CSSはご存知でしょうか。tailwindとは「追い風」を意味します。最高に気持ちよく走れるコンディションですね。 目次 サービス概要 技術概要 Tailwind CSSとは何か HTMLとCSS HTMLとCSSとコンポーネント コンポーネントと雑なセレクタ コンポーネントとインラインスタイル Tailwind CSSがもたらしたもの まとめ サービス概要 まずは今回新たに立ち上げたサービスの紹介です。 「MedPeerスポット×リクルートメディカルキャリア」という医師向けスポット求人マッチングサービス（以下、本サービス）が11月にリリースされました。 medpeer.co.jp ログインや応募などサービスのコアな部分はMedPeer医師会員限定になってしまいますが、サイトの雰囲気自体は非会員
airbnbからjs→ts移行のツールが出ましたね…！ Learn about how we used codemods to accelerate migration from JavaScript to TypeScript at Airbnb. https://t.co/s1WihkfD1F — Airbnb Engineering (@AirbnbEng) August 18, 2020 早速使ってみたので、その手順と使用感について書きたいと思います。 コード量によるのですがかなり簡単にできるように感じました。 TSにしたいけど面倒やなぁって感じてる方に是非 移行前のファイル 簡単なテンプレを使って試してみました！ これをts化させていきます。 ├── src │ ├── img │ │ └── common │ │ └── favicon.png │ ├── js │ │ └──
Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけばその肉体にゴリゴリのウェブパッ筋を宿していませんか？ 賢い人はスターターボイラープレート的なものを自分で用意しているかもしれません。 だけどそれも頻繁な依存ライブラリのアップデートに合わせるために常にメンテナンスが必要となります。カビの生えないボイラープレー
概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j
Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース JavaScriptフレームワークNext.jsの開発などで知られるホスティングサービス企業Vercelは2022年10月25日、Rustベースで高速に動作する新たなモジュールバンドラ「Turbopack」をリリースした。これはNext.jsでのアプリ開発を高速化するため、JavaScriptモジュールバンドラWebpackを置き換えるもの。 Webpackの700倍の速さを実現 同社によると、大規模なアプリケーションではTurbopackはWebpackの700倍高速に更新が表示されるとのこと。これは同社のビルドツールTurborepoなどで培われた各種キャッシュ最適化の技術を用いて実現されている。 TurbopackをNext.js 13開発サーバーで使用することで、超高速なホットリロード（HM
Biome, toolchain of the web
Format code like Prettier, save timeBiome is a fast formatter for JavaScript, TypeScript, JSX, and JSON that scores 97% compatibility with Prettier, saving CI and developer time. Biome can even format malformed code as you write it in your favorite editor.
Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like
成熟したRailsアプリのフロントエンドを最新にリニューアルする方法（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Keep up with the Tines: Rails frontend revamp — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/06/03 著者: Rita Klubochkina、Andy Barnov サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語タイトルは内容に即したものにしました。 アセットパイプラインで提供される既存のjQueryやCoffeeScriptのフロントエンドを一切損なわずに、「React」「MobX」「GraphQL」「Tailwind CSS」「Webpacker」の複雑な
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
JavaScriptランタイム「Bun v0.5」登場。MySQLやPostgreSQLのデータベース接続対応、新機能「Workspaces」、Bun.dnsなど搭載
JavaScriptランタイム「Bun v0.5」登場。MySQLやPostgreSQLのデータベース接続対応、新機能「Workspaces」、Bun.dnsなど搭載 サーバサイドで実行可能なJavaScriptランタイム「Bun」の最新バージョン「Bun v0.5」がリリースされました。 Introducing Bun v0.5 - bun install workspaces && bun install bugfixes - postgres, mysql, redis & more DB-related npm pkgs work in bun now - Bun.dns && some of node:dns, node:net, & node:tls - new WebSocket supports headers - HTTP client proxy supporthttp
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
はじめに 素の JavaScript でフロント開発経験がない React 育ちのエンジニアです。 React でフロントエンド開発をしていて大きく困ることはないのですが hooks, JSX, 様々なライブラリを使用していていると JavaScript を理解していたらという場面がちょこちょこ発生します。 そのため最近は JavaScript の基礎的な勉強をしています。 JavaScript の理解を深めることによってスムーズにキャッチアップできたり、裏側でどのように動作しているかなど想像しやすくなるだろうという目論見のもとで。 そこで、素の JavaScript を使用して TODO リストのためのコンポーネントを作成してみました。 JavaScript の Class を理解していることを前提に述べていこうと思います。 TL;DR JavaScript 組み込みの shadowDO
Snowpack
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel What is Snowpack?Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Sno
JSXとHTMLベースのテンプレート言語の比較を行い、批判されがちなJSXが実はベターな解だったのでは？という記事です。 僕の結論は、HTMLとJSのどちらが制御構造を持てばいいのか？でいえばJS側が持つ方がリファクタリングしやすいため、JSXの方が良いというものです。 さて、先日、JSフレームワーク事情2020年始めという記事を書きました。これは、JavaScriptフロントエンドフレームワーク、Angularの人気が下落中という記事の元ソースであるThe State of JavaScript 2019を見ながら、React/Vue/Angularや、Next/Nuxt/Gatsbyが置かれている状況を解説するものでした。 他には、確証はないものの、Reactのシェアと人気がともに高い理由は、意外にJSXにもあるのではないか？と考えています。VueもAngularも基本的にはHTMLを
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
RustでGraphQLやってみる番外編(Vue+composition APIでGraphQLを使う) - 虎の穴開発室ブログ
皆さんこんにちは。とらラボのY.Fです。 前回までの記事ではRust+actix-web+juniperでGraphQLサーバーを作ってきました。 前回の記事の段階で一旦参照、更新処理はできたので、今回は番外編として呼び出し側となるクライアント側について記事を書いていこうと思います。 (前回の記事はこちら) toranoana-lab.hatenablog.com この記事ではcomposition APIに関する細かい説明はしません。以前書いた記事があるので、そちらを御覧ください。 また、利用するライブラリがVue3にまだ対応していないので、下記記事で作ったプロジェクトをベースに作っていきます。 toranoana-lab.hatenablog.com 環境 サーバー側の環境は前回と同様なので割愛します。 React+GraphQLのサンプルは世にあふれているので、今回はVue+comp
Deno で掲示板サイトを作ろう！ with upstash & supabase その 2 (ミドルウェアと掲示板の作成) - 虎の穴開発室ブログ
皆さん、こんにちは。 自宅では、トラドラオニタイジン極がご本尊みたいになっています。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の2回目として、掲示板の登録と参照の実装を進めていきます。 今回の実装で、次のように、掲示板の登録ができるようになります。 前回記事はこちら toranoana-lab.hatenablog.com 訂正 始めに、第1回で取り扱った環境変数の取り扱いについて、一部訂正をさせていただきます。 第1回に紹介した、以下のdotenvの実装がありました。 [anonymous-board/util/config.ts] import { config } from "dotenv/mod.ts"; export const envConfig = await config({ safe: true })
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ：学習記録ノート
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Components もサポートしているではないですか！ で、やってみました。 環境準備 手っ取り早く試すためにVue CLIを使います。 次のコマンドでインストールできます。 $ yarn global add @vue/cli インストールできたらプロジェクトを作ります。 このエントリではvue-web-componentsという名前で作りますが、 なんでも構いません。 次のコマンドを実行するといろいろ質問されます。 $ vue create vue-web-components 今回は次の様に答えまし
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
Written by Oren Farhi, Front End Engineer Tech Lead, follow me on This article has been translated: Chinese 1 (by Qlly) Chinese 2 (by Qlly) Korean (by Ykss) I bet the need to tweak perfomance comes in a certain phase of development for every developer, in every app. There are very good resources and articles about how to tweak performance in react and this article is no exception. I thought I will
React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
transformは、なんでもデータ変形サービスで、JSONからYAML、HTMLからJSXへの変形はもちろん、JSONやGraphQLのIDLからTypeScriptのinterfaceを生成するようなものまで手広く対応しているサービスだ。 特別なツールをインストールする必要はなくブラウザだけで動作する。 現在、42種類のデータ変形に対応しており、対応している変形パターンは下記のとおり: SVG to JSX SVG to React Native HTML to JSX JSON to React PropTypes JSON to Flow JSON to GraphQL JSON to TypeScript JSON to MobX-State-Tree Model JSON to Sarcastic JSON to io-ts JSON to Rust Serde JSON to
チームで同じような React コンポーネントを書く
はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:
Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・！ まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか
TypeScript Compiler API を使って ts-expect-error を一括挿入する - ドワンゴ教育サービス開発者ブログ
こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 TypeScriptを使用しているプロジェクトでコンパイラの設定を変更したら既存のソースコードがコンパイルに通らなくなった……という経験はないでしょうか。 先日あるリポジトリでnoUncheckedIndexedAccessというコンパイラオプション（TypeScript4.1以降で使用可能）を有効化した1ところ、既存ソースコードの200箇所以上がコンパイルエラーになりました。これを全て手作業で直すのは大変ですし、その間にも直さないといけないコードは増えていくかもしれません。 そこでTypeScriptのCompiler APIを使用し、コンパイラから得られるコンパイル時のエラー情報を利用して@ts-expect-error2を挿入するスクリプトを作成しました。その過程と結果を書きましたので、次のような方々の参考になれば幸
JSConf JP 2023「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
この記事は、JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです。もともと PDF を公開していたのですが、読みにくいという声をいただいたので移植しました。内容はそのままで、見出しだけ付けています。 はじまり こんにちは、今日は「書いたJavaScriptがそのままブラウザで動く未来へ」というタイトルで発表をします。「いやいや、JavaScriptはブラウザで普通に動くだろう」と思われる方もいらっしゃるかもしれませんが、話を聞いてもらえれば何を言っているのかわかると思います。 JSConf JPで登壇させていただくのは今回で3度目なのですが、オフラインのカンファレンスで話すのは今回がはじめてなので少々緊張しています。 最初に軽く自己紹介をします。鈴木 颯介と言います。大体のところで Sosuke Suzuki という名前
日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということ - Commune Engineer Blog
こんにちは。昨年の11月にエンジニアとしてコミューンに入社したざびえる（仮名）です。 コミューンは、CEOのブログ「進出して分かった日本とアメリカのSaaSプロダクトニーズの違い｜高田優哉/commmune｜note」にもある通り、アメリカ進出をしており、私はその開発担当をしています。 この記事では、海外展開に関わるようになった経緯や、プロダクトのグローバル化をどのように進めているか、そして今後のグローバル化の課題などをお話しようと思います。 GlobalPJ参加の経緯 新卒でWebエンジニアとして働き始めてから常々「日本初のソフトウェアプロダクトで世界的に使われるものってないな。いつかそういうプロダクトが出て来れば日本のソフトウェア業界ももっと盛り上がって、優秀な人がソフトウェアエンジニアとして集まってくるだろうに」と思っていました。 一つ思い当たるのはプログラミング言語のRubyですが
先日当社のPodcast「ミツエーテックラジオ」で「リンター特集」というエピソードを公開しました。このエピソードでは、社内でよく使われているリンターを紹介しましたが、他にもWeb制作で活用できるリンターはたくさん存在しています。 今回はPodcastではあまり取り上げなかったHTMLのリンターについてご紹介します。 LintHTML 1つ目はLintHTMLです。LintHTMLはhtmllintのフォークとして作られたツールです。htmllintでチェックできる内容は全てLintHTMLでもチェックできます。 リンターでチェックできるルールは多ければ多いほどいい、というものでもないのですが、2014年から開発されていたhtmllintをもとにしていることもあり、さまざまなルールを設定できます。 他のリンターにはない特徴としては、ファイルの一部分に対して個別の設定ができることです。サイト全
The Joy of React
Toggle turquoise light (visual effect)Toggle yellow light (visual effect)Toggle purple light (visual effect) So, let’s be real. Learning React is hard. Over the past few years, React has become a “must-have” skill for front-end developers. Just about every job posting lists it as a pre-requisite! If you’ve tried to learn React, though, you know it can be confusing and overwhelming. There’s just so
Today we’re excited to release the beta of the next major milestone in the TypeScript programming language: TypeScript 4.0. This beta takes us on our first step into TypeScript 4.0, and while it brings a new major version, don’t fret – there are no substantially larger breaking changes than usual. Our philosophy in evolving TypeScript has always been to provide an upgrade path that minimizes disru
Chatworkフロントエンドが品質を保つために行なっているモブレビューについてのお話 - Chatwork Creator's Note
こんにちは！フロントエンド開発部の石山です！ フロントエンド開発部では、スケールしやすいアプリケーションを目指して日々改善を行なっています。 今回はコードの品質を高めるためにフロントエンドチームが行なっている、モブレビュー会を紹介します！ モブレビュー会とは モブレビュー会を始めたきっかけ モブレビュー会の流れ なぜマージ済みのPRをレビューするのか レビューをするときに意識していること 実際のレビューコメント モブレビューをやってみてよかったこと 他フロントエンドメンバーの感想 さいごに モブレビュー会とは モブレビュー会は1つのPRをフロントエンドメンバー全員でレビューを行う場です。 ここではコードに対しての疑問点や改善点を絞り出すことに焦点を置いてレビューします。 モブレビュー会を始めたきっかけ フロントエンド開発部では、メンバー間でアーキテクチャや知識を共有する目的でモブワークを行
{ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:react/recommended", "prettier" ], "plugins": [ "@typescript-eslint", "react" ], "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "rules": { "react/prop-types": "off", "react/react-in-jsx-scope": "of
Today we’re excited to announce the release of TypeScript 4.5! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding statically checked types. When you use static types, you can run the TypeScript compiler to check for bugs like typos and mismatches in the shapes of your data, and get handy suggestions. These types don’t change your program, and you can re
Snowpack vs. webpack: A build tool comparison - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: This post was updated on 14 March 2022 to include information relevant to Snowpack v3 and webpack v5. Few tools have been as central and important to the JavaScript ecosystem as webpack. Launched in 2012, the JavaScript module bundler has been a cornerstone of modern JavaScript
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサービス開発でのmonorepo環境(Turborepo, nx)
Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ
JSからTSへの移行ツール、ts-migrateを試してみた - Qiita
Snowpack で実現する未来のフロントエンド開発 - Qiita
tsconfig.jsonの主要オプションを理解する - Qiita
Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース | gihyo.jp
Things you forgot (or never knew) because of React
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
TypeScriptのmoduleSuffixesについて考えて納得した - Qiita
素の JavaScript でコンポーネントを作成してみて React の気持ちを考えてみる - Qiita
JSXが実はベターな解だったのではないか？｜erukiti
TypeScriptのJSDocサポートでできること、できないこと
Vue.jsでWeb Componentを作ってみた - アクトインディ開発者ブログ
500ms to 1.7ms In React: A Journey And A Checklist
<div/> のレンダリングから始める React 学び直し
42種ものデータ変形がブラウザだけでできる『transform』が便利そう - Qiita
PreactにSignalsがきた - console.lealog();
いろいろなHTMLのリンター | フロントエンドBlog | ミツエーリンクス
Announcing TypeScript 4.0 Beta - TypeScript
うわっ...私の.eslintrc、無駄が多すぎ...？
Announcing TypeScript 4.5 - TypeScript