React Navigationで、ネストされたStackの遷移元によって戻る先を出し分けたい場合があったので、その対処法を記事にしました。 環境 Expo TypeScript ReactNavigation セットアップ 型安全なプロジェクトを作成します expoプロジェクトを作成 $ expo init navigation-test テンプレートで、blank (Typescript)を選択 必要なパッケージをインストール $ yarn add @react-navigation/native @react-navigation/native-stack $ expo install …

エンジニアの前田です。 インターフェース分離の原則とは オブジェクト指向で用いられる五つの原則の頭字語である、SOLIDのうちIの部分です。 不要なインターフェースに依存することを避けるべきという原則です。 不要なインターフェイスとは？ 例えば以下のようなインターフェイスがあったとします。 // アクション全ての複合クラス interface Action { run: () => void; stop: () => void; fly: () => void; } class Car impletements Action { run() { console.log('走る'); } sto…

エンジニアの前田です。 SOLIDの原則のLにあたる「リスコフの置換原則」を調べてみました。 概要 リスコフの置換原則とは、 is a関係にあるクラスを定義する時に、サブタイプのオブジェクトはスーパータイプのオブジェクトの仕様に従わなければならない、という原則です。 守るべきこと リスコフの置換原則では、以下の項目(事前条件・事後条件・不変条件)を順守すべきであるとされています。 事前条件 ・事前条件を、サブクラスで強めることはできない。サブクラスでは同じか弱められる。 事前条件とはある操作をする際に満たさなければいけない条件のことです。 事後条件 ・事後条件を、サブクラスで弱めることはできな…

エンジニアの岸本です。 現在、総額1億500万ドル（約120億円）を調達したことで話題になった、「PlanetScale」というサーバーレスデータベースを皆さんご存知ですか？ docs.planetscale.com 今回は簡易掲示板を実際に作りながら、PlanetScaleの導入から使用方法を共有したいと思います。 ※アカウント作成等の手順は、以下記事を参考にすることをおすすめします。 qiita.com 構成 ビルドツール Vite DB PlanetScale server Netlify アプリケーション preact, Typescript, Prisma ※ preact の代わり…

こんにちは。RITの関です。 ZENDESKのアプリを作成したのでその方法を紹介します。 基本的には下記の公式ドキュメントと https://developer.zendesk.com/documentation/apps/getting-started/overview/ 下記のZENDESK公式ブログ https://developerblog.zendesk.com/getting-started-zaf-next-js-4d1f83dae815 の通りにそのままやっているだけなのですが、何かの参考になれば幸いです。 完成イメージ 完成イメージ 組織のexternal_idを画面上から更…

問題が発生しデバッグをする必要があるときに、今、自分にはどの選択肢があり、何をして、何を解決できるのか、体系的にまとめる試みです。 ただ今回は、バグを修正するよりも、問題の特定に焦点を当てて、まとめてみようと思います。 体系的にデバッグ手法をまとめることで、バグを落ち着いてデバッグを行うことができ、自信を持って対処することで、必要な指示を仰いだり、誰かに手伝ってもらったり、チームでのコミュニケーションを円滑に行うことができます。また、バグを解決する中でクライアントとも連絡をとることもあると思いますが、クライアントに不必要な不安を煽ることなく対処することができます。さらに、問題解決のスケージュー…

こんにちは。エンジニアの岸本です。 日々開発をしていると、git add .コマンドを叩いて意図しないファイルをステージングエリアに追加した経験は、エンジニアなら誰しも経験したことがあると思います。また、git commitでコメントを記述している最中に、文章が長過ぎてターミナルがクラッシュしてしまうと気持ちが萎えちゃうこともしばしば...。実はVS CodeでGitの操作を行うことで、そんな不便から解放されるはずなので騙されたと思って是非試してもらえればと思います。 ※ 今回は基本的なブランチ作成 → ファイル作成 → 作成したファイルの編集 → 編集したファイルのadd・commit → …

こんにちは。エンジニアの岸本です。 Blitz.jsを使って開発をしている時に、「このファイルはどこに配置しよーかなー」と悩んだことはないでしょうか？ 私は多々あります。主にutilsか？それともservicesか？とか。 感覚値で配置場所を決めてたこともあったので、この機会にシンプルにまとめたいと思います。 本記事の対象者 Blitz.jsユーザーでファイルの設置場所に悩むことがたまにある人 本記事で解決できること ファイルの設置場所で悩む事による時間の無駄遣い そして結論 基本的に以下の順序で一考すれば間違いない（と信じてる） 1. まずは基本に忠実にファイル構成を考える（以下は公式から参…

