はてなブックマーク

この記事は？ 前回のアップデートからだいぶ時間が空いてしまいましたが、著者がこの1年Next.js周りの開発で着目していたのは生成AIによってスピードアップした開発ができないか どうか、ということです。 著者が思う大きなアップデートはv0を使ってのNext.jsの開発が盛んになってきた ことです。 v0を使ったコード生成 最も簡単なアプリケーションとして、掲示板の開発を考えてみましょう。 v0に対しては以下のような指示を与えてみます。 create a bulletin board site. Frontend should include header, and thread title, each thread include user name, comment この結果、生成されるファイルは以下の通りです: ・prismaに関するファイル群 generator client { p

この記事は？ アーキテクチャというとエンジニアによって定義が曖昧になりがちです。本来、システム構成やインフラ構成まで含めてアーキテクチャという意見も尤もですが、この記事ではNext.js(App router以降)のアーキテクチャ(フロントエンド、バックエンド)について考察していきます。フロント、バックエンドを分ける理由は、バックエンドにとってはデータベースを含むモデリングが重要になる一方、フロントエンドにとってはデザインシステムを含む整理が重要になってくるからです。 アーキテクチャの基礎知識 (※ ここは復習部分になるので、適宜読み飛ばしてください。 初めにアーキテクチャの基礎について触れるのは、基礎がわかっていれば応用が効きやすいため(敢えてServer Actionsにしていますが、それ以外の技術構成でも応用可能)です。 フロントエンドの実装でデザインシステムが重要なのは、効率良く作

この記事は？ 著者はエンジニアとしてAWS環境でのNextJSを用いた新規開発を行ってきました。その中で、ServerActionsは目を引く新技術です。本記事ではServerActionsを現場で使うテクニックを紹介します。既にAmplifyなどでも対応している内容なのでご気軽にお試しいただけます。 ServerActionsは何を解決するのか？ ServerActionsでは、form要素のactionに'use server'をつけた関数を渡すことで、JavaScriptでなくHTMLの機能だけを用いてサーバーにデータを送信することを可能にします。これによって、クライアンド側でJavaScriptがDOM処理を介する際に発生する、所謂ハイドレーションを待たずにユーザーが画面操作可能となるメリットを享受できることはServerActionsの1つの特徴です。何よりNext.jsがSer

この記事は？ 著者は、現在こそToCの開発に携わっているものの、SaaS開発に関しては3年以上の設計と実装の経験があります。SaaS開発を行う上で必須となるテナントの分離を行う理由は、他企業へのデータアクセスによるセキュリティインシデントを防ぐためです。この記事では、一般のSaaS開発においてマルチテナント×RLSが有力なアーキテクチャとなり得る理由を説明します。 シングルテナントvsマルチテナント 注) テナントの概念に入門する人のためのパート。適宜読み飛ばしてください。 そもそもテナント(tenant)とは、店舗や事務所などを借りて住んでいる人のことを指します。では、SaaSでテナントとは通常誰のことを指すのでしょうか？テナントとはSaaSが展開するサブスクリプションの契約主で、法人と契約しているSaaSであれば企業=テナントになり、個人と契約しているSaaSであれば個人=テナントにな

ここから、表で挙げた内容をそれぞれ解説していきます。 構築難度に関しては、関数を実装するだけで済むLambdaが最も簡単で、バッチ専用に特化されたサービスであるBatchに関しては比較的バッチ構築はしやすい印象ですが、ECSに関してはバッチに特化していないため、バッチ処理を行うようにカスタマイズする必要があります。 タイムアウト制約に関して留意すべきは、Lambdaの実行時間は15分までなので、それ以上を超える処理時間のバッチは実装できないことです。 起動•実行上のオーバーヘッドに関しては、Lambdaにはコールドスタートがあるため起動時にオーバーヘッドを考える必要があり、Batchではジョブをキューに送信して、最適化のために、ある程度のジョブがキューイングしてから実行しようするので、即時性を求める処理には不向きです。 既存バッチを移行したいケースがあると思いますが、Lambdaで動かせる

この記事は？ フロント技術の発展によってフロントエンドエンジニアの専らの関心は、SSR、サーバーサイドでHTMLを返す技術を追っていく流れになってきた。この記事では、SSRを使う理由とは何か？また、SSRを実現するためにインフラはどうなっているかを、AWSを例に解説したい。 筆者は？ ToCの事業会社でアプリの機能実装やAWSのインフラ構築などを担当しています。フロントに関心が強く追ってきた一方、SSRを実現する仕組みを理解するにはインフラ側も含めた横断的な理解も必要なので、インフラまで担当してきた知識から執筆することにしました。開発組織としても、SEOや速度最適の観点からフロントはSSRでの開発を進めていっており、重要度が高い印象です。 なぜMPA -> CSR -> SSRの流れが進んでいるのか？ 従来、Webアプリケーションの作成では、Ruby on Rails/ Laravelなど

この記事は？ JavaScriptのreduceは配列操作において有用な関数だが、慣れないとなかなか取っ付きにくい。配列を操作するためにmapやfilterなど駆使しなくてもreduceだけで解決することもあり、活用できれば便利な関数と言える。本記事ではその基礎と現場で使えるように具体例まで解説する。 対象読者 ・中級以上を目指すJavaScriptプログラマー ・reduceについてよくわからないけど知りたい人 map/filter reduceに入る前に、配列操作でよく使うJavaScriptのビルドイン関数であるmapとfilterを見ていきます。よく使うので、ドキュメントを見ずにすぐに引き出せるくらいが望ましいでしょう。 map 配列から一つ一つ値を取り出して、その値に由来する新しい配列を返す。 □□□□.map(□ -> ●) -> ●●●● [0, 1].map(val =>

この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下のようなことがわかることは前提にしています。 ・ref/reactive 値が監視され、変更が検知される状態のことをリアクティブといい、refはプリミティブな値をリアクティブにし、reactiveはObjectの値をリアクティブした変数を作る。 ・props Vueでは親から個コンポーネントにpropsを経由して情報を渡す。 ・v-model Vueではデータの変更とViewが同期する双方向バインディングを提供しており、v-modelを使って変数と入力フォーム

著者について ソフトウェアエンジニア。大学ではスピーチを学んで弁論術について理解を深めた。社会人になってからはToC営業も経験するなど話す経験を積んできた。また、かつて全国大会に出場を果たしたとあるディベートの競技大会において、OBとして実際に審判も行ってきた実績がある。 この記事は？ いわゆる「弁論術」によって働く力学を理解できておらず、対人折衝に疎いエンジニアの助けとなるような記事にするために、弁論術の方法と対策について述べています。一方一部でショッキングな内容も含まれますが、「建設的な方向に使うことだけ」を意図して執筆しています。 弁論術について 古代ギリシア、古代アテネ、古代中国など世界各地において発展を遂げてきた人の説得法を弁論術といい、現在でも実際のビジネスの現場においても使われることがあります。 弁論術と正しさについて メンバー同士バトルをするためではなく、チームをうまく回し

この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W

この記事は？ Web業界は個人主義が強い世界で、できるエンジニアだけ仕事が属人化することもある。一方会社での完全分業化が進み、かつ、リモート勤務が進んできたことで、自分がやっている分野以外よくわからないといった声を聞くことが多くなった(たとえば、フロントエンドしかわからない。とか、プロジェクト管理回りしかわからないなど)。著者はフロントエンド、バックエンド、PLそれぞれ現場で経験する機会に恵まれたので、この機を振り返って基礎を各分野にまとめてみた。 プロジェクトの進め方 ・要件定義: ビジネスの優先順位に基づいて作る機能を定義する ・基本設計: 要件を満たすために必要なシステム仕様を決定する ・実装: 設計で考えた内容をもとに実際に手を動かして作っていく ・テスト/ QA: 品質保証を行い、世に出せるかどうかの検証と修正 ・運用: 作ったシステムが止まらずに安定稼働させるように運用する 新

この記事は？ IT企業の業務形態には大きく分けて自社開発、受託企業、SES(ITエージェント)の三形態があり、それぞれが利益を上げるために日々企業として活動を行なっています。 自社開発: 自社プロダクトのグロースによって利益を上げていく企業。 受託企業: ITプロダクトの開発を請け負いそれによって利益を上げる企業。SESとの違いは請負契約が主体で、契約内容の完了によって利益を上げる仕組みになっている。 SES/ ITエージェント: 主に業務委託形式で各現場にエンジニアの労働力を提供し、そこから得られるマージンによって利益を上げていく企業。 本記事では、これらの企業が儲ける仕組みについてそれぞれ概観をしていきます。 著者は？ クライアントワークを中心とするソフトウェアエンジニアとして働き、エンジニアの採用活動に関わった経験と、正社員およびフリーランスエンジニアとしての経験がある。 対象読者

この記事は？ フロントエンド領域が複雑性を増してきており、経営効率化の戦略として部門としてフロント、バック、インフラで完全分業の体制を取る会社が増えてきました。それに伴い、完全未経験からフロントエンドエンジニアになる人たちも増えてきましたが、単にフロントの現場で開発をしているだけではエンジニアリング全般を含む広範な基礎は身につきにくく、能動的に全領域を勉強していく必要があります。その上で、フロントエンドに強みを持つエンジニアとしてバリューを発揮していくには、具体的にどのようなキャリア戦略があるのか？この記事では考えていきます。 著者は？ AWS環境でのフロントエンド開発中心に、エンジニア3年目。新卒2年間は自社サービス系の大企業でフロントエンドを担当。教育ではなく「崖に落とされて自力で登る」。裁量を得るには、先輩方を技術力で倒してロールをもぎ得る、といった競争主義が根付く徹底したハードボイ