はてなブックマーク

「CTOの視点で選ぶ「最適な」アーキテクチャとは？」というイベントで登壇しました。 本記事は登壇資料をMarkdownとしてそのまま記事化したものです。スライドのほうが読みやすい方は、Speaker Deckで御覧ください！ 自己紹介1｜職歴、趣味など 職種・SNS 株式会社NoSchool CTO 2016年〜Webエンジニア。2019年〜現職 Twitter(X): 名人｜マナリンクCTO Zenn: https://zenn.dev/meijin 好きなHTTPヘッダーはCache-Control 趣味 将棋☗、カメラ📸、ラム酒🥃、個人開発💻、筋トレ💪、高校野球観戦⚾ 自己紹介2｜外部発信・諸活動 ZennでReact記事が人気 歴代記事でLike数1位（登壇時点） 個人開発 テストメーカー（ユーザー20,000人以上） エンジニア向け教材執筆 「LaravelでFat Co

【DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話】というタイトルでDevelopers Summit 2024夏に登壇しました。 ▼登壇資料 本記事では「登壇内容」、「登壇した経緯」、「登壇内容への自分自身の振り返り」の順でまとめていきます。すでに登壇を聞いていただいたり資料を見ていただいた方は、後半の章から読んで頂けますと幸いです。 登壇内容 どんな発表？ よくある取り組みや設計ルールに対して 「無視していること」 「遵守していること」 「バランスを取っていること」 をそれぞれ事業・組織・プロダクト特性などの観点から説明します。 つまり アーキテクチャ論でよく聞く「要はバランス」の具体例を徹底的に解説します！ 私がアーキテクチャを学んだ経緯 CTOが「要はバランス」と言いたくなるアーキテクチャ論を、スタートアップの立ち上げを通して学んできた経緯を話しつつ

「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを

のように実装することが多いと思います。 このような実装の罠として、変数がbool型ならよいのですが、たとえばnumber型かつ0が格納されている際、式の評価としては左辺の0が返されてしまい、ブラウザ上に「0」とだけ表示されたり、React Nativeでは最悪の場合クラッシュを引き起こします。 対策としてはシンプルで、かならず!!を先頭に付与すると良いです。

背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが全画面モーダルを実装したら、モーダルがメニューよりも上に表示されてしまい、モーダル表示中にメニューを操作できなくなってしまったとのこと。 最初のPull Requestの時点では、以下のような差分になっていました。 <div - className={'z-50 w-full border-b border-b-gray-shadow} + className={'z-10 w-full border-b border-b-gray-shadow} > これをレビューするときの僕の気持ち

会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ

React Hook Form、便利ですよね。 とはいえReactのFormライブラリ自体は複数あるはずで、今はReact Hook Formが人気だけどそのうち覇権が移ることもあるのではと思い、以下のようなツイートをしてみたところ、思いのほか反応がありました。 という流れで以前から仲良くさせていただいているアセンド株式会社の方にお声がけいただいて、あれよあれよというまにconnpassが立ち上がりました。 この記事は、打倒React Hook Formを掲げて冬の夜にもくもく会に集まった約10人の猛者たちが、結局React Hook Form強ぇ〜ってなるまでのお話です。 ライブラリのリストアップ もくもく会自体はゆるふわで、唯一の参加条件は自ら手を動かして学ぼうとする者、といった感じで行いました。 参加者がリストアップした、React Hook Formを打倒してくれそうなライブラリは

はじめに こんにちは。kouです。 自分は普段の開発業務ではフロントエンド及びバックエンドのどちらもを触ることが多いのですが、元々はフロントエンドに興味関心があってフロントエンドを中心に学習をしていたこともあり、バックエンド技術に関しては相対的に見てまだまだ広い知見がありません。 そんな自分が、最近業務内でMySQLのWITH句を使用する機会があり、SQLの可読性向上の観点からとても有用なものだと感じたので、今回はその紹介をします。 WITH句とは WITH句とは、SQL（主にサブクエリ）の実行結果に対して名前をつけて一時的な仮想テーブルを作成し、それをメインクエリ内から参照できるというものです。別名を「共通テーブル式（Common Table Expressions, CTE）」と呼びます。 言葉だけでは伝わりづらいので、以下にサンプルコードを用いてその有用性を説明します。 まずはこちら

