この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
新卒エンジニア研修の講義資料を公開！技術力も圧倒的に成長するチーム開発研修とは | CyberAgent Developers Blog
2021年4月1日、サイバーエージェントに73名の新卒エンジニアが入社しました。今年のエンジニアコースの研修は、昨年同様にオンラインで実施。オンラインでも、技術はもちろんのこと、働く上で大切なチームワークや組織における役割についても学べるよう工夫を凝らしました。今回は、研修内容や工夫したポイントをお伝えするとともに、実際に使用した講義資料を公開します。 ■「チーム開発の準備ができていること」が研修の目標 約1ヶ月かけて行った研修では、６つの講義とチーム開発ワークを実施しました。研修のゴールとしていたのは、新卒エンジニア全員が「チーム開発の準備ができていること」。 サイバーエージェントでは、これから会社を牽引していくエンジニアに必要な要素として「チームワーク」を掲げています。当然ながら、個人でできることは限られています。チームがあることは、世の中を驚かすサービスをつくるためにプラスに働く。チ
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークス エンジニアブログ
はじめに こんにちは！ 社会人2年目を頑張っております、エンジニアの@b0ntenmaruです。 今年2月までリファクタリング専門チームにてcrowdworks.jpの技術的負債を返却するために奮闘しておりましたが、そこから現在まではユーザーの皆様に安心安全なサービスを提供するためにクラウドワークス 安心安全宣言のための施策を行っています。 リファクタリング専門チームについては以下をご覧ください。 engineer.crowdworks.jp qiita.com 施策による機能開発を行う際に直面した課題 施策では主にフロントエンドの機能追加をすることになったのですが、技術的負債によりスピードを維持しながら開発を続けることは困難な状態でした。 crowdworks.jpを取り巻くフロントエンドの技術スタックはざっくり書くと下記3つに分類できます。それぞれで発生している問題を簡潔にまとめます。
WebAssembly所感
WebAssemblyをちょっといじってみて思ったところをまとめてみます。 設計思想 WebAssembly/designに設計文書がまとまっています。特にHighLevelGoals.mdから読み取れるポイントは以下の4点です。 サンドボックス化された環境であること。 移植性があること。つまり、特定の実CPUアーキテクチャ等に依存しないこと。 少なくともC/C++の(十分に高速な)コンパイルターゲットとして機能すること。 安定した仕様を持つこと。 サンドボックスという観点からは、先行技術として以下のようなものが特筆に値します。 Webサンドボックス JavaScript および asm.js Javaアプレット Flash (ActionScript) NaCl, PNaCl Web以外のサンドボックス OSのユーザーランド、特にLinux userland これらのサンドボックスとの比
大塚流フロントエンド開発の歩き方
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。 フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認する プロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
Airbnbが採用するServer-Driven UIについて、私達はどう活かすのか｜rikika
まずはじめにこれは、デザインエンジニアとして生きてきた私Rikikaのポジショントークです。 エンジニアとデザイナーの垣根が少しでも低くなれば、最高のプロダクトが次々に生まれると信じています。気に入ってくれた方はフォローお願いします！ Server-Driven UI（SDUI）とは何かAirbnbのテックブログで出てきた、UIをサーバーサイドで定義し、クライアント側に返却するという手法です。 つまりクライアント側で状態管理やレンダリングのロジックを持たせずに、各プラットフォームでのUIの同一性をサーバー側で担保するというもの。 GhostPlatform というイケイケの名前で立ち上がったというプロジェクト、Airbnb社内ではかなり普及しているようです。 ※GuestとHostを大切にするためのシステムだからGhostらしい SDUIは何を解決しているのか例えば、コンポーネント間の並び
完全無料！JavaScriptのWeb開発手法を学習できるYouTube動画コースの厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptをベースにしたWeb開発手法のトレンドを無料で学習できる海外のYouTube動画コースをご紹介します！ フロントエンドからバックエンドまでクオリティの高い動画コースを厳選しており、GitやFirebaseなどの予備知識も含めて多彩なコースをまとめました。 英語だから…と言って見ないのは非常にもったいないレベルの動画ばかりなので、ソースコードの動きをよく見ながらぜひ挑戦してみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！ ■Web開発の基礎を学ぶ まずはWeb開発を始める前に抑えておきたい基本的な知識を学習できる動画コースから見ていきましょう！ 主に、HTML / CSS / JavaScriptの3点を重点
一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！ 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで！ というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ
フィードバックを送信 Terraform を使用するためのベスト プラクティス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このドキュメントでは、複数のチームメンバーやワーク ストリームで Terraform を使用した効果的な開発を行うためのガイドラインと推奨事項について説明します。 このガイドでは Terraform の概要は説明しません。Google Cloud で Terraform を使用する方法については、Terraform を使ってみるをご覧ください。 スタイルと構造に関する一般的なガイドライン 以下の推奨事項は、Terraform 構成の基本スタイルと構造を対象としています。この推奨事項は、再利用可能な Terraform モジュールとルート構成に適用されます。 標準のモジュール構造に従う Terraform モジュールは、標準のモジュ
脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
コンテナ技術とスケールするWebサービス ─ ペットから「ポスト家畜」の時代へ - Hatena Developer Blog
こんにちは。ブックマークチームWebアプリケーションエンジニアのid:yigarashiです。 はてなの技術グループでは「技術のアップデート」を目標に掲げ、チーム横断でさまざまな取り組みを行っています。そのひとつとして、週に1回、若手エンジニアが集まってモダンなWebアプリケーションの要件を整理する会があります。これは技術面の未来を担うという意味でtech-futureと呼ばれ、毎回テーマに沿った調査や議論が活発に行われています。 この記事では「コンテナ」をテーマとして開催された回の議事録を整理し、いわゆる「ペットから家畜へ」という言葉で語られるWebアプリケーションの実行環境の変遷と、コンテナ技術がもたらした2軸のスケーラビリティについてまとめます。そして最後に、コンテナ技術によって「ポスト家畜」とも呼べる新たな時代が到来したことを論じます。 コンテナ以前を振り返る サーバーの複雑な状態
kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。 プロジェクト背景 本記事で扱うプロジェクトは「kintoneマイクロサービス化Proof of concept(PoC)プロジェクト」です。 現在サイボウズの主力製品であるkintoneは大きなモノリシックなアーキテクチャになっています。 モノリシックなサービスに関わる人数が増えるに伴って、意思決定や開発速度の低下が課題となってきています。 モノリシックなアーキテクチャや組織によって起こる課題を、マイクロサービスとして切り離して小さくすることで解決ができるのではないかと考えました。マイクロサービス化にあたって、まずはPoCとして一部の機能をマイクロサービス化するプロジェクトを発足し、kinton
結構前からFlutterしたいなと思ってたけど、そろそろはじめれそうだったので、 今まで集めたリンクを整理してみた(´ω｀) Twitterリンクも多いけど、気にせずリンク集にしてみた(´ω｀) 公式ドキュメント Flutter Documentation - Flutter FlutterAppの基本 | Flutter Doc JP Language tour | Dart 導入 【Flutter】Firebaseの導入方法をまとめておく【スクショあり】 | ぐるたかログ 【Mac】Flutterの環境構築をまとめてみる | ぐるたかログ Flutter 1.0がリリースされたので概要から、環境構築、実装方法、アーキテクチャ、情報収集方法まで全部書く - Qiita Dart Flutter入門のためのDart入門 - Qiita パッケージ構成 mono0926/flutter_na
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
Reactチュートリアル1：犬画像ギャラリーを作ろう
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 Web 入門 HTML 入門 課題：手紙をマークアップする 課題：コンテンツページを構造化する CSS の第一歩 課題：新しい知識を使う JavaScript の第一歩 課題：バカ話ジェネレーター JavaScript の構成要素 課題：イメージギャラリー JavaScript オブジェクト入門 課題：バウンスボールに機能を追加する クライアントサイド Web API ドキュメントの操作 サーバからのデータ取得 本資料で学ぶこと 本資料では以下の内容を学びます。 React の基本 開発の始め方
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
一休.comレストランのエンジニアのkymmtです。 2023年度の下半期、一休.comレストランの開発チームでは開発プロセス改善に取り組みました。改善は小さい単位で徐々に進め、バックログの作りかたやカンバンの運用方法を改善することで、フロー効率の向上、開発ペースの把握、チーム内外からの進捗の見える化ができるようになりました。 この記事では、このようなインクリメンタルな開発プロセス改善の取り組みについて紹介します。 従来の開発プロセス 主に2023年度前半の開発プロセスは次のような形でした1。 プロダクトのリリースに必要なタスクが長いバックログとして存在し、ひたすらタスクを消化 その状況に課題を感じ、区切りを入れるために2週間のスプリントを導入 この時点では、スプリントは2週間ごとに状況を確認するためのもので、目標に対するふりかえりや、次のスプリントの計画を作るためのものとしては活用してい
【感想】『りあクト！ Firebaseで始めるサーバーレスReact開発』： #りあクト でmBaaSへ - Rのつく財団入り口
表紙は親密度の上がった笑いあう二人。尊い…(違) 技術同人誌の『りあクト！』３部作と続編も読んだので、5作目を読みました。 今回はこれまでのReact開発の知見を活かし、BaaSあるいはmBaaSの代表格Firebaseにバックエンドをお任せし、世の中に公開していく実際のサービスをサーバーレスで開発していく本となっています。今回もまたまた本文は会話形式で読みやすいです。 表紙は親密度の上がった笑いあう二人。尊い…(違) 第1章 プロジェクトの作成と環境構築 第2章 Seed データ投入スクリプトを作る 第3章 Cloud Functions でバックエンド処理 第4章 Firestore を本気で使いこなす 第5章 React でフロントエンドを構築する 第6章 Firebase Authentication によるユーザー認証 まとめ：Firebaseを使ったサーバーレス開発がわかる本
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
【Redux-Toolkit】Reactの状態管理ライブラリ基礎学習 ~第二部~ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Redux-Toolkitの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の2部目です。 前回の「Redux編」を読んでいない方は下記のリンクからお読みいただけると嬉しいです。 Reduxの仕組みを知ることでよりRedux-Toolkitの使いやすさが理解できると思います。 tech-blog.rakus.co.jp Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。 アジェンダは以下の通りです。 Redux-Toolkitとは 概要 構成図 Todoアプリ作成 仕様説明 プロジェクト作成 初期設定 ディレクトリ構成 Todo型の定義 Slic
株式会社パルケの手を動かすCTO、みつるです。 今年に入ってからリリースしたプロダクトでは、TanStack Query (旧React Query）を全面的に採用しました。 無料でずっと話せるミーティングアプリ パルケミート とにかく簡単につながる無料ビジネスチャット パルケトーク このツールを使い倒した結果、これはいちライブラリの枠に収まらない、開発の考え方そのものを変える神フレームワークだと思うようになりました。 今回はその神ってるところを紹介したいと思います。 TanStack Queryとは 公式のトップページより Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte パワフルな非同期状態管理ツールという事です。 ただのデータ取得＆キャッシュの便利ツールではない、という気持ちが
と言えば、zennで一番人気のあるの記事です。 Reactの堅牢な開発基盤を築きたいときに非常に参考になります。 @Meijin_gardenさんのこの記事が出たのは、ほぼ一年前。 今日までの間に、React v18.0のリリースというビッグなニュースもありました。 なので、2022年秋となると、一年前とは少し様子も変わってくるかもしれません。 「概ね賛成だけど、ここはこうしてみたい気もする」という部分もあります。 そんなわけで今回は、2022年秋バージョンのbulletproof-reactを一緒に考えていきたいです。 Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件の内容を前提に書いていきますので、まだ読まれていない方は、先に本家の記事を読まれると良さそうです。 改めて考えるbulletproof-reactの良さ ディレクトリ構成 Rou
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック
Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基本的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない 注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。） ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち
フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録されている便利そうなカスタムフックスをピックアップしてみました。 useHooksを使うにあたって カスタムフックスは自前で用意する方がカスタマイズ性高く安心して使える 調べれば同じ機能を持つカスタムフックのコードが出てくるので必ずしもuseHooksを使う必要はない プロトタイプ開発とかで速度が求められるなら導入するのはありかも 最初からこういうのに慣れすぎると開発理解があやふやになるのではといった議論はありそう こういうカスタムフック置くと便利だなという確認にも良さそう 結論
Reactの技術質問！！これで面接を圧倒すべし！
最近フロントエンドの副業案件の面接を受けていて、聞かれた技術質問や準備しておいた方が良い質問をまとめます。(実務経験 約2年) 今回何回か面接をしましたが、正直技術質問って普段普通に実装していてもそれを言語化して答えるのって結構難しいです。 面接はコミュ力ではなくて準備力です！ しっかり準備して挑みましょう！ 前提 面接を受けたときのスキル感は下記です。 フロントエンドが主戦場で、api周りはNode.jsで基本的なApiであれば対応可能。 インフラはそこまで経験なしといった感じです。 応募ポジション: フロントエンドエンジニア 応募先のフロントエンドスタック: Next.js, TypeScript 実務経験: 1年8ヶ月 言語、フレームワークの実務経験年数 Nuxt.js(Vue) ... 1年8ヶ月 Next.js(React) ... 半年(個人開発では2年触っている) TypeS
DDDを実践するための手引き（ドメインイベント編）
ドメインイベントを扱う実装は様々な流派があり、本記事ではなるべく一般的なものを取り上げたいと思っていますが、あくまで一例です。 実装例は Kotlin を使っていますが、他の言語でも同様の実装が可能です。 ドメインイベントとは イベントとは「過去に発生した出来事」であり、ドメインイベントは「ビジネスドメイン上で発生した重要な出来事を表すメッセージ」です。 （例: チケットが割り当てられた、注文がキャンセルされた） ドメインイベントはシステム内の状態の変化（=集約の状態の変化）を表現するものであり、通常は集約がドメインイベントの発生源となります。 用途 ドメインイベントは主に次のような目的で使用されます。 1. イベントの発生を起点に、別の処理をトリガーする ドメインイベントは、システムの異なる部分間を連携させるために使用されます。 ドメイン上の要件として「...したら...する」のようなフ
Trello、Asana、GitHub、Jira。チームによって管理ツールがバラバラな理由 - エス・エム・エス エンジニア テックブログ
タスク管理は、チームで仕事をしていく上で欠かせない一方で、永遠にカイゼンし続ける必要があるものです。チームごとに、どんなツールを選んでいるのか、それをどう利用しているのでしょうか。 エス・エム・エスでは、タスク管理の仕方もチームごとに裁量が与えられています。どのようなツールを利用してタスク管理をしているのか。「カイポケ」「カイゴジョブ」「ハピすむ」など、各サービスの開発チームに聞いてみました！ ツールの選定基準、利用の仕方、利用ツールのメリット・デメリットなど、開発チームによってどのような違いがあるのかを紹介していきます。 エンジニアチームごとに異なるタスク管理ツール 今回、話を聞いたのは、カイゴジョブ、ハピすむ、カイポケGengar、カイポケ障害、カイポケKSEE、カイポケSRE、カイポケ訪看など7つの開発チームのエンジニアメンバー。 それぞれのチームで使っているツールやチームのメンバー
このエントリーは 一休.comのカレンダー | Advent Calendar 2023 - Qiita の22日目の記事です。 レストランプロダクトUI開発チームの鍛治です。 一休レストランのフロントエンドを担当しています。 一休レストランでは Next.js App Router Remix を採用しています。 user-first.ikyu.co.jp 昨年の終わり頃から始まった一休レストランのリニューアルですが、フロントエンドは Nuxt v2 (Vue 2) から Next.js App Router (React) に、という大きな切り替えで、不慣れだった我々は React 初心者がひっかかる落とし穴を全部踏み抜いてきました。 例えば、チュートリアルに従って useState で変化する状態を定義して、最初はそれで全てがうまくいっていました。機能追加していく過程でいつの間にか一
この記事について この記事はアドベントカレンダー2021 Rust 四日目の記事です 概要 フロントエンドエンジニアである筆者がWASM（Rust）でWebアプリを作ってみたので、 その際の技術選定（主にビルド・開発補助周り）について 作ってみた雑感、特に「ぶっちゃけフロントエンドRust[1]ってどうなの？」という点 について書いていこうと思います。 TL,DR 2021年12月現在フロントエンドでのRustの採用は技術的に可能だがエコシステムが未発達なのでそれなりに技術力とコストを要求される とはいえ伸び代はかなりあるのでエコシステムが頑張ってくれれば、数年後には十分一般的な選択肢になってるかも（なってて欲しい） 主な対象読者 フロントエンドに携わる機会がある方々 この記事を読んでいただくことで・・・ フロントエンドという文脈におけるWASMの現状を知ってもらう フロントエンドをRus
元Googleエンジニアのメンターによる講義を公開 ──トヨタ自動車が実践する「Flutter」研修の内容とは？ - TECH PLAY Magazine
Googleが開発したモバイルアプリ用のフレームワークであり、SDK（Software Development Kit）であるFlutter。トヨタ自動車では、自動車のコックピットのUX/UI設計・開発フローの一部で、同ツールを採用している。今回の「TOYOTA Developers Night」では、GoogleやYouTubeで活躍した講師を招いて実施しているFlutterの研修プログラムや成果を紹介した。 ■登壇者プロフィール 関沢 省吾 氏 トヨタ自動車株式会社 コネクティッドカンパニー コネクティッド先行開発部 デジタルコクピットソフト開発室 グループ長 名古屋大学大学院を修了後、2007年にトヨタへ入社。Lexus LFAをはじめ、各種車両の電子プラットフォーム開発や、TOYOTA LQのAIエージェント開発へ従事。2020年より現職。 Tim Mansfield氏 itali
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
こんにちは ハタ です。 Mirrativのインフラ内で実際に開発・運用している内製のRedisサーバについてお話したいなと思っています。 前回の記事 は、今回紹介する内製Redisサーバで起きたメモリリーク対策に関するお話しとなっておりますので、もし未読であればあわせて読んでいただければと思います。 今回はなぜ Redis サーバを内製することにしたのかの経緯や実装についての簡単な紹介が出来たらなと思っています Redis 導入の経緯 課題感: 揮発しないでほしい 課題感: 生存時間が短いデータを保持したい 課題感: 日次データをなんとかしたい 候補 Redis Cluster のヨシアシ: slot 管理 Dynomite のヨシアシ: sharding/replication radisha = Raft + Redis + HA Raft クラスタ コマンドとデータストア レプリケ
mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
iOSDC Japan 2022 day2 https://fortee.jp/iosdc-japan-2022/proposal/a9d5b12e-6170-4f1c-be93-9412898523a0 正規化されたキャッシュによる実装例: https://github.com/rockname/MastodonNormalizedCacheSample
フロントエンドエンジニアの国定です。 この記事では、TypeScript + Vue.js で開発しているフロントエンドに今年からドメイン駆動設計（DDD）を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。 課題 アーキテクチャ Domain Service Store（Vuex） UI（Vue.js） 軽量DDDに陥らないために まとめ 課題 Vuex（Store）の責務は、エラー判定などのドメインロジック・データの永続化・API の呼び出しなど、State 管理のほかにも多岐にわたっています。UI の改善や機能追加など変化の多いフロントエンドでは開発が進むにつれ Vue + Vuex のあちこちに同じ処理が散在してしまいます。 テックタッチでもメンテナンスを繰り返す度にコードの複雑さが増し、機能追加や修正に時間がかかるようになってきました。去年
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebRTC と React を組み合わせるなら Flux 設計が有効
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog
Terraform を使用するためのベスト プラクティス | Google Cloud
Flutterに入門する前に集めたリンク集 - くらげになりたい。
Nuxt 3 を今すぐオススメしたい 15 のポイント
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
開発プロセスをインクリメンタルに改善する - 一休.com Developers Blog
TanStack Queryは神フレームワーク
本気で考えるReactのベストプラクティス！bulletproof-react2022
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
React初心者がReactを学ぶために使用したサイトや書籍
【React / useHooks】開発不要で使える便利なカスタムフックス20選
一休レストランの XState 導入記 - 一休.com Developers Blog
フロントエンドエンジニアがWASM(Rust)でWebアプリを作ってみた
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
Raft + Redis な内製Redisサーバの紹介 - Mirrativ Tech Blog
【脱Redux】SWRやReact Queryを使った状態管理戦略
Vuex + DDD のアーキテクチャを考える - Techtouch Developers Blog