サクサク読よめて、アプリ限定げんていの機能きのうも多数たすう!
トップへ戻もどる
画が力りょくアップ
zenn.dev/manalink_dev
【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で使用しようできる認証にんしょうキーが表示ひょうじされます。 ※私わたしはアカウント作成さくせい後ご、認証にんしょうキーが機能きのうするまで少すこしタイムラグがありました。5分ふん程ほど経過けいかしてから、PhpStormと接続せつぞくするのがおすすめです。 4.右みぎ上じょうに文ぶんAのアイコンが
この記事きじは個人こじん開発かいはつAdvent Calendar 2022 24日にち目めの記事きじです。 はじめに 初はじめての個人こじん開発かいはつということもあり、開発かいはつに用もちいた技術ぎじゅつスタックに目新めあたらしいものは全まったくありません。なのでそれを紹介しょうかいするだけなら面白おもしろみがないと思おもうので、非ひ情報じょうほう系けいの学部がくぶ&プログラミング未み経験けいけんの状態じょうたいからサービス作つくってみるかと思おもい、実際じっさいに作つくるに至いたった経緯けいいをメインに書かこうと思おもいます! 個人こじん開発かいはつは大学だいがく3年ねんの春はる頃ごろから始はじめて、出来上できあがったのは約やく1年ねん後ごです。単純たんじゅんな技術ぎじゅつ不足ふそくを含ふくむ様々さまざまなことが理由りゆうで、かなり時間じかんがかかってしまいました。なのでリリースした頃ころには、既すでに大学だいがくを卒業そつぎょうしていました。 ちなみに個人こじん開発かいはつに没頭ぼっとうしていたこともあり、卒業そつぎょう時点じてんでは就職しゅうしょく先さきが決きまっていませんでした。決けっしてダメ人間にんげんが故ゆえに、「働はたらく先さきがなかった訳わけではないよ」と自分じぶんには強つよくい聞いきかせてます! その辺あたりの経緯けいいに関かんしては余談よだんで書かかせて頂いただきます。 作つくったサービスの概要がいよう
CTOの名人めいじんです。 マナリンクでのPAY.JPの活用かつようを題材だいざいに、クレジットカードによるサブスク実装じっそうをするときの全体ぜんたい感かんについて解説かいせつします。 これまでサブスク課金かきんを実装じっそうしたことがなかったけど、これから実装じっそうすることがあるかもといった方ほうや、サブスク課金かきん特有とくゆうの罠わなについて知しりたい方ほうに読よんで頂いただきたいです。 主おもに以下いかのテーマについて説明せつめいしていきます。 カード情報じょうほうをトークン化かして決済けっさい処理しょり 2回かい目め以降いこうの課金かきん成功せいこうをWebhookで検知けんちして通知つうち処理しょり 2回かい目め以降いこうの課金かきんでの失敗しっぱいをWebhookで検知けんちして通知つうち処理しょり ユーザーがいつでもサブスクを停止ていし、再開さいかいできる機能きのう カード情報じょうほうをトークン化かして決済けっさい処理しょり 大前提だいぜんていとして、クレジットカードによる決済けっさい処理しょりを実装じっそうする際さいは、自社じしゃのサーバーをユーザーのクレジットカード番号ばんごうが通過つうかしないように実装じっそうする必要ひつようがあります。 上記じょうき記事きじから、以下いかのように、カード番号ばんごうを非ひ通過つうかにすることが求もとめられていること
マナリンク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 などをまとめました。 要件ようけん 2種類しゅるいの検索けんさく機能きのうが要件ようけんとして挙あがりました。 検索けんさく候補こうほを出だす機能きのう 検索けんさく窓まどへの入力にゅうりょくに応おうじてリアルタイムに科目かもくなどを検索けんさく候補こうほとして表示ひょうじ 先生せんせいに紐ひもづくコースを検索けんさくする機能きのう コースのタイトルと本文ほんぶんで全文ぜんぶん検索けんさくし、検索けんさくにヒットしたコースを持もつ先生せんせいを検索けんさく結果けっかに表示ひょうじ 検索けんさくにヒットしたコースも最大さいだい3件けんまで表示ひょうじ 先生せんせい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での開発かいはつをしてみようという方ほうの参考さんこうになれば幸さいわいです。 そこそこ長なが
概要がいよう サービスのデプロイをECSで行おこなっている場合ばあい、バッチ実行じっこうも同おなじコンテナ上じょうから実行じっこうしたいケースがあります。そのとき、ECSの機能きのうとして”タスクのスケジューリング”というものがあり、コンソール上じょうからポチポチ設定せっていするだけで定期ていき的てきにタスクを起動きどうし、外部がいぶからコマンドを注入ちゅうにゅうして任意にんいのバッチ実行じっこうが可能かのうです。 しかし、タスクのスケジューリング機能きのうを使つかっている場合ばあい、タイムアウトやリトライ等とうの細こまかい設定せっていを行おこなうことができません。具体ぐたい的てきなリスクとして、想定そうてい以上いじょうにバッチ実行じっこうに時間じかんが掛かかり利用りよう料りょうが予想よそう以上いじょうに掛かかってしまうことが挙あげられます。 本件ほんけんについてAWSサポートに問とい合あわせしたところ、Step Functionsの利用りようを推奨すいしょういただきました。本ほん記事きじでは取とり組くんでみた内容ないようのログ、および参考さんこう文献ぶんけんの整理せいりをします。 Step Functionsとは Step Functionsを利用りようすると、AWS独自どくじのJSON形式けいしきの
このページを最初さいしょにブックマークしてみませんか?
『zenn.dev』の新着しんちゃくエントリーを見みる
j次つぎのブックマーク
k前まえのブックマーク
lあとで読よむ
eコメント一覧いちらんを開ひらく
oページを開ひらく