はじめに この記事はこちらの素晴らしい記事を拝見し、私も書こうと思った記事となります。 筋肥大目的で筋トレを始めて約6年程度の体験＆健康に関する学習で得た知見を元に書いています。筋トレ3年目頃から、筋肥大よりも健康志向になったので記事の内容は健康に重きを置いた内容となっております。 エンジニアリングにも全く関係ないので、皆様暇な時に読んでください。と言いたい所ですが、 日常的に運動をしていない不健康なエンジニアは必ず読んでください。 また、私が仕事よりも本気で取り組んでいるジム勧誘活動によって、弊社社員のジム加入率は80%を超えています。熱心で粘着質な勧誘、そしてプロテイン服用の強制によって、運動経験がなく将棋一筋の弊社CTOですら1年以上筋トレを続けております。 ですので、筋トレエンジニアの方で社内に筋トレ民を増やしたい！と思っている方にもお役に立てる記事となっております。 なぜ運動不足

はじめに 昨年2023年は、株式会社NoSchoolのCTOとして、オンライン家庭教師マナリンク（https://manalink.jp/ ）に関わる開発、エンジニアリングマネージャー、採用、UIデザイン、運用保守、PMなどを兼任していました。 本記事では、エンジニアリングマネージャー（以下EM）を兼任していて考えたことをまとめていきます。 シリーズA前後のスタートアップという特異な状況かつ、マネジメントしたメンバーも3人と小規模なためあまり参考になる知見か分かりませんが、現時点での自分の考え方の備忘録的な意味も込めてまとめておきます。 考えたことまとめ それでは早速矢継ぎ早に考えたことをまとめていきます。 テキストによる情報量の欠落を想像するようになった 直接会話することと、文字でやり取りすることを比べると、つくづくテキストって情報量が欠落するなぁと思います。ソースレビューのコメント1つ

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく

YouTube埋め込みって、するだけでLighthouseスコアが低下して悲しい気持ちになりますよね。なので研究としてLighthouseスコアを低下させない対策を調べたり試しました。最終的に、特定のケースでのみ低下不可避という結論に至りました。 結論 YouTube埋め込みがファーストビューにあり、スマホ対応も必須な場合、Lighthouseスコアの低下は避けられない ※もし回避する方法を見つけている方がいれば教えてください 検証結果 以下のサイトとGitHub Repoに公開済みです。サイト内、コード内に説明は特に無いので本記事の内容と合わせて見ていただければと思います。 前提知識 YouTubeをiframeで埋め込んだだけで、Lighthouseのスコアは大幅に低下する Playerに関するJavaScriptがダウンロードされ、LCPに影響するため しかもファイル数も多く、1ファ

はじめに こんにちは。kouです。 昨年8月1日、株式会社NoSchool に入社し、オンライン家庭教師サービス『マナリンク』の開発に本格的に携わり始めてちょうど1年が経過しました。 この1年間、マナリンクの開発に携わる中で様々な学びがありました。 今回、入社1年という区切りにこの1年間の学びを、簡単にですが並べてみようと思います。 この1年間で学んだことは多くありますが、それらを全て挙げるのはキリがない上に、記事としても読みにくいものになってしまうため、中でも学びが大きかった部分に絞って紹介します（今回は主に設計とテスト周りについて取り上げています）。 自己紹介 本題に入る前に軽めの自己紹介をしておきます。 kouという名前で活動しています。 2021年の7月からエンジニアとして働き始め、現在でエンジニア歴2年程度です。 昨年8月、NoSchool入社時点での設計・テスト周りに関するレベ

はじめに こんにちは。kouです。 前回の記事を書いてから2年が経ちました。🤔 現在自分が開発に携わっている マナリンク では、バックエンドにLaravelを使用しています。 今年に入ってから、PHPStan（PHPの静的解析ツール）が導入されることとなり、現在はレベル6で運用に載っています。 PHPStanのレベルが6に上がったことを受けて、型宣言周りをより詳細に書く必要が出てきました。 PHPでは、配列の型を言語仕様レベルではarray型としか書くことができず、それが数値の配列なのか、オブジェクトの配列なのか、はたまた連想配列なのかをこの型自体から読み取ることは難しいため、「この引数（あるいは返り値）のarray型は何が来るんだ？」という思いを抱いたことがある方は多いかと思います。 例に漏れず自分もその一人であり、今後PHPStanのレベル6(もしかしたらそれ以上)の中で開発を進めて