こんにちは、RITエンジニアの三浦です。 Gitでディレクトリの大文字小文字の変更を反映するのに苦戦したので、解決方法を記します。 原因 解決策 方法①：renameで認識させたところだけをcommitする 方法②：一度全く別のディレクトリ名に変更する まとめ 原因 Macのファイルシステムがディレクトリの大文字小文字をデフォルトで区別しておらず、Gitの大文字小文字変更検知がこれに依存しているのが原因みたいです。 masyus.work 解決策 以下流れでディレクトリの大文字小文字変更をnew fileではなく、renameとしてGitに認識させる必要があります。 gitconfigでファイ…

業務の中で特定のリポジトリへpushした際に任意の処理を行う必要が出てきました。 そういう時に活躍するのが「Github Actions」。 もちろんpushだけに限らず、特定のリポジトリへpushされた時や、毎日決まった時刻に任意の処理（テストしたり、ビルドしたり etc....）を行いたい時にも使えます。 しかもこれらの処理を自前でサーバーを用意しなくてもGitHubを利用する全てのユーザーが使用できるという優れもの。 またGithub ActionsはDevOpsを実現するための手段として主流になってきており、GitHubユーザーにとってはCircle CIやJenkinsを利用しなくて…

エンジニアの三浦です。 業務で新規サービスを構築する中で、カラーコードの定義方法のベストプラクティスがわからず、手戻りが発生するケースがあったので、自戒も込めて記事に残します。 経緯 基本的にWebアプリは特定の色に制限して配色を決定します。 よって開発着手段階で、エンジニア、デザイナー間でどのカラーコードをどのくらいの割合で使用するのか共通認識をとっておくことで、画面設計通りのWebアプリ開発が可能になります。 弊社では基本的にデザイナーが作った画面設計を元にエンジニアがデザインも込みで実装を進めるのですが、ここで以下の問題が発生しました。 ① デザイナーが画面設計内で定義しているカラー変数…

こんにちは。エンジニアの岸本です。 個人的な開発をしていて、linkタグで @font-face を使った Web フォントの読み込みをする際に「crossoriginが付与されていませんよ！」警告を頂戴した。何となくで理解していたcrossorigin属性の存在意義を調べるうちにCORS(Cross-Origin Resource Sharing)とSOP(Same-origin policy)について改めて学習する機会になったのでまとめてみることしました。 「crossorigin」とは一体なに？ 「CORS(Cross-Origin Resource Sharing)設定要素として定義さ…

こんにちは。RITの関です。 React BootstrapのAccordion.Collapseを同時に開閉するボタンを作るという実装に少し苦労したので、その方法を紹介します。 ※この記事は下記記事のreact-bootstrap 2.~版の実装方法です。react-bootstrap 1.6~版を使われている方は下記を参考にしてください rit-inc.hatenablog.com 完成イメージ 完成イメージ まずはシンプルなAccordionを作る test_table.tsx import { TestList } from '@/Presentation/Component/Home…

エンジニアの前田です。 概要 OpenClosedの原則について、wikipediaではこう↓あります ソフトウェア要素（クラス、モジュール、関数など）は、拡張に対しては開いており、修正に対しては閉じているべきである。 わかりやすく説明すると、機能追加や修正の際に対象の箇所以外の既存のソースコードを変更する必要がないプログラムのことです。 ポリモーフィズムを使用する方法が、OpenClosedの原則に従った実装の典型としてよくあげられています。 例 悪い例から示します。 全自動で飲み物をしてくれるAutoTakeDrinkクラスがあります。 要件として料理に合わせた飲み物を提供する必要がありま…

エンジニアの前田です。 概要 単一責任の原則とクラス名を適切につけることを意識してリファクタしたので感想と疑似コードでのリファクタリング過程を共有します。 単一責任の原則とは オブジェクト指向で用いられる五つの原則の頭字語である、SOLIDのうちSの部分です。 ざっくりと説明すると、一つのクラス・関数は、一つの明確な役割を持つべきだという原則になります。 責任を明確にしていないことによる弊害 単一責任の原則を意識する前は、一つのクラスに複数の役割を持たせてしまっていたり、クラス名とそのクラスの役割が違ってしまっていました。 その結果、クラスの使用方法を間違えてしまうなどの問題が起きてしまってい…

