RIT Tech Blog

株式会社RITのエンジニアが知見を共有する技術ブログです。

React Navigationで遷移元に応じて戻る先を変える

React Navigationで、ネストされたStackの遷移元によって戻る先を出し分けたい場合があったので、その対処法を記事にしました。 環境 Expo TypeScript ReactNavigation セットアップ 型安全なプロジェクトを作成します expoプロジェクトを作成 $ expo init n…

インターフェース分離の原則とは何か

エンジニアの前田です。 インターフェース分離の原則とは オブジェクト指向で用いられる五つの原則の頭字語である、SOLIDのうちIの部分です。 不要なインターフェースに依存することを避けるべきという原則です。 不要なインターフェイスとは? 例えば以下の…

リスコフの置換原則とは何か

エンジニアの前田です。 SOLIDの原則のLにあたる「リスコフの置換原則」を調べてみました。 概要 リスコフの置換原則とは、 is a関係にあるクラスを定義する時に、サブタイプのオブジェクトはスーパータイプのオブジェクトの仕様に従わなければならない、と…

Prisma × PlanetScale × Netlify で PlanetScale入門

エンジニアの岸本です。 現在、総額1億500万ドル(約120億円)を調達したことで話題になった、「PlanetScale」というサーバーレスデータベースを皆さんご存知ですか? docs.planetscale.com 今回は簡易掲示板を実際に作りながら、PlanetScaleの導入から使用…

ZENDESKのexternal_idをZENDESK上から変更できるアプリをつくる

こんにちは。RITの関です。 ZENDESKのアプリを作成したのでその方法を紹介します。 基本的には下記の公式ドキュメントと https://developer.zendesk.com/documentation/apps/getting-started/overview/ 下記のZENDESK公式ブログ https://developerblog.zende…

バグと戦う

問題が発生しデバッグをする必要があるときに、今、自分にはどの選択肢があり、何をして、何を解決できるのか、体系的にまとめる試みです。 ただ今回は、バグを修正するよりも、問題の特定に焦点を当てて、まとめてみようと思います。 体系的にデバッグ手法…

Git の ブランチ管理は VS Code の Source Tree で GUI 管理すると楽チンになる

こんにちは。エンジニアの岸本です。 日々開発をしていると、git add .コマンドを叩いて意図しないファイルをステージングエリアに追加した経験は、エンジニアなら誰しも経験したことがあると思います。また、git commitでコメントを記述している最中に、文…

Blitz.js 迷った時のディレクトリ構成

こんにちは。エンジニアの岸本です。 Blitz.jsを使って開発をしている時に、「このファイルはどこに配置しよーかなー」と悩んだことはないでしょうか? 私は多々あります。主にutilsか?それともservicesか?とか。 感覚値で配置場所を決めてたこともあった…

Gitでディレクトリの大文字小文字の変更が認識されない

こんにちは、RITエンジニアの三浦です。 Gitでディレクトリの大文字小文字の変更を反映するのに苦戦したので、解決方法を記します。 原因 解決策 方法①:renameで認識させたところだけをcommitする 方法②:一度全く別のディレクトリ名に変更する まとめ 原因…

Github Actionsを触る