概要 ReactにおいてuseStateを使ってステートを管理するのは常套手段ですが、一方で、不必要な場面なのに使ってしまうケースもありえます。 無駄なuseStateは減らすべきだとわかっていても、具体的にどういう場面で無駄に使ってしまうのかわからない方も多いかもしれません。そこで、先日実装した簡単なコンポーネントをもとに、無駄なフックを使っているソースコードと、その解決策、解決後のソースコードを示します。 対象読者 React初級者〜中級者 各種フックをサクサク使える 無駄なフックを減らそう、という話題を見て、心当たりがある 私について Reactのソースレビューを通して、useEffect撲滅委員会、useStateを減らそう委員会、TypeScriptのasを撲滅する委員会に所属しております。 サンプルコンポーネント 日付の範囲指定ができるコンポーネントです。動作イメージは動画を再

課題 開発中に生じるエラーメッセージや命名のために英単語を調べたい時に、わざわざブラウザで翻訳するのが面倒くさい。 解決方法 PhpStormのプラグインであるTranslationを用いて、DeepL APIと接続することでエディタ上から翻訳が可能になります。ちなみに無料です。 Translationプラグインをインストールする。 再起動すると、環境設定→ツール→翻訳を開く。そして、翻訳エンジンにDeepL翻訳を選択する。そして、構成から③で取得する認証キーを入力する。 3.DeepL API FREEにアカウント登録をして、認証キーを取得する。登録後、アカウントタブにDeepL APIで使用できる認証キーが表示されます。 ※私はアカウント作成後、認証キーが機能するまで少しタイムラグがありました。５分程経過してから、PhpStormと接続するのがおすすめです。 4.右上に文Aのアイコンが

この記事は個人開発Advent Calendar 2022 24日目の記事です。 はじめに 初めての個人開発ということもあり、開発に用いた技術スタックに目新しいものは全くありません。なのでそれを紹介するだけなら面白みがないと思うので、非情報系の学部＆プログラミング未経験の状態からサービス作ってみるかと思い、実際に作るに至った経緯をメインに書こうと思います！ 個人開発は大学3年の春頃から始めて、出来上がったのは約1年後です。単純な技術不足を含む様々なことが理由で、かなり時間がかかってしまいました。なのでリリースした頃には、既に大学を卒業していました。 ちなみに個人開発に没頭していたこともあり、卒業時点では就職先が決まっていませんでした。決してダメ人間が故に、「働く先がなかった訳ではないよ」と自分には強く言い聞かせてます！ その辺りの経緯に関しては余談で書かせて頂きます。 作ったサービスの概要

マナリンクCTOの名人です。 2022年3月頃から社内で実施している「10分勉強会」という取り組みと、実際の内容についてざっくり紹介していきます。 10分勉強会の目的 10分勉強会の目的は以下のとおりです。 すぐに実務で使えるかは分からないけど、知っておいて損はないことを先に学ぶ機会を作る 実務にて学んだことで、他のメンバーにも知ってほしいと思ったことを共有する機会を作る 前者については、たとえば「新しいバージョンのPHPについて調べてみた」といった、すぐには役立たないがいずれ使うであろう知識が挙げられます。後者については、たとえば「ある施策の実装をきっかけにCSSの◯◯プロパティについて学びなおした」といった例が挙げられます。 （ちょっとあまり上手な図解ではない気がしますが）学習機会の必要性について図解してみました。 エンジニアがある施策Aを実装するには、最低限これさえ分かっていたら実装

Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成

本記事ではReact Hook Form(v7)を使ったコンポーネント設計のアイデアについて話します。 React Hook Formはその名の通り、Hooksをベースにフォームのバリデーション設定を記述できるライブラリで、特にv7で大きな変更が入りました。そのため、本記事ではv7前提であることをタイトルで明記しています。 Hooksにフォームのロジックが切り離されることにより、理論的には、TSXで記述されたView層と、バリデーションを司るロジック層を切り離して実装することができるはずです。 オンライン家庭教師マナリンクで提供しているオンライン指導の機能にてこちらの設計を実践してみたので、どなたかの参考になれば幸いです。 前提条件 React v17 React Hook Form v7 Material UI v5 ※View層、ロジック層という命名は適当に考えたものなので、もっと適切

本記事ではオンライン家庭教師マナリンクのシステム開発で活躍しているGitHub Actionsについて一気に解説します。 マナリンクは、オンライン家庭教師と生徒（と保護者）を繋ぐプラットフォームを運営している事業です。 下図のように、大きく分けて3つの性質の違うプロダクトを開発しています。 オンライン家庭教師を集客するメディア 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト 宿題やチャットなどの機能でオンライン指導ができるWebアプリおよびネイティブアプリ このようにさまざまなプロダクト、技術要素に支えられています。 マナリンクは2020年8月に正式リリースした若いサービスなので、まだまだ事業検証するべきことが多く、その分開発効率を高めるために自動化できるところは自動化していきたいと考えています。 本記事では以下の順に、GitHub Actionsの活用場面