こんにちは！エンジニアの岸本です。 仕様設計を固める段階で「ER図を作成しよう！」ということになったものの、 既にBlitz.jsアプリケーション自体は存在している稀な状況だったので、「schemaファイルからそのままER図生成できるのでは？」という思考に至りました。調査したところ、prisma-erd-generatorというライブラリを発見したので使用方法と結果を報告します。 その前に.. GitHubでmermaid記法を用いてMarkdownで図を書けるようになったこともあり、 mermaid記法でゴリゴリ自分で描きたい！という方はこちらの記事をどうぞ。 github.blog 手順1…

みなさん一度は「Blitz.js」というRailsにインスパイアされて作られたフルスタックReactフレームワークを聞いたことがあるのではないでしょうか。 触ったことがない方は是非触ってみてください。 https://blitzjs.com 本記事ではタイトルにあるように実際に使用したquery情報をまとめてみました。 また、Blitz.js は next + prisma で railsのようにフルスタックなフレームワークを実現しているので、Blitzの理解のためにもprismaとnextを理解していると学習が捗ること間違いなしです。 ちなみにドキュメントにも以下の記載があるようにuseQu…

こんにちは！RITエンジニアの崎田です。 今回は、Google Geocoding APIとSQLの関数を使った構文で半径15km以内のユーザーを取得する方法について解説してみようと思います。 使用環境 Ruby on Rails (6.1.4.1) MySQL (8.0.27) 使用API Google Geocoding API 作成済みのテーブル 前提としてユーザーがそれぞれ以下のテーブル情報(名前/住所/緯度/経度)を持っていることとします カラム名 型 name string address string latitude float longitude float どのようにして半…

こんにちは！RITエンジニアの崎田です。 今回は、Rails & Next.js環境下でのPagyとReact-BootstrapのPaginationコンポーネントを使用した、ページネーションの実装方法を解説していきたいと思います。 使用環境 Ruby on Rails (6.1.4.6) Next.js (12.1.0) ※使用言語はTypeScript 完成イメージ ページネーションの実装に入る前の準備 ページネーションの実装に入る前に、準備としてユーザー一覧表を作っておきます。 バックエンド側 (Ruby on Rails) の準備 ① RailsアプリをAPIモードで作成します。 r…

v0.45.3でリモートコード実行の脆弱性が修正されているので、必ずバージョンアップを・・・ Blitz.js v0.45.3 github.com 🚨 致命的なセキュリティ脆弱性の修正 superjsonの更新で致命的なセキュリティ脆弱性の修正. 詳細は CVE-2022-23631 : #3162 🐞 修正 FORCE_COLOR=0でログの色を消せるように: #3157 👩‍🍳 レシピ NextUI レシピの追加: #3152

