フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
こんにちは。@chaspy です。プロダクト開発部の技術戦略グループのマネージャをしています。 技術戦略グループでは、日頃開発する上での課題の投げ込みや議論、解決するための計画をボトムアップで行っています。技術戦略グループの活動については過去のアウトプットもご覧ください。 blog.studysapuri.jp また、本稿のテーマである、組織やシステムの状況を把握するための Fact 収集については技術戦略 DevOps WG が担当しています。以前発表した資料もご覧ください。 このように、技術戦略グループではエンジニア1人1人が課題だと思うことを表明、宣言し、その課題をトリアージすること、および課題を評価するための Fact の発見・提供を行う仕組みが組織としてボトムアップで行える状態になっています。一方、開発部長として、事業戦略と結びつける形で技術戦略を策定する際には、現場のエンジニア
銀の弾丸ではないので良し悪しあるのは当然として、それを差し引いても以下の2つの要素があるのではと思った。 なんとなく使ってもメリットが十分得られない RESTでできてたことができなくなる（※ちゃんと調べればできる） なんとなく使ってもメリットが十分得られないWeb界隈は良くも悪くも新しい技術をとりあえず使ってみるところがあると思っていて、そこがGraphQLは十分に事前知識を持って導入しないとメリットが薄いところとミスマッチを起こしてネガティブな意見が出るのかなと思う。 GraphQLはもともとFacebookがReact, Relayとの組み合わせで使い始めたもので、クライアントライブラリとしてのRelayと、IDやページネーションについての追加仕様を公開している。ライブラリとしてのRelayは使わなくても仕様に乗っかることはできるのでそれをRelayスタイルと言ったりする。出典を忘れた
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい | フューチャー技術ブログ
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にIS
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
RAG構築のためのAzure OpenAI Serviceリファレンスアーキテクチャ詳解 | SIOS Tech. Lab
◆ Live配信スケジュール ◆ サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。 ⇒ 詳細スケジュールはこちらから ⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください 【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜 Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。 https://tech-lab.connpass.com/event/311864/ こんにちは、サイオステクノロジー武井です。今回は、「RAG構築のためのAzure OpenAI Serviceリファレンスア
package by feature のススメ
最近、package by feature というディレクトリ構成が様々なところで出てきています[1]。例をあげると、これらで見れます。 next.js の app router bulletproof-react 他人がはやく読めるコードを書くために しかし、package by feature について簡潔にまとまった資料がまだないため、人に紹介するときに不便です。そこで今回は package by feature とは何なのか、何が良いのかについてまとめます。 package by feature とは? package by feature とは、ディレクトリを feature 単位でまとめる手法のことです。 # package by feature src/ └ feature/ └ recordList/ (記録を表示するための機能群) ┝ DailyAverage.tsx ┝
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
みなさん、はじめまして！ 東京ガスCX推進部デジタルマーケティンググループでエンジニアチームのリーダーをしております杉山です。 このたび、当チーム（以下、内製開発チームと呼びます）での技術的な取り組みについて紹介するため、 Tech Blog を開設しました！ 実は私たち内製開発チームは note の方でも投稿しているのですが、このブログではソフトウェアエンジニアの内容に特化したものを投稿していく予定です💪 東京ガス内製開発チームって？ 私たちのチームは myTOKYOGAS を中心としたお客さま接点のあるプロダクトを扱っております。23年11月、 myTOKYOGAS のリニューアルにあたって、私たちのチームはフロントエンド部分をフルリプレイスしました。 チームや部署、内製開発を始めた経緯については、ぜひ以下の note もご覧いただけたらと思います。 note.com myTOKYO
2024年3月15日の一粒万倍日に、mosya ReactというReactを学習できるサービスをリリースしました。 こちら1年間の開発期間を経て、ようやくリリースできました！ mosyaの開発期間と合わせると約2年間の開発期間を経てのリリースとなります。 いやー、長かった！ 良かったら下のリンクから試してみてください！ どんなサービスか mosya ReactはReactをオンライン上で学習できるサービスです。 エディターに書いたコードがリアルタイムにプレビューできるようになっていて環境構築なしでReactを学習できます！ 採点機能が搭載されているのでReactを自学習したい方におすすめです！ このサービスの開発で特に頑張ったのが以下の特徴です！ 最新の技術にキャッチアップしている ライブラリの型がエディター上で確認できる Biomeを動かしていてリントエラーがエディター上で確認できる 最
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
不要コードを継続的に削除し、技術的負債に対抗する
paizaでWebエンジニアをやっています藤田と申します。 「今期は技術記事6本書きます」と自ら目標にしておいて、4か月ぐらい記事を滞納していた良心の呵責に耐えかねて投稿いたします。 今回の記事では、不要コードの削除に関するモチベーションをあらためて整理するとともに、以前noteで私が執筆した記事の続編として実運用について説明します。 CI/CDであまり語られない課題 -不要コード- プロダクション開発を進めるにあたり、自動テスト(ユニットテストやブラウザテスト)を書くとか、CIやlintingはほぼ常識化していると考えます。 自動テストを書けば、ある挙動が維持されていることを保証できるとともに、コードパスの検証状況(カバレッジ)を可視化できます。 実装とテストがどんどん増えていき、正常系と異常系の動作は十分に確認できたとします。 一方時の試練に耐えられず、不要となったコードはどうなるので
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
Draft UI
Draft UI is a collection of simply designed React components focused on making web accessibility as easy as copy & paste.
Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre
10年もののRailsアプリの持続可能性を求めて -なぜ初手でCoffeeScript廃止を選んだのか- - Money Forward Developers Blog
シニアソフトウェアエンジニアのusadamasaです｡ マネーフォワード クラウド会計とそれに関連するマイクロサービス群の開発運用を担当しています｡ 本記事では､クラウド会計という10年もののRailsアプリの持続可能性をいかにして確保していくかの取り組みをご紹介します｡ TL;DR 私が所属するチームでは､クラウド会計の開発運用における課題を整理し､それぞれの課題に対して解決策を検討し､実行するための取り組みを進めています｡ 最初にクラウド会計の全体の構造を明らかにし､課題を可視化､組織の共通認識としました｡ その上で銀の弾丸を求めるのではなく､有期かつ漸進的な改善のプロジェクトとして計画することが成果に繋がります｡ クラウド会計の現状 クラウド会計はマネーフォワード クラウドの代表的なプロダクトの一つです｡ 2013年にリリースされてから10年､多くの機能追加や改善を重ね､現在では沢山
TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents （以下、RSC）について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
「TypeScriptの人」として世の中から認知されるまで。技術記事によって情報発信を続ける意義 - Findy Engineer Lab
みなさんこんにちは。uhyo (@uhyo_) です。現在、 株式会社バベルにプリンシパルエンジニアとして所属しており、主力プロダクトであるaileadの設計・開発業務を行なっています。 この記事を読んでいる方の多くは、私のことを「TypeScriptの人」としてご存知かもしれません。私は2018年ごろからTypeScriptを中心とした記事執筆活動を開始しており、多くはQiitaやZennに投稿されています。また、Qiitaの記事が編集者の目に留まったことをきっかけとして、雑誌にJavaScriptやTypeScriptの特集を執筆し、さらにはTypeScriptの入門書を出版することになりました。 また、フロントエンドエンジニアとしてキャリアを始めた関係から、私はReactの記事も多く執筆しています。ありがたいことに、その方面でも情報発信者として一定の評価を得ているようです。 総じて、
近年，国内外の企業および研究機関において大規模言語モデルの開発競争が激化している．それに伴い，大規模言語モデルの性能を最大限に引き出すための研究も活発に行われており，大きな発展を見せている．本チュートリアルでは，自身の研究や業務で大規模言語モデルを使いたいと考えている初学者を主な対象とし，Chain of ThoughtやReActを始めとする大規模言語モデルを使うために役立つ技術や知見を最新の研究成果に基づいて紹介する．
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
2023/12/13 aria-disabledの付け方を改良 2023/12/11 タイポ修正 2023/12/08 next/linkのhrefにundefinedを渡すとエラーがでるため、disabledにする方法を修正 <Button asChild ref={}>とrefを指定できてしまっていたのを修正 セミコロンをつけないように 2023/12/07 タイポ修正(priamry -> primary) import { cloneElement, forwardRef, isValidElement } from "react" import styles from "./style.module.css" import clsx from "clsx" export type ButtonProps = { variant?: "primary" | "secondary"
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
フロントエンドの真実
起源 まだフロントエンドという言葉が生まれる前。 古代のプログラマー達はサーバーで一画面ずつ丁寧にHTMLを構築していた。 ところがあるとき一人のプログラマーがブラウザ上で動的にHTMLを書き換えることに成功する。 これに多くのプログラマーが続いた。 次第に勢力を増していった彼らはサーバーを離れ、自らをフロントエンドエンジニアと名乗り、サーバーに残ったもの達をバックエンドエンジニアと呼ぶようになった。 きっかけ 先日こんな投稿がとある掲示板（ここではXと呼ぶことにしよう）に寄せられた。 たしかに、Server Actionsを使って書くReactと、いにしえのPHPは非常によく似ている。 ふと10年近く前の出来事を思い出した。 それは次のような同僚との会話だった。 👨🏻💻「React触ってみました。」 👨🏻💼「え、どんな感じやった？」 👨🏻💻「なんかPHPに近い感じ
WordPressの小ネタ集 - Qiita
この記事は、「CMS Advent Calendar 2023」の21日目の記事で、WordPress に関してもしかするとあまり知られていないかもしれない事を、とりとめもなく独断でまとめたものです。 特に、ここ数年 WordPress に触れておらず、今の WordPress はどうなっているのか? という事を知りたい方向けの情報も少し盛り込んでいます。 クラシックエディターはいつまで使えますか ? Classic Editor プラグインの説明には、この記事を書いている時点で「Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。」と記載されています。 それでは2025年以降、クラシックエディターが使えなくなる可能性があるのでしょうか ? 自分は、クラシックエディターは残り続ける
Renovateを使ってフロントエンドのバージョンアップを改善した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
How React 18 Improves Application PerformanceLearn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step
個人開発を始めてみよう──「失敗」を避ける大事な考え方とは？
はじめに BASE株式会社でシニアエンジニアを務めているプログラミングをするパンダ（@Panda_Program）と申します。本連載は「フロントエンドカンファレンス沖縄2022」で私が発表した内容[1]を記事として再構成したものです。 対象読者 本連載の対象読者は、個人開発に興味があるソフトウェアエンジニアの方です。 個人開発に「失敗」しないための考え方 ソフトウェアの個人開発とは、ソフトウェアエンジニアが自分のプライベートな時間を使ってWebサイトやスマートフォン向けのアプリを作成、公開、運用する趣味活動です。では、本記事のタイトルに含まれている「失敗」という語の指す内容とは何でしょうか。本連載で私はそれを「学習またはリリースを目的としたときに、その目的が達成できていないこと」と定義したいと思います。 個人開発における最大の意思決定はリリースの有無です。自分が開発したソフトウェアをリリー
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック 2024年6月3日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。前回は、私の技術発信の遍歴をご紹介するとともに、私の考える、技術発信に必要な能力や考え方をご紹介しました。 今回は、より具体的なテクニックやその背景をご紹介します。すでに技術発信をしている方や、これからやろうと思っている方はぜひ参考にしてみてください。文章のテクニックと、登壇（登壇資料）のテクニックをあわせてご紹介します。 keyb
1年間CTOとEMを兼任して考えたこと
はじめに 昨年2023年は、株式会社NoSchoolのCTOとして、オンライン家庭教師マナリンク（https://manalink.jp/ ）に関わる開発、エンジニアリングマネージャー、採用、UIデザイン、運用保守、PMなどを兼任していました。 本記事では、エンジニアリングマネージャー（以下EM）を兼任していて考えたことをまとめていきます。 シリーズA前後のスタートアップという特異な状況かつ、マネジメントしたメンバーも3人と小規模なためあまり参考になる知見か分かりませんが、現時点での自分の考え方の備忘録的な意味も込めてまとめておきます。 考えたことまとめ それでは早速矢継ぎ早に考えたことをまとめていきます。 テキストによる情報量の欠落を想像するようになった 直接会話することと、文字でやり取りすることを比べると、つくづくテキストって情報量が欠落するなぁと思います。ソースレビューのコメント1つ
「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita
3.インフラ（全体構成）について ここから技術的なことについて話していきます。 まず大前提として、プロジェクトの全体構成は、Happiness Chain の卒業課題の条件に基づいて決めれらていました。これらの条件には以下が含まれます Rails APIモード / Reactで完全SPAのポートフォリオを作る。 本番環境と開発環境にDockerを使う。 本番環境にはECS Fargateを使う。 GitHub Actionsを使ってAWSに自動デプロイする。 Terraformでインフラをコード化する。 なので、これに倣って実装しています。 アーキテクチャの全体像 フロントエンドはVercelにデプロイして、バックエンドはAWSのECSにデプロイしています。 ブランチ運用は、GitHub flowを採用しています。 プルリク時にテストが走り、mainブランチにマージされるとデプロイされる感
これまで3年ほどWebエンジニアとして働いており、いろいろあって今年からFlutterでモバイルアプリを開発しています。 Flutterを使い始めて半年が経ったので実際に使ってみて感じたいいと思ったところとイマイチだと思ったところを紹介したいと思います。 Flutter とは？ Flutter は 複数のプラットフォームに対応したオープンソースなフレームワークです。現在では、Android・iOS・Web・Windows・MacOS・Linuxに対応しており、単一のコードで複数のプラットフォーム上で動作可能なアプリケーションを作成することができます。 実際に使って感じたいいところ、イマイチなところ いいところ 学習コストは意外と高くない Flutterでは、Dartという言語を使います。 個人的な感想としては、Javascript, Typescript に似ているなーと思っています。 な
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
About Nue 鵺（ぬえ）。 猿の顔、タヌキの体、蛇の尻尾、虎の脚を持つ妖怪です。 日本人ならNueと聞いた場合、思い浮かべるのは↑かと思うのですが、 これは先日リリースされた、フロントエンド開発ツールセットです。 ＊「Nue」はドイツ語で、「新しい」という意味だそうな *「Nue」はドイツ語の「neu」に由来しており、英語で「新しい」という意味だそうな 開発者はTero Piirainenという方で、 現在彼１人で開発しています。 ここを見ると、「Webの開発方法が変わるかも」と かなりすごいことが書いてありますが、どんなものなのか見ていきましょう。 Nueとはなんなのか？ 公式を見ると、↓のようなことを言っています。 React、Vue、Next.js、Vite、Astroの代わりになる NueはSPAMPAの両方に対するサポートを備えたWebアプリケーションビルダーである Nue
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術戦略策定のための Fact 収集術 - スタディサプリ Product Team Blog
GraphQLのよくないところ｜adwd
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
【Next.js】実務でapp routerに移行した所感
Remix vs Next.js - React Japan
ESLint を使い倒す（おすすめルール紹介）
はじめまして！東京ガス内製開発チームです！ - 東京ガス内製開発チーム Tech Blog
Reactを学習できるサービスmosya Reactの技術的な紹介
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
TypeScript Clearly & Quickly
スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
React Server Components は Web アプリ開発にどのような変化をもたらすか
IBIS2023チュートリアル「大規模言語モデル活用技術の最前線」
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
ReactプロダクトにおけるButtonコンポーネント実装の最適解を探し続けた結果
「実装例から見る React のテストの書き方」をアップデートする
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
How React 18 Improves Application Performance – Vercel
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック
Flutterってどうなん？実際に商用アプリ開発で使ってみた感想 - Qiita
2023年版！エンジニア必見のチートシート集 - Qiita
あたらしいフロントエンド開発ツール「Nue」 | DevelopersIO
検索システムのフロントを SSR・Remix で作り直した - Unyablog.