はてなブックマーク

はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその

こんにちは。 派遣業界のSaaS企業でUX/UIデザイナーをしている水田と申します。 この記事では、初期からデザイナー不在でデザイン負債が蓄積したプロダクトに対して、一人目のデザイナーとしてどのようにしてデザインの整理を試み、やがてデザインシステムを構築・運用していくことになったのか、その過程で私が学んだことをまとめてみました。 デザインシステムを作りはじめたいけど、どこから手をつければ良いか悩んでいる方。 今まさにチームでデザインシステムの構築を検討している方。 デザインシステムを運用しているものの、効果を十分に実感できていない方。 このような方々に読んで頂けると、少しお役立ちできるかもしれません。ではいきましょう。 PMF前のプロダクトにデザインシステムは必要ない まず最初にお伝えしたいことは、PMF（プロダクト・マーケット・フィット）に至っていないプロダクトには、強固なデザインシステ

CastingONE Advent Calendar 2023 14 日目の記事です！ はじめに 表題の通りなんですが、TypeScript をやっていて、どーーーーしても型がanyやunknown、string|number|null|number[]みたいな意味わからないユニオン型になってしまうことはありませんか？ 型を指定したいっていうのはもちろんなので気をつけたいところではありますが、それでも自由な型が入ってきてしまう可能性がある場合の実装って困りませんか？私は困りました！ 先日業務をしていて、自由に入力できる入力項目を扱ったことがありました。その項目自体は、string でくるのか number でくるのか配列でくるのかがわからない、という感じです。しかし、来た項目の型の種類によって色々と別々に処理はしなきゃいけないよね、みたいな。 たとえば、この項目を利用して画面に表示したいの

こんにちは！株式会社 CastingONEの岡本です。 はじめに 弊社のアプリケーションのフロントは現在、Nuxt2 から React(Next.js)にリプレイスを行なっています。移行するにたり、ドラッグ＆ドロップのライブラリを探していたところdnd kitが良さそうということになったので、このライブラリを深く理解するため、社内で勉強会を開催を実施しました。今回は、その勉強会で使用したサンプルを基に、dnd kit の使い方について解説していきます！ dnd kit とは dnd kit は、React のための軽量かつ拡張可能なドラッグ&ドロップのツールキットです。主な特徴は以下の通りです。 豊富な機能 カスタマイズ可能な衝突検出アルゴリズム、複数のアクティベータ、ドラッグ可能なオーバーレイ、ドラッグハンドル、自動スクロール、制約などが含まれる React 専用 useDraggabl

はじめに CastingONEでバックエンドエンジニアをやっている清水です。 この記事ではクリーンアーキテクチャについて学んだけど具体的にどのように実装すれば良いのかという悩みがあったので実装例をまとめてみた記事になります。 クリーンアーキテクチャで実装されたサンプル実装のうちGitHubのスター数が多いリポジトリをピックアップして、設計内容を紹介していきます。 具体的にどこにどんな実装をするべきなのかも含めて紹介していきます。 処理を一部省略して紹介するため実際の処理内容を確認したい場合はGitHubでご確認お願いします。 クリーンアーキテクチャとは クリーンアーキテクチャは、ソフトウェア設計の原則を適用して、依存性の方向性を逆転させ、ビジネスロジックから詳細（フレームワークやデータベース）を分離するアーキテクチャパターンです。これにより、テストしやすく、メンテナンス性が高く、柔軟性のあ

はじめに こんにちは！私がつとめている CastingONE という会社の SaaS には、テーブル形式のデータ一覧ページがあります。この一覧ページですが、最近データ数が増えれば増えるほど、じわじわとパフォーマンスが悪くなっていってました…。そこで今回は、そのリストデータ取得におけるパフォーマンス改善を行なった時の、パフォーマンス計測方法や検討内容、最終的な結果をまとめてみました。 対象読者 バックエンドのパフォーマンス改善の方法や改善の流れに興味がある方 ちなみに私がこの改善を行なった時のスペックですが、パフォーマンス改善については初心者寄りでした。「パフォーマンス改善って何それ美味しいの？」というレベル感だった当初、「達人が教える Web パフォーマンスチューニング 〜ISUCON から学ぶ高速化の実践」という本には基礎を知るところから大変お世話になったので、ご興味のある方はぜひ読んで

CastingONEでバックエンドエンジニアをやっている辻と申します。 最近子供がポケモンメザスタにハマっています。 一心不乱にボタンを叩き続けるその姿が、情けないようでたくましくもあります。 はじめに DB(MySQL)へのアクセスを伴うユニットテストに時間がかかっており、開発体験を損なっている問題が起きていました。 当時のUnit Testの結果です。開発言語はGoです。

こんにちは！ CastingONE の岡本です。 はじめに 弊社のフロントエンドは今まで Nuxt2 を使って開発を行っていました。しかし、Vue2 の EOL が今年の末までということで Nuxt3 にリプレイするか、React にリプレイスするかを検討した結果、後者の React にリプレイスすることにしました。弊社のフロントエンドエンジニアは自分も含め React の開発経験がほとんどなかったので、毎週 1 時間、React の理解を深めるための勉強会を開催することになりました。今回はその勉強会で行っていることについて紹介していきます！ やっていること Vue と React の比較 前のセクションで述べた通り、弊社のアプリケーションのフロントエンドは Nuxt2 で作られていたため、Vue2 に慣れているエンジニアが多数いました。そこで、Vue2 と React の書き方の違いにつ

こんにちは！CastingONE の岡本です。 変更履歴 2023/04/25 あくまで弊社で使っている Vue2 と React の開発で感じた違いについての記事でしたが、ユーザーからのコメントを受けて確かに誤解を受けかねない内容でしたので以下の点について修正しました。 記事タイトルの修正 注意文言の追記 はじめに 私は普段、フロントエンド開発を担当しています。弊社のフロントエンドは Vue の 2 系 で開発していますが、React に移行することになりました。私は今まで Vue でしか開発を行ったことがなかったので、これを機に React の勉強を始めました。その勉強を通じて感じた React と Vue の開発体験の違いについて書いていこうと思います。 React の良いと思った点 私自身 Vue の開発経験しかなかったので、React を勉強してみて Vue よりも良いなと思った