こんにちは。RITの関です。 React BootstrapのAccordion.Collapseを同時に開閉するボタンを作るという実装に少し苦労したので、その方法を紹介します。 ※この記事はreact-bootstrap 1.6版の実装方法です。2.~版はアコーディオン周りの仕組みが異なっているためこの記事は参考にしないでください。 完成イメージ 完成イメージ まずはシンプルなAccordionを作る test_table.tsx import { TestList } from '@/Presentation/Component/Home/TestList'; import { NextP…

こんにちは！エンジニアの川野です。 最近はBtoCのサービスを開発していて、ブラウザバック(戻る)で編集中のデータが消えないようにする機能を開発しました。その際の課題と解決策をお話したいと思います。 はじめに 本記事では、Next.jsにおいてユーザがブログなどの投稿画面からブラウザバックするときに確認ダイアログを表示する方法を説明します。 完成イメージ 上記の機能は、ユーザの誤操作によって編集中の投稿が消えてしまうのを防ぐことで、UXの向上を目的としています。 実現したいこと 投稿画面からブラウザバックするときに「保存されていないデータは削除されますが、よろしいですか？」と表示する 前回保存…

目的 最近趣味でAtcoderという競技プログラミングサイトで活動をしているのですが、 提出するコードの計算量をかなりざっくりと見積もってしまっていて、提出した結果、指定された実行時間を超えてしまいTLE(Time Limit Exceeded)になってしまうことが多いので、 どの程度の計算量であればTLEにならずに実行できるのか調査してみました 調べてみた 環境 言語: PyPy 実行時間制限: 2 sec メモリ制限: 1024 MB 10 ** 7回ループ回してみる for _ in range(10 ** 7): a = 'a' N = int(input()) print(((N -…

こんにちは！エンジニアの川野です。 台風が過ぎ去って夏本番の暑さですね。怖い話でも聞いて涼みたいたいということで、 今回はVSCodeで表題の関数が突然消えるという恐怖体験について書きました。 心霊現象 Next.jsで開発をしているとき、下の画像のようなエラーに度々遭遇しました。 度々遭遇するエラー Server Error Error: getStaticPaths was added without a getStaticProps in /posts/[id]. Without getStaticProps, getStaticPaths does nothing This error…

初めまして。2020/11からRITでインターンとして参画させていただいた千葉と申します。 今回はRIT卒業にあたり、振り返りの記事を書かせていただきます。 インターン参画前 僕がRITにインターンとして参画する前は、実務経験がなくほぼ未経験者といった状態でした。一応プログラミングスクールで勤務していたので最低限の基礎は習得していましたが、実際のサービス開発は経験したことはありません。（社内のみで使用する小さなアプリケーションは開発したことはありますが） インターンへの応募理由 プログラミングスクールで実務を学べる機会（開発に進む機会）もありましたが、会社の開発人数や予算の都合といった理由から…

GCPでサービスを構築するときにドメイン(Google Domains)とメール(SendGrid)周りだけ外部サービス使うのが面倒でなかなかクライアントに提案しづらかった福田です。 いつもの外部サービスの設定面倒だなーと思ってなんとなくdomainで検索してたら謎のCloud Domainsというサービスがあったので試してみました。 結論から言うと、AWSのRoute 53みたいにドメインの購入からDNSへの紐付けまでGCP上で一気通貫で完結するサービスでした。すごい嬉しい。 2020/11/25 追記 Cloud Runからでも買えるようになってたみたい 作業ログ ドメインを登録ってリンク…

最近京都に引っ越した福田です。 全然更新できてないですがエンジニアも増えてきたので頻度上げたいとは思ってます。 Next.js 10リリースされましたね next/imageが出てきたりhrefにasが要らなくなったりi18n系の新機能だったり、すぐにでも使ってみたい機能が色々ありましたね。 RITのコーポレートサイトではNext.js使ってるんですが、特に画像の最適化をサボってたせいでLighthouseのスコアがよろしくなくて、丁度いい機会だったので主にnext/image使うためにバージョンアップしてみました。 変更点 インフラ構成の変更 旧構成 旧構成 図にするほどのものでもないですが…

はじめまして．RITでエンジニアのインターンとして働いている石川です． ちょうど参画してから2年目 & 就職でRITとお別れなので，感謝の意を込めて振り返り記事を書かせていただきます． 要約 入る前 自分は知識だけで経験不足の役に立たない人間 ITベンチャーでレベルアップしたい 予想通り 大きい裁量 メンバーの距離が近い ギャップ 賑やか ギスギスしてない 経験したプロジェクト JWBF：顧客と開発のバランス VOV：ログ その他：いろいろ これから 入る前 RITで働き始める前は，知識だけで経験不足の役に立たない人間でした． 情報系の大学に所属してたり，応用情報技術者の資格を所持してたりと，…

こんにちは! 株式会社RITの前田です。 今回はアマゾンウェブサービスのベンダー資格である、AWS 認定ソリューションアーキテクトアソシエイト(以下、SSA)を取得したので、体験記のようなものを書こうと思います。 なぜAWS SSAを取得しようと思ったか 弊社(RIT)では、一人のエンジニアがフロント側(React)からサーバーアプリケーション(Rails)、インフラ(GCP・AWS・Azure)までwebアプリケーションの全てを対応できるようになっているので 業務でクラウドを触る機会が多く、一度網羅的に学習しておかなきゃなと思ったことがきっかけでした。 弊社(RIT)は学習するための書籍代や…

はじめに こんにちは！デザイナーの金森です。 仕事納めですね。2019年いろいろありましたね、お疲れさまでした！ RITではデザイナーも企画のアイディエーションから入り、開発まで幅広く携わっています。 今回はその中でも開発の「セマンティックHTML」のお話をしようかと思います。 セマンティックHTMLとは？ セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは何？Weblio辞書 ????ちょっとわか…