Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
Cloudflare PagesにそれなりにちゃんとBasic認証をかける | おそらくはそれさえも平凡な日々
前回の、社内プライベートポッドキャスト実現方法で、ポッドキャストサイトを静的配信しつつBasic認証をかけるというアイデアを書いた。しかし、Basic認証などなかなか使わなくなり、ネイティブでサポートしている静的ホスティングサービスも少ない。今回はCloudflare PagesのFunctions機能でリクエストをラップするミドルウェアを書けば実現できることが分かり、その方式を採用することにした。多少実装必要になるのと、認証周りを自前で書くのはあまりやりたくはないが、廉価に比較的省力で実現できるので受け入れる。 ネット上にいくつかサンプルは見つかるが、今回実装するにあたっては以下の点を留意した。 コード内に認証情報を載せない 複数ユーザーのIDとパスワードを管理できるようにする パスワードは定数時間比較してタイミング攻撃を防ぐ これらを以下のように解決することとした。 認証情報は環境変数
React Aria で実現する次世代のアクセシビリティ
Web Developer Conference 2024 (2024/09/07) での発表資料 https://web-study.connpass.com/event/321711/
アクセシビリティが考慮された React Aria のドラッグアンドドロップ
アクセシビリティが考慮された React Aria のドラッグアンドドロップ 2024.09.07 React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。 ドラッグアンドドロップは、ユーザーが UI の要素をドラッグして別の場所に移動する操作です。Web アプリケーションにおいて、ドラッグアンドドロップはユーザーが直感的に操作できるため、多くの場面で利用されています。例えばタスク管理アプリケーションにおいて、タスクをドラッグして進行状況を変更したり、ファイル管理アプリケーションにおいてファイルをドラッグしてフォルダを移動する機能などがあります。 従来のドラッグアンドドロップ機能はマウス以外での操作
ユーザーに刺さるUIデザイン実用テクニック37選
UI Tipsで公開された「UI Tips for Landing Pages & Apps by Jim Raptis」より許可をもらい、日本語抄訳しています。 シンプルなUIデザインテクニックで、より良いユーザーインターフェースをデザインし、ユーザーが満足する方法を一緒に学びましょう。 現役UIデザイナーのジム・ラプティス氏が実際の製品でテスト、検証した実用度の高いテクニック集なので、手軽に試すことができ、効果的にホームページやアプリのUIを改善できます。 時間がない人のために、今回紹介するテクニックのまとめがこちら。 各項目では実際のサンプルをつかって、「良い例」と「悪い例」を比較。すぐできる解決策と一緒に詳しく紹介しています。 ユーザーが恋に落ちるUIデザイン実用テクニック1. ソーシャルログイン2. より良いメニューデザイン3. グーテンベルグの法則4. モーダルの削除5. 不揃
システム開発の成功を導く勘所 | 外道父の匠
最近、システム開発はこうあるべきだよなって考えていたのと、他所のエンジニアリング文化についての記事を見たことから、自分にとっての今の理想と現実の間について整理して吐き出しておきたくなりました。 所詮理想ではあるものの、自身の環境におけるベストに近づけようとする思考や、ベストに程遠い状況を認識する、ということには意味があるのではないかと思う次第です。 はじめに 自分は100％WEB系出身ですが、全く異なる文化である SIer 方面のお話を読むのはわりと好きで、これらは興味深く読ませてもらいました。 誰も教えてくれないSIの本質、SIerの世界観 日本のSIerの技術力の低さの要因から考えるアメリカソフトウェアの強さ – きしだのHatena プログラミングが設計作業であるという話 – きしだのHatena ソフトウェアの「詳細設計書」とはなんなのか – きしだのHatena だいたい SIe
コードレビューの仕方
コードレビューの仕方 このセクションでは、長年の経験に基づいて、コードレビューをする最良の方法に関するいろいろな推奨事項を説明しています。 各ページをひとまとめにすると一つの完全なドキュメントになりますが、便宜上、多くのセクションに分割しています。 全部を読む必要はありませんが、多数の感想によれば、ドキュメントを通読するのが個人としてもチームとしても非常に有益です。 コードレビューの基準 コードレビューの観点 レビューで CL を閲覧する コードレビューのスピード コードレビューコメントの書き方 コードレビュー中の取り下げに対応する CL 作成者のガイドも参考にしてください。こちらは CL をコードレビューしてもらう側の開発者のための詳細なガイドです。
Reactが初回マウントされるまでの仕組みを理解する
今回はReactが初回マウントされるまでの実装を私自身が学習した流れに沿って解説したいと思います。「React Internals Deep Dive」というブログ記事がReactの内部実装を知るのに大変参考になります。 また、「React Internals Explorer」を使うとReactが実行するプロセスを視覚的に理解することができるため、大変おすすめです。 はじめに 本記事では以下の構成に従って解説をしていきます。 前提として理解するべき要素 FiberNodeの種類 4つの実行フェーズ currentとworkInProgress Trigger フェーズの実装 Render フェーズの実装 Commit フェーズの実装 初回マウントに関する内容は主にこちらのブログを参照しています。 なぜ初回マウントに限定するのか 今回はReactの実行の中でも初回マウントに限定して解説をし
コードレビュー開発者ガイド
コードレビュー開発者ガイド はじめに コードレビューとは、コードの作成者以外の人がコードを調べるプロセスです。 Google ではコードとプロダクトの品質を維持するためにコードレビューを実施しています。 このドキュメントは Google のコードレビューのプロセスとポリシーに関する正規の解説です。 このページでは私達のコードレビュープロセスを概観します。このガイドはさらに二つのドキュメントに分けられます。 コードレビューの仕方: コードレビュアーのための詳細なガイド CL 作成者のガイド: CL をレビューしてもらう開発者のための詳細なガイド コードレビュアーはどんな観点でレビューすべきか？ コードレビューは次の観点で見るべきです。 設計: コードはうまく設計され、そのシステムにとって適切か？ 機能性: コードは作成者の意図通りに動作するか？ユーザーにとってコードの挙動は適切か？ 複雑さ:
フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ
2024/08/24(土)で開催されたフロントエンドカンファレンス北海道 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、fortee や資料に記載されていたり、資料公開の投稿で分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 タイムテーブル 本イベントでは2つの会場でそれぞれ講演がありました。 便宜上、以下のように A, B と表します。 カケハシ（8F）：A LINE ヤフー WOW ルーム（6F）：B 11:00 - A - Webの潮流から考える、フロントエンドの溢れんばかりの魅力とフロントエンドエンジ
実例で学ぶFlexboxとCSS Gridの使い分け – TAKLOG
タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方
賃貸でもできる！キャットウォークの種類や壁などに設置する時の注意点を解説 - 住まいのお役立ち記事
猫の運動不足やストレス解消のために、キャットウォークを設けるのが有効。しかし、賃貸の場合壁や床が傷つかないか心配…という人も多いのでは？そこで、突っ張り型や据え置き型など賃貸でも設置可能なキャットウォーク種類、壁などに設置する時の注意点について、猫との幸せな暮らしを提案するペットライフスタイルに聞きました。おしゃれなキャットウォークを設けて、猫との幸せな暮らしを楽しみましょう。 キャットウォークとは？ キャットウォークとは、猫が室内を退屈せず過ごす設備 キャットウォークとは、高いところにある猫の通路のこと。壁や窓サッシの上、欄間の近くなどに専用の棚を設けたり、角材や丸太を設置するなど、さまざまなものがあります。キャットウォークを移動するために壁に取り付けるキャットステップとセットで設けられることが多く、ステップやハンモックなど垂直方向に配したキャットタワーなども含めて猫が室内で退屈せずに過
#Arduinoを使った制御実験の基礎解説🤖 #実験 - 制御工学ブログ
この記事ではArduinoを用いた制御実験を進めるにあたって必要な事項について説明します。Arduinoは、安価なIoTデバイスであり、広く利用されています。制御工学教育でもArduinoは有用です。ここでは、実際にArduinoを利用するにあたっての基礎事項を一通り説明します。制御実験について説明した動画や関連記事リンクは最下部に置いています。 Arduinoとは スケッチの基本構造 setup()関数 loop()関数 スケッチの主な用語 ライブラリ ピンモード デジタル書き込み（digitalWrite） アナログ書き込み（analogWrite） デジタル読み取り（digitalRead） アナログ読み取り（analogRead） プログラム例（スケッチ） Arduinoを制御器として使う 制御入力 制御出力 離散時間系と制御周期 Arduino UNOのスペック その他の特徴 制
年100件ほどプロポーザルを読んで作った伝わりやすいプロポーザルのチェックリスト｜さとりゅう
この記事についてこの記事では、日本のスクラム系カンファレンスのプロポーザルを勝手に沢山読んできた筆者（さとりゅう）が考える「内容が伝わるプロポーザルの書き方」を提案します。筆者がこれまでに読んできた中で、講演内容がどのようなものなのかを伝える目的であるプロポーザルが、その役割を果たすのに不十分な記述のため、本当は素晴らしい講演内容が伝わらずに終わってしまっているのではないか、ということを危惧しています。そこで本記事では、講演内容がわかりやすいと読み手として感じたプロポーザルを思い出しながら、それがどのような構造であったのかをチェックリスト形式で提案します。このチェックリストを用いて、より多くの伝わるプロポーザルが生まれることを願っています。 動機先日、 株式会社カケハシの小田中さんが素敵なスライドを公開していました。これによって、多くの人がカンファレンスのプロポーザルを書こうというモチベー
TypeScriptで「選択肢」の定義をEnum的な定数にまとめる――satisfiesとSSoTもあるよ
ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)
署名とゼロ知識証明の初歩
Kernel/VM探検隊@東京 No17 https://kernelvm.connpass.com/event/321962/
Java Champion・谷本心が3段階の技術レベルに合わせて読んでほしいJava本6選
谷本 心 EverforthとAcroquestの2社で正社員として働くエンジニア。仕事のかたわらでコミュニティ活動も行っており、日本Javaユーザーグループの代表を務めるほか、アメリカで開催されたJavaOneやSpringOneなど国内外のイベントで登壇。その実績から日本で3人目の「Java Champion」に任命された。著書に『Java本格入門』（技術評論社）。趣味は対戦格闘ゲームと、BABYMETALを追いかけて世界中を旅すること。 X: @cero_t Blog: https://cero-t.hatenadiary.jp/ 1. 『Java本格入門～モダンスタイルによる基礎からオブジェクト指向・実用ライブラリまで』（谷本心、阪本雄一郎、岡田拓也、秋葉誠、村田賢一郎 著） 2. 『プロになるJava―仕事で必要なプログラミングの知識がゼロから身につく最高の指南書』（きしだなおき
おいでよMarkdown界隈へ -生成AIでスライド作り-
はじめに 私はMarkdownで文章を書くのが好きです。もちろんこの記事もVSCodeを開いてMarkdownで書いています。 おそらくエンジニアであればMarkdownとの出会いはGitHubにReadMeを書くことなんじゃないかなと思います。 私もプログラミングを勉強しはじめたとき、 簡単なデータベースの関係図を書くのが課題だったような気がします。 ご存じの通りMarkdownは文字だけで表が書けたりして h2やh3などの見出しを#の数で表現できたり自分の中ではかなり感動したのを覚えています。 今現在は生成AIでの出力にMarkdownが使われているので エンジニア以外にもすっかり馴染んだと思いきや... 意外とまだまだMarkdownが知られていないなと感じることがありました。 この記事ではまだMarkdownの魅力に気がついていない人に向けて 自分なりのMarkdown愛を語ってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
売り上げに直結するデザイン施策 | ドクセル
Next.jsの考え方
