こちらはEngineering Manager Advent Calendar 2024の10日目の記事にです昨日はもつおさんの 中途入社エンジニアへの毎日1on1のススメでした。今年入社した人だったので、「これくらいやっても良かったのかなぁ」と自分の一年を振り返りながら読ませてもらいました。マナリンクでEMをやっている@kondo_scriptです。今年の4月にEMとして入社して、入社エントリみたいな記事を書いてからかれこれ半年強が経ちました。https://zenn.dev/manalink_dev/articles/902eff3aa3e36dちょうどいいタイミングなの...

「CTOの視点で選ぶ「最適な」アーキテクチャとは？」というイベントで登壇しました。https://rosca.connpass.com/event/333739/本記事は登壇資料をMarkdownとしてそのまま記事化したものです。スライドのほうが読みやすい方は、Speaker Deckで御覧ください！ 自己紹介1｜職歴、趣味など職種・SNS株式会社NoSchool CTO2016年〜Webエンジニア。2019年〜現職Twitter(X): 名人｜マナリンクCTOZenn: https://zenn.dev/meijin好きなHTTPヘッダーはCache-C...

【DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話】というタイトルでDevelopers Summit 2024夏に登壇しました。▼登壇資料https://speakerdeck.com/texmeijin/dddwozhi-site3nian-jing-tutara-dddnopi-wobei-tutakurinakitekutiya-ninatutahua-debusami2024xia本記事では「登壇内容」、「登壇した経緯」、「登壇内容への自分自身の振り返り」の順でまとめていきます。すでに登壇を聞いていただいたり資料を見ていただいた方は、後半の...

フロントエンド領域（ネイティブアプリやWebサイト）において、画像の表示速度を速め、ユーザー体験を向上させる重要性は年々増している。画像の最適化にあたっては、imgix等の画像処理に特化したCDNを用いることで、オンデマンドに必要なサイズの画像を、低い開発工数で生成できる。弊社で開発しているオンライン家庭教師サービス「マナリンク」において日々先生と生徒間で多くのチャットが行われており、ノートや教科書の写真が送信されている。これらの写真は先生が内容を把握するために高精細である必要がある一方、大量に受信したときに速く表示するために一覧時点ではサムネイルサイズで表示したい、といった最適化Is...

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

この記事の目的今更「現代のプログラミングでマスタテーブル(特に更新が想定されないもの)使う意味ってなんだ？ デプロイすぐ終わるしハードコーディングでよくないか？」と、ふと疑問に思ったので、メリデメについて言語化してみようともった。「マスタテーブルとハードコーディングについて説明した上でメリット・デメリットを教えてください」とChatGPTに聞いてみたところ、ところどころ怪しい(ex データの再利用性/依存関係の増加あたりは「実装次第ちゃう？」という感じ)返事が返ってきた。ちょくちょく引用しつつ、自分なりに考えを整理してみることにした。 前提: 言葉の定義について マス...

対象読者Expoのdevelopment buildを導入しようとしている方Expoのdevelopment buildで詰まっている方 環境Expo SDK: 50系React Native: 0.73系Expo Workflow: Managed Workflow Expoのdevelopment buildとは？React Native + Expoで構成されているアプリの場合、開発する際の動作確認やスタイリングの確認にはSimulatorかExpo Goを使用すると思います。もし実機で確認したいとなるとExpo Goに限られるのですが、Expo ...

背景先日弊社CTOにより、社内UIライブラリがリリースされました(詳しくはこちらをご覧ください)。結論からいうとかなり役に立ちました。そこで、今回はメンバー視点で特に社内UIライブラリがあって助かったことを3つ紹介させていただきます。 社内UIライブラリがあって助かったこと3選 1. 各プロジェクトに同じコンポーネントを作らずに済む弊社の事業として、マナリンク高等学院とマナリンク小中等部 というものがあるのですが、オンラインフリースクールとサポート校ということで似たデザインになりやすいです。そこで、社内UIライブラリを使用することで、各プロジェクトに共通するコンポーネ...

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

この記事の目的株式会社NoSchoolでオンライン家庭教師マナリンクの開発にJOINしたので、コードや設計などの感想を述べてみる。入社エントリがわり。テンション高めです。 この記事の想定読者アーリーステージベンチャーの開発に興味がある人PHP/Laravel + (Nuxt.js + Next.js) + Expo(ReactNative) + AWS のフルスタック開発体制に興味がある人今の所バックエンドを触ることが多いためそのウェイトが高めです。逆にExpoやインフラ周りについては情報少なめです。JOINしたチームはエンジニア4名くらいでサーバ/フロン...

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

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

React Hook Form、便利ですよね。とはいえReactのFormライブラリ自体は複数あるはずで、今はReact Hook Formが人気だけどそのうち覇権が移ることもあるのではと思い、以下のようなツイートをしてみたところ、思いのほか反応がありました。https://twitter.com/Meijin_garden/status/1742738322198569302という流れで以前から仲良くさせていただいているアセンド株式会社の方にお声がけいただいて、あれよあれよというまにconnpassが立ち上がりました。https://ascend.connpass.com/ev...

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

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

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

はじめにこんにちは。kouです。2023年も残り僅かとなりました（現在 2023/12/31 21:19 🙂）。現在自分が所属している会社(株式会社NoSchool)には昨年の8月に転職したので、2023年は丸1年間がっつり「オンライン家庭教師マナリンク（弊社が開発・運営しているサービス）」の開発に携わるという1年でした。そんな2023年にマナリンク開発を通して学んだことや所感を、年の瀬の振り返りとして残しておこうと思います。 2023年の技術的な学び一覧2023年のマナリンク開発を通じた学びを簡単にですが一覧にまとめました。https://x.com/ogakuzu...

この記事は Laravel Advent Calendar 2023 21日目の記事です。 疑問caseに対応する値を定義する方法は2種類があるが、どちらで記述するのが良いのか？① BackedEnumenum SIGNAL:string{ case RED='赤'; case YELLOW='黄'; case BLUE='青';}② PureEnumenum SIGNAL{ case RED; case YELLOW; case BLUE; public function label():string{ ...

この記事はTypeScript アドベントカレンダー2023 16日目の記事です。 背景会社で新規サービスを立ち上げるにあたり、AWS CDKの導入にチャレンジしています。これまで1つの事業に注力してきましたためIaCはほとんど進めていませんでしたが、アセットを活かしつつ複数のサービス展開を見据えていく背景があり、AWSでベーシックなインフラを立ち上げることがある程度誰でも簡単にできるようにIaC化したいなということで取り組んでいます。AWS CDKを採用した理由は端的にいえば、TypeScriptでインフラ定義が書けることです。社内では現在全員がTypeScriptの実装が可能...

※ この記事は React Native Advent Calendar 2023 の 11日目の記事です。目次背景アプリ側の実装と解決策Expo Imageとは？サーバー側の実装どれくらい早くなったのか？おわりに※今回の測定に関しては、弊社のネットワーク速度の影響もありますので、必ずしもこれぐらいの速さになるということはありません。そちらをご了承の上お読みいただければと思います。 1. 背景弊社のアプリには、チャット機能があるのですが、そこで送られた画像はモーダルとして見ることができたり、送られた画像を拡大表示して見たりすることが可能です。サービスの特性上、生...