はじめに初めまして！現在、株式会社おてつたびでフルスタックエンジニアをしている岩崎と申します。現状おてつたびでは、ページによってRailsのslimテンプレートとReactが混在している状態です。そのため可読性が悪く、様々な実装対応が行いづらくなっています。そこでページ毎に段階的にSPA対応を行なっているのですが、元のページデザインはあるとは言いつつほぼ一からページを作る状態になっています。そこで改めてコンポーネント設計にAtomic Designを取り入れてリファクタリングに取り込もうと思いました。そこで感じた事等を記載していきます。 それぞれの役割今までロジックを責務...

はじめに初めまして！株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。また、最近ではPdM業やユーザーの問い合わせ対応もやっています。おてつたびの開発チームは、よりスピーディにPDCAサイクルを回すために、内部品質の改善、つまりリファクタリングのプロジェクトを開始しました。また、リファクタリングするにあたってディレクトリ設計を大きく変更することにも決定しました。今回は、ディレクトリ設計に至った経緯とディレクトリ設計に関してお話しします。コーディング規約に関しては、以前...

はじめにおてつたび の川尻（@tomoki_kawajiri）です。先日、株式会社ラクスさん主催の エンジニアの勉強法ハックLT- vol.10 に登壇させていただきました。 今回はその中で触れた Trailblazer の概念を取り入れた件についてご紹介します。登壇資料は以下になります。内容はフレームワークから学べるメリットやソースコードを見る観点が中心になります。https://speakerdeck.com/weistom/huremuwakunososukodokarazhi-shi-woshen-meruフレームワークを学習する中で出会った一つが Trailbl...

はじめにおてつたび の川尻（@tomoki_kawajiri）です。先日開催された AWS Startup Community Conference 2022 に登壇させていただきまました。今回は登壇の中で触れた複数の RDS レプリカインスタンスへアクセスを分散させる方法についてご紹介します。プロダクトの数が増えたり、サービスが大きくなると、DB への負荷を分散させるためにリードレプリカを導入することになります。ただ、レプリカインスタンスが 1 台だとスケールができないので、 2 台以上の冗長構成が必要になります。レプリカごとにエンドポイントがありますが、アプリケーショ...

はじめに初めまして！現在、株式会社おてつたびでフルスタックエンジニアをしている岩崎と申します。日本全国の地域を旅行しながら地域の仕事を経験できるマッチングサービス「おてつたび」。2019年にβ版サイトをオープンして3年。自分が2021年ジョインして一年ほどですがその間にも色々な変更が加えられて、自分自身もデザインもしていた経験からUI、UX改善をしてきたのですがどのくらい変わったかを紹介していきたいと思います。こちら2021年4月の状態のTOPページと現在のTOPページです。実際に一年でどれくらい変化しているかを並べて確認してもらうと違いが分かると思います。大きな要素...

はじめに初めまして！株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。おてつたびでは、フロントエンドのライブラリにReactを、ルーティングにはreact-router-domを使用しています。今回は、react-router-domのバージョン5でNested Routeを行う際に、はまったポイントを解説していきます。!react-router-domの最新バージョンは、6系が出ています。バージョン6系を使っている方は、実装方法が異なりますので、ブラウザバックを...

はじめまして、おてつたび の川尻です。去年見つけて投稿したIssueがPR作成されて進んでいたので、紹介します。そもそもの Issue はこちら。（タイトル名が合ってない気もしますが）https://github.com/rails/rails/issues/41151Issue にも記載した例で解説します。 例著者（authors）と記事（articles）テーブルがあり、author_id で紐づいているとします。モデルもそれぞれ Author と Article があります。authorsidname1John2Smithar...

はじめに初めまして！株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。今回は、おてつたびの自動テストとの向き合い方に関してお話しします。フロントエンドのテスト環境はまだ準備中であるので、バックエンドの自動テストに関して言及します。テストコードの書き方というより、テストコードを書いた結果としてどのような恩恵があったか、といった趣旨の記事になっております。 自動テストの導入 導入前のテストとの向き合い方と課題テストコードを最初に書き始めたのは、2021年の夏頃で...

はじめに初めまして！株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。今回はおてつたびのフロントエンドで定義している、コーディング規約に関してお話しします。2021年の4月より開発メンバーが増えたこともあって、フロントエンドのコーディングスタイルがバラバラになってしまっているという課題がありました。さらに、保守性やパフォーマンスにも影響を与えていました。上記課題に、おてつたびの開発チームがどう向き合っているかを、コーディング規約の定義という観点でお話します。 技...

はじめに初めまして！株式会社おてつたびでフルスタックエンジニアをしています、ぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。弊社おてつたびは、ついにテックブログデビューします！1記事目となる今回は、おてつたびとはどんなサービスか、おてつたびで使用している技術やどんな人間が働いているかを紹介いたします。 おてつたびとはおてつたびとは、地域の季節的・短期的な人手不足をキッカケに地域の関係人口を創出するマッチングサイトを運用している会社です。マッチングサイトであるので、ユーザー向け画面と事業者向け画面の2つのサイトを...