オンライン家庭教師マナリンク CTO の名人です。 先日マナリンクでリリースした新機能でReactとViteの組み合わせを選定しました。 本記事ではReactとViteについて、以下の順で解説させていただきます。気になるところから読んでいただければ幸いです。 採用理由 実装の内容（環境設定、ライブラリ選定、コンポーネント設計など） CI/CD（デプロイ、テスティング、Linterなど） React×Viteの採用理由 マナリンクについて 採用理由を説明するにあたって、簡単にマナリンクの事業背景を説明します。 マナリンクは、オンライン家庭教師と生徒（と保護者）を繋ぐプラットフォームを運営している事業です。 大きく分けて3つの性質の違うプロダクトを開発しています。 オンライン家庭教師を集客するメディア 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト 宿題やチャッ

オンライン家庭教師マナリンク 開発の Technote です。 最近 Algolia を利用した検索を導入したのですが、思った以上に短期間で簡単に検索機能が導入できました。 今回は Algolia を選ぶまでに検討したことや利用する際の Tips などをまとめました。 要件 ２種類の検索機能が要件として挙がりました。 検索候補を出す機能 検索窓への入力に応じてリアルタイムに科目などを検索候補として表示 先生に紐づくコースを検索する機能 コースのタイトルと本文で全文検索し、検索にヒットしたコースを持つ先生を検索結果に表示 検索にヒットしたコースも最大３件まで表示 先生A |- 検索にヒットしたコースA1 先生B |- 検索にヒットしたコースB1 |- 検索にヒットしたコースB2 |- 検索にヒットしたコースB3 先生C |- 検索にヒットしたコースC1 |- 検索にヒットしたコースC2 ..

オンライン家庭教師マナリンク 開発の Technote です。 今回は GitHub Actions を利用した開発体験改善の取り組みの一部を紹介します。 背景 もともと develop ブランチにマージでステージングに、master ブランチにマージで本番にそれぞれデプロイする workflow が組まれていました。 本番でも使用している Docker 環境を使用しているので、各自ローカルで本番に近い環境で開発できていますが、Expo のプッシュ通知や外部からの Webhook の動作などは確認が難しい、もしくはできない場合があります。 費用的、開発規模的な面からしばらくはサーバーはステージングと本番のみで運用したい、でも develop にマージする前に動作確認もしたい... 一応 develop ブランチだけではなく特定の名前（例: for-actions/deploy）がついたブラ

オンライン家庭教師マナリンク CTO の名人です。 今回は2021年6月6日に開催されたイベント”【frourio入門会】TypeScriptでフルスタックWeb開発！開発者によるライブ配信解説付き”についてのイベントレポートを書いていきます。 事前登録が140人超え、当日の参加者もおそらく70名以上の方にお越しいただき大盛況のうちに幕を閉じました。 今回は開発者のSolufaさんも会場である弊社オフィスにお越しいただき、技術的な点やOSSを作る苦労について喋ってもらいながらイベントを進めました。 frourioとは frourioは国産のTypeScript製フルスタックWebフレームワークです。 frourioの特長 特長としては以下の点が挙げられます。 型安全にREST API通信を記述できるライブラリaspidaを内包しており、フロントエンド〜バックエンド〜ORMまですべて型安全に

はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長

オンライン家庭教師マナリンクCTOの名人です。 会社としてのテックブログをZennを使って始めることに決めましたので、その背景や弊事業の紹介などを記念すべき最初の記事として書いていきたいと思います。 オンライン家庭教師マナリンクとは まずは簡単にマナリンクの紹介をさせてください。 マナリンクは「プロを指名できるオンライン家庭教師」をコンセプトにしたサービスです。先生一人ひとりにYouTube上で閲覧できる自己紹介動画があるなど、先生ごとに個性を出していただく工夫を多く実施しています。こうすることで、先生は自分の得意な指導スタイルや科目で活躍できますし、ご家庭からは生徒さんにピッタリの先生を納得行くまで選んでいただけます。 技術観点では、先生とご家庭がベストなマッチングを実現するためのWebサービスと、指導開始後に利用するアプリを開発しています。 表からはあまり見えませんが、柔軟に指導コース