業務の中で特定のリポジトリへpushした際に任意の処理を行う必要が出てきました。 そういう時に活躍するのが「Github Actions」。 もちろんpushだけに限らず、特定のリポジトリへpushされた時や、毎日決まった時刻に任意の処理(テストしたり、ビルドしたり …

【Next.js × CSS Modules × ReactBootstrap】CSSフレームワークの管理から外れずにカラー変数を定義して、エンジニア、デザイナー間で共通認識を取る

エンジニアの三浦です。 業務で新規サービスを構築する中で、カラーコードの定義方法のベストプラクティスがわからず、手戻りが発生するケースがあったので、自戒も込めて記事に残します。 経緯 基本的にWebアプリは特定の色に制限して配色を決定します。 よ…

CORS(Cross-Origin Resource Sharing)とSOP(Same-origin policy)について

こんにちは。エンジニアの岸本です。 個人的な開発をしていて、linkタグで @font-face を使った Web フォントの読み込みをする際に「crossoriginが付与されていませんよ!」警告を頂戴した。何となくで理解していたcrossorigin属性の存在意義を調べるうちにC…

React Bootstrap(v2.1.0)のAccordionで複数のAccordion Collapseを同時に開閉するボタンを作る

こんにちは。RITの関です。 React BootstrapのAccordion.Collapseを同時に開閉するボタンを作るという実装に少し苦労したので、その方法を紹介します。 ※この記事は下記記事のreact-bootstrap 2.~版の実装方法です。react-bootstrap 1.6~版を使われている方…

OpenClosedの原則とは何か

エンジニアの前田です。 概要 OpenClosedの原則について、wikipediaではこう↓あります ソフトウェア要素(クラス、モジュール、関数など)は、拡張に対しては開いており、修正に対しては閉じているべきである。 わかりやすく説明すると、機能追加や修正の際…

単一責任の原則を意識してリファクタしてみてよかったこと

エンジニアの前田です。 概要 単一責任の原則とクラス名を適切につけることを意識してリファクタしたので感想と疑似コードでのリファクタリング過程を共有します。 単一責任の原則とは オブジェクト指向で用いられる五つの原則の頭字語である、SOLIDのうちS…

Prisma.js schemaファイルからER図を作成する

こんにちは!エンジニアの岸本です。 仕様設計を固める段階で「ER図を作成しよう!」ということになったものの、 既にBlitz.jsアプリケーション自体は存在している稀な状況だったので、「schemaファイルからそのままER図生成できるのでは?」という思考に至…

Blitz.js 開発で実際に使った便利なQueryオプション

みなさん一度は「Blitz.js」というRailsにインスパイアされて作られたフルスタックReactフレームワークを聞いたことがあるのではないでしょうか。 触ったことがない方は是非触ってみてください。 https://blitzjs.com 本記事ではタイトルにあるように実際に…

Google Geocoding APIとSQLの関数を使った構文で半径15km以内のユーザーを取得する

こんにちは!RITエンジニアの崎田です。 今回は、Google Geocoding APIとSQLの関数を使った構文で半径15km以内のユーザーを取得する方法について解説してみようと思います。 使用環境 Ruby on Rails (6.1.4.1) MySQL (8.0.27) 使用API Google Geocoding API …

PagyとReact-Bootstrapでページネーションを実装する

こんにちは!RITエンジニアの崎田です。 今回は、Rails & Next.js環境下でのPagyとReact-BootstrapのPaginationコンポーネントを使用した、ページネーションの実装方法を解説していきたいと思います。 使用環境 Ruby on Rails (6.1.4.6) Next.js (12.1.0) ※…

Blitz.js v0.45 リリースノート和訳

v0.45.3でリモートコード実行の脆弱性が修正されているので、必ずバージョンアップを・・・ Blitz.js v0.45.3 github.com 致命的なセキュリティ脆弱性の修正 superjsonの更新で致命的なセキュリティ脆弱性の修正. 詳細は CVE-2022-23631 : #3162 修正 FORC…

React BootstrapのAccordionで複数のAccordion Collapseを同時に開閉するボタンを作る

こんにちは。RITの関です。 React BootstrapのAccordion.Collapseを同時に開閉するボタンを作るという実装に少し苦労したので、その方法を紹介します。 ※この記事はreact-bootstrap 1.6版の実装方法です。2.~版はアコーディオン周りの仕組みが異なっているた…

Next.jsでブラウザバック(戻る)を検知して確認ダイアログを表示する

こんにちは!エンジニアの川野です。 最近はBtoCのサービスを開発していて、ブラウザバック(戻る)で編集中のデータが消えないようにする機能を開発しました。その際の課題と解決策をお話したいと思います。 はじめに 本記事では、Next.jsにおいてユーザがブ…

【Python】AtcoderでTLEになる計算量の閾値を調べてみた 【PyPy】

目的 最近趣味でAtcoderという競技プログラミングサイトで活動をしているのですが、 提出するコードの計算量をかなりざっくりと見積もってしまっていて、提出した結果、指定された実行時間を超えてしまいTLE(Time Limit Exceeded)になってしまうことが多いの…

getStaticPathsやgetStaticProps、getServerSidePropsなどが突然消える

こんにちは!エンジニアの川野です。 台風が過ぎ去って夏本番の暑さですね。怖い話でも聞いて涼みたいたいということで、 今回はVSCodeで表題の関数が突然消えるという恐怖体験について書きました。 心霊現象 Next.jsで開発をしているとき、下の画像のような…

RIT卒業します

初めまして。2020/11からRITでインターンとして参画させていただいた千葉と申します。 今回はRIT卒業にあたり、振り返りの記事を書かせていただきます。 インターン参画前 僕がRITにインターンとして参画する前は、実務経験がなくほぼ未経験者といった状態で…

GCPでドメイン買えるようになってた(まだプレビュー)

GCPでサービスを構築するときにドメイン(Google Domains)とメール(SendGrid)周りだけ外部サービス使うのが面倒でなかなかクライアントに提案しづらかった福田です。 いつもの外部サービスの設定面倒だなーと思ってなんとなくdomainで検索してたら謎のCloud D…

コーポレートサイトのNext.js 10対応ついでにパフォーマンス改善してみた

最近京都に引っ越した福田です。 全然更新できてないですがエンジニアも増えてきたので頻度上げたいとは思ってます。 Next.js 10リリースされましたね next/imageが出てきたりhrefにasが要らなくなったりi18n系の新機能だったり、すぐにでも使ってみたい機能…

RITのインターンを卒業します

はじめまして.RITでエンジニアのインターンとして働いている石川です. ちょうど参画してから2年目 & 就職でRITとお別れなので,感謝の意を込めて振り返り記事を書かせていただきます. 要約 入る前 自分は知識だけで経験不足の役に立たない人間 ITベンチャ…

AWS SSAを取得しました !

こんにちは! 株式会社RITの前田です。 今回はアマゾンウェブサービスのベンダー資格である、AWS 認定ソリューションアーキテクトアソシエイト(以下、SSA)を取得したので、体験記のようなものを書こうと思います。 なぜAWS SSAを取得しようと思ったか 弊社(RI…

セマンティックHTMLでセクショニングをする

はじめに こんにちは!デザイナーの金森です。 仕事納めですね。2019年いろいろありましたね、お疲れさまでした! RITではデザイナーも企画のアイディエーションから入り、開発まで幅広く携わっています。 今回はその中でも開発の「セマンティックHTML」のお…