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

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

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

背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なので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つ

はじめに こんにちは。kouです。 2023年も残り僅かとなりました（現在 2023/12/31 21:19 🙂）。 現在自分が所属している会社(株式会社NoSchool)には昨年の8月に転職したので、2023年は丸1年間がっつり「オンライン家庭教師マナリンク（弊社が開発・運営しているサービス）」の開発に携わるという1年でした。 そんな2023年にマナリンク開発を通して学んだことや所感を、年の瀬の振り返りとして残しておこうと思います。 2023年の技術的な学び一覧 2023年のマナリンク開発を通じた学びを簡単にですが一覧にまとめました。 この1年を改めて振り返ってみると、Webフロントエンド・バックエンド・アプリなど、実に様々な技術的な学びのあった1年だったなと感じます。 以下では、改めて2023年のマナリンク開発業務を通じての学びを振り返ろうと思います。 2023年の振り返りと2024

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

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

以下のイベントで登壇した内容です（元スライドをSlidevで作成しています）。 お話する内容 ESLintのルール設定にこだわる意義 関わっているプロダクトで見つけた課題 OSSにコントリビュートした内容 対象読者 ESLintを使ったことはあるけど、使う意義があまりわかっていない方 ESLintのルールを自前で実装するイメージが湧いていない方 OSSコントリビュートのハードルが高いと思っている方 自己紹介 名人 Twitter(X): 名人｜マナリンクCTO Zenn: https://zenn.dev/meijin 株式会社NoSchool CTO オンライン家庭教師マナリンク(https://manalink.jp/) 個人開発 テストメーカー(https://test-maker.app/) 好きな言語はTypeScript、好きなHTTPヘッダーはContent-Disposit

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を撲滅する委員会に所属しております。 サンプルコンポーネント 日付の範囲指定ができるコンポーネントです。動作イメージは動画を再

目的 以下の状態を実現することを目的として、日時表記の国際標準であるISO8601やLaravel、Carbonでの利用方法について調査した結果をまとめた。 ユーザーの各端末（Web、アプリ）では表記が現地時刻になっている 同じデータを見ていても、端末側の時刻設定に応じて時刻表記が異なる たとえばJST2023年3月1日5時のデータをイギリスで開いたときは、2月28日20時と表示される 日本リージョンに置かれておりAsia/Tokyoタイムゾーンで動作しているサーバーからのプッシュ通知やメール通知にて、本文中の時刻がユーザーに合わせて現地時刻表記される 日付を含むデータを投稿した場合、投稿後の日時が現地時刻になっている 日時を含むデータを日時で検索した場合、現地時刻で検索できている たとえば、JST2023年3月1日5時のデータを、UTCで3月1日〜31日で検索した場合はヒットしない なお

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

CTOの名人です。 マナリンクでのPAY.JPの活用を題材に、クレジットカードによるサブスク実装をするときの全体感について解説します。 これまでサブスク課金を実装したことがなかったけど、これから実装することがあるかもといった方や、サブスク課金特有の罠について知りたい方に読んで頂きたいです。 主に以下のテーマについて説明していきます。 カード情報をトークン化して決済処理 2回目以降の課金成功をWebhookで検知して通知処理 2回目以降の課金での失敗をWebhookで検知して通知処理 ユーザーがいつでもサブスクを停止、再開できる機能 カード情報をトークン化して決済処理 大前提として、クレジットカードによる決済処理を実装する際は、自社のサーバーをユーザーのクレジットカード番号が通過しないように実装する必要があります。 上記記事から、以下のように、カード番号を非通過にすることが求められていること