複数の Next.js アプリケーションをローカルで同時起動する際にポート番号を覚えきれない問題を nginx で解決する - Uzabase for Engineers
こんにちは、株式会社アルファドライブ @takano-hi です。AlphaDrive で Web フロントエンドを中心に設計・実装などを担当しています。 今回は、弊社のローカル開発環境で localhost:xxxx といったポート番号が増え続ける問題を解決した話をまとめてみました。 背景 弊社では Next.js を利用したフロントエンドアプリケーションを複数開発しており、今後も増える見込みがあります。 通常 Next.js アプリケーションは、ローカル開発環境の起動時に localhost:3000 にホストされます。 これが複数になると、2つ目以降はそのままではポート 3000 番が占有されていることによるエラーが発生するため、別のポート番号を指定する等の方法で回避することが多いと思います。 さらに、それぞれのプロジェクトごとに Storybook を用意したりすると、必要なポート
タイミーに入社し、プロダクトデザインチームを組織化するために実行したこと｜Yasuhiro Yokota
こんにちは、横田です。2024年2月、タイミーにプロダクトデザインマネージャーとして入社しました。 タイミーには、コミュニケーションデザイングループとプロダクトデザイングループが存在し、それぞれマネージャーが在籍しています。 私はハーフコミットの2週間と、正社員3週間がたったところで、プロダクトデザイングループの組織化キックオフをおこないました。ここまでにとったアクションを紹介したいと思います。 これまで一緒に働いてきた方には、元気でやってますということで読んでもらえたらと思います！ 最初は最初で大変さて、最初のミッションはマネージャー不在だったデザイナー組織を組織化するというものでした。お任せくださいといって入社したものの、インプットすること・考えることが盛り沢山です。 このポジションはこれまで存在しなかったため、組織運営の戦略をたてつつ自分で業務定義をおこなっていく必要があります。 そ
OpenAPI仕様 Version 3.1.0（YAML版）
訳者序文 このドキュメントは正式な日本語訳ではありません。また、Zennの記事の上限である 80,000 文字に収めるために、YAML と併記されていた一部の JSON の例を省略しました。 オリジナルと同様、The Apache License, Version 2.0 の下でライセンスされます。 正式な仕様書を必要としている方は、以下を参照ください。 OpenAPI 仕様 Version 3.1.0 このドキュメント内のキーワード "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", および "OPTIONAL" は、ここで示したように全て大文字で表記される場合、また、その場合のみ BCP 14 RFC2
分析関数（ウインドウ関数）をわかりやすく説明してみた
はじめに ちょっととっつきにくいけどとっても便利な分析関数について、なるべく分かりやすく説明してみようと思います。Oracleを対象にしていますが、他のDBでもたぶん似たようなものでしょう（無責任）。 まず分析関数とは何をするものか、ですが、一言で言うと集合関数と同じ集計動作をそれぞれの行に制限範囲で実行するものです。ここでいう集合関数とは、MAXやSUMやAVG等、GROUP BYと共に使い行をまとめるて集計計算する関数ですね。分析関数は集合関数と同様の計算をしますが、集合関数と違い行をまとめません。それぞれの行で集計計算し結果を返します。ここが集合関数との大きな違いです。 また、集合関数ではGROUP BYの同じカラム値をもつ全行を一つに集計しますが、分析関数では集計対象となる行の範囲を任意で指定できます。関数に続くOVER句でこの範囲指定を行います。集合関数と分析関数は基本同じ名前な
Reactでロジックをhooksにまとめないという選択肢 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A
中級 Vim 操作
この記事は Vim 駅伝 の 06/05 の記事です。 前回の記事は thinca さんによる、 06/03 の「Meguro.vim #23 を開催しました」という記事でした。 次回は 06/07 に投稿される予定です。 はじめに 本記事は以下の記事のオマージュです。 Vim の基本操作のうち、比較的マイナーながら汎用的に使える機能や小技を集めました。プラグインや複雑な設定が必要なものは含まれておらず、いずれも Vim と Neovim の両方で使うことができます。気になったものがあれば使ってみてください。 ノーマルモード編 検索結果を次々と置き換える Vim で文字列置換を行う最も有名な方法は :substitute コマンド （短縮形: :s） ですが、ノーマルモードの cgn というイディオムも便利です。これは c オペレータと gn テキストオブジェクト (:h gn) を組み合
デザイントークンの効果的な命名方法｜トビ / KazuhiroTobita
サイボウズでkintoneのデザインシステム開発をしているトビ（@0b1tk）です。こんにちは。 今回はデザイントークン、特にセマンティックトークンの命名方法について掘り下げます。 まずはデザイントークンの定義について、W3Cから設立されたデザイントークンの仕様策定をするコミュニティ「Design Tokens Community Group」の定義を引用いたします。 Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. （訳：デザイン・トークンとは、色、スペーシング、タイポグラフィ・スケールなど、デザインシステムを構成する不可分の要素のことである） Design Tokens Community Group このデザイントークンの名前づけについて
コードレビューについて - camlspotter’s blog
このところ立て続けにコードレビューについて話をする機会があったので 私が経験した最高のレビュー体制を簡単にまとめておこうと思います。 利点 何故必要か 何が嬉しいのか コスト うまく回すためには何が必要か 細かい運営方法 はっきり言って当たり前の事しか書きません。 私も当時は当たり前のことだと思っていましたから、特に気にもしていなかったのです。 ただ見聞するところによると、これをちゃんとやっているところはとても少ないようです。 ウォールストリート系のファンドでもろくにレビューしてないとかどういうことなんでしょう。 だから時々会社が吹っ飛ぶんですね… 結局は、ああだ、こうだ各論を言っても、ちゃんとやれるのか、それ一点に尽きてしまう話なのですが… 利点 レビューを何のためにするか、それはまず第一に自分達の書いているコードに潜在するバグによる損失をできるだけ少なくすることでしょう。 型システムや
next/fontはCIでモック推奨
Next.jsではnext/fontを活用することで、Googleフォントをセルフホスティングすることができ、Googleへの通信が発生しないことにより、ページの読み込み速度を向上することができます。 next/fontの使い方などは公式ドキュメント等に委ねますが、next/fontかつCIを導入している方にモック化することを勧めたく思います。 なぜモック化するのか run buildなど実行時にフォント取得に失敗する場合があります。 どういったCIを組んでいるかにもよりますが、それが原因でCI自体が失敗する可能性があります。 頻度としては10回に1回もない程度で、再実行すれば解消しますが、ストレスを減らすためにmock化するのが好ましいです。 storybookのdocにでもモックを推奨されてます。 どうモックかするか 上記のstorybookのドキュメントで確認できますが、やることとし
イーロン・マスクも人前に立つのは不得意だった？ リーダー業務が苦手なエンジニアが「内向的資質」を武器にする思考法 - エンジニアtype | 転職type
転職・求人情報サイトのtype エンジニアtype 働き方 イーロン・マスクも人前に立つのは不得意だった？ リーダー業務が苦手なエンジニアが「内向的資質」を武器にする思考法 2023.02.16 働き方 マネジメントチーム チームリーダーやマネジャーのポジションに就いたのはいいけれど、自分の意見を主張したり、交渉したり、メンバーをけん引する役割に「実は苦手意識を持っている」エンジニアもいるのではないだろうか。 そのような場面で尻込みしてしまう人は、自分の苦手意識とどう折り合いをつけたらいいのか。 そのヒントを探るべく、発行部数16万部を突破した書籍『「静かな人」の戦略書』（ダイヤモンド社）の著者、ジル・チャンさんにアドバイスを求めた。 同書では、「内気・一人が好き・注目されるのが苦手・話すより聞く方が好き・心配性・口頭より文字コミュニケーションを好む・じっくり考えて話す」などの内向的資質を
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
"提案"のレベルを上げる - Konifar's ZATSU
組織で物事を進めるのが早い人は、"提案"のコミュニケーションを取っていることが多い気がする。 "指摘"で止まるのではなく課題の解決に向けた"提案"までやる方がいいんだけれど、そもそも提案って一言で言ってもまあ難しいよね。とある1on1で雑談していて、"提案"のスキルを上げていくにあたってはいくつかのレベルに分けて考えてみるといいかもしれないと思ったので、声かけのワード別に自分の考えを雑にまとめてみる。洗練されていないので意見がほしい。 レベル0: 「どうすればいいですか」 何か問題があった時の「どうすればいいですか」という聞き方は提案ではなく指摘で止まっている。 指摘してくれるということは気づいているということだし、それを伝えてくれること自体も素晴らしいことなのだけれど、そこからどうしていくかを決めるのが大変な部分なので次のレベルにも染み出していきたい。 レベル1: 「どれにしましょうか」
Rails: モジュール化強制ツール"Packwerk"の導入を振り返る（翻訳）｜TechRacho by BPS株式会社
概要 原著者Chris Salzbergさんの許諾を得て翻訳・公開いたします。 英語記事: A Packwerk Retrospective | Rails at Scale 原文公開日: 2024/01/26 原著者: Gannon McGibbon、Chris Salzberg 日本語タイトルは内容に即したものにしました。また、一部のパラグラフを分割しています。 CC BY-NC-SA 4.0 Deed | 表示 - 非営利 - 継承 4.0 国際 | Creative Commons Rails: モジュール化強制ツールPackwerkの導入を振り返る（翻訳） 2020年、ShopifyのチームはPackwerkという名前のRuby gemをリリースしました（関連記事）。Packwerkは、Railsアプリケーション内で境界を強制的に定めてモジュール化するツールです。Packwerk
Turborepo のダミータスク topo ってなんだー！？ - Mitsuyuki.Shiiba
JavaScript や TypeScript のモノレポを便利に使えるようにしてくれる Turborepo というツールのドキュメントを読んでて、↓この部分で？？？ってなった。ので、将来の自分用にブログにまとめておくことにした。 https://turbo.build/repo/docs/core-concepts/monorepos/task-dependencies#dependencies-outside-of-a-task topo ってなんだー！？ add、subtract、multiply という workspace があって subtract は add に依存している multiply も add に依存している という場合に、こういう書き方をすると↓ { "$schema": "https://turbo.build/schema.json", "pipeline":
ウェブサイトのパフォーマンスを測定するときに平均値ではなくパーセンタイル値を採用するべき理由
ウェブサイトやAPIの応答時間を短くすることはユーザー体験につながるだけでなく、Google検索で上位に表示されやすくなるなど多数のメリットをもたらします。そうした「速度」の改善活動を始める際に目標にすべき指標として、応答時間の平均値ではなくパーセンタイル値を採用するべき理由について時系列データベースの「TimescaleDB」の開発者であるデビット・コーンさんがブログにまとめています。 How percentile approximation works (and why it's more useful than averages) https://blog.timescale.com/blog/how-percentile-approximation-works-and-why-its-more-useful-than-averages/ 多数のデータを集めた時に、そのデータの特徴を
Webサービスを作るときのテンプレートを作った - hiroppy's site
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mattrighetti/envelope: An environment variables cli tool backed by SQLite
認証認可｜【Next.js 14】App Router + Server Actionsで作成する管理画面チュートリアル
project-layout/README_ja.md at master · golang-standards/project-layout
これで理解できるドメイン駆動設計！