新サービス制作に、今Railsを採用するのはアリなのか？ 強みを活かせる状況と、おすすめできないパターン
現在のRailsのベストプラクティスや新機能にどう向き合っていくべきなのかを学び、これからのRails開発について考えていく「2022年のRailsの開発現場事情について語ろう！」。ここで株式会社ベーシックの櫻庭氏、ユニファ株式会社の赤沼氏、Qiita株式会社の清野氏が登壇。まずはサービス・会社の希望にあわせたRailsの採用について話し合います。 セッションの4つのテーマ 清野隼史氏（以下、清野）：本日はトークセッションとして、先ほどLTをしてもらった櫻庭さんや赤沼さんと一緒に話したいと思います。清野が進めます。よろしくお願いします。 櫻庭洋之氏（以下、櫻庭）：よろしくお願いします。 赤沼寛明氏（以下、赤沼）：よろしくお願いします。 清野：今回のトークセッションのテーマとして、スライドに書いてある4つを用意しています。最初にこういうテーマにした意図というか背景を説明したいと思います。目的
【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
【Rails】単一テーブル継承(STI)について - Qiita
単一テーブル継承(STI)とは STI(Single Table Inheritance) 同じカラム設計のテーブルを、一つのテーブルにまとめて、継承することで余計なテーブルを増やさず、DRYなテーブル設計にするというもの。 (テーブルが多いですねw) 考え方はクラスの継承と同じ!! 例 STI不使用(通常テーブル設計) Authors、categorys、tags3つとも同じカラム設計なのにテーブルをそれぞれ作成しているのは可読性が下がるし、無駄。 STI使用 図にも書いてある通り、authors、category、tagsは擬似テーブルであり、DBには実在しないテーブルになります。 実在しないので、データは全てtaxonomiesに保管されます。 この図はDBレベルでの相関図です。 Modelレベルでは、Articles.rbなどの記述を見るとわかるがAuthor、Category、T
サーバサイドの進捗に依存しないための Next.js x GraphQL のフロントエンド開発の工夫 - Money Forward Developers Blog
こんにちは！ マネーフォワード クラウド横断本部のWebエンジニアの はるやま (@linnefromice) です。 現在クラウド横断本部では BtoB 向けサービスのリプレイスプロジェクトの開発を行っており、今回は とフロントエンド開発においてそのプロジェクトで悩んだ点とそれに対する工夫の紹介をさせていただきたいと思います！(Special Thanks かわかみさん(@thinceller)、一緒にアーキテクチャの実現とこのフローを考えてもらいました) プロジェクトの特徴 今回のプロジェクトはリプレイスのため、既存のサービスで実現している機能の再現/改善または新規機能の開発を行うのですが、 現行サービスのコアモデル/データをベースに扱う必要がある サービスの特徴として、他のクラウドサービスとの連携により実現したい機能が多い のような特徴があります。 これらの特徴により、 サーバサイド
GraphQL Ruby の使い方 (基礎編) - Qiita
注意 現在の graphql-ruby （ver: 1.8.x） は Ruby のクラスベースによる定義がメインで、この記事に書いてある DSL を使った定義は 非推奨 です。 ロードマップ には DSL を使った .define-style は、graphql-ruby 2.0 で廃止するとあります。 新しいクラスベースでの書き方は 公式ドキュメント を御覧ください。 日本語の記事だと @gfx さんの 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ が非常によくまとまってて分かりやすいです。 はじめに 私が携わっているプロダクトでは、フロントエンド用のAPIとしてGraphQLを採用しました。 実際に使ってみてかなり良い感じなのですが、最初はいざ実装しようにもよく分からずに苦労しました。 そこで、GraphQL の実装方法についてサーバーサイドに焦
GraphQL API をスキーマファーストで開発したいけどスキーマと実装で乖離を起こしたくない - Feedforce Developer Blog
feedforce Advent Calendar 2017 14日目の記事です。(遅くなってごめんなさい！) こんばんは、エンジニアの id:sukechannnn です。 先日Qiitaに GraphQL Ruby の使い方 (基礎編) という記事を投稿しました。この記事ではgraphql-rubyを使った際のGraphQL APIの実装について、QueryからMutationからテストまで、実際のコードとともに解説してみました。Mutationまで書いてある日本語の記事は少ないと思うので、是非参考にしてGraphQLを実装してみてください。 GraphQLのスキーマと実装 さて、この記事の中で私は graphql-rubyのschemaが正しいか確認するテスト について書きました。このテストを自動で走らせることによって、実装とスキーマに乖離が起こることがなくなり、スキーマやドキュメン
jQueryオブジェクトとDOM要素を互いに変換する方法 | PisukeCode - Web開発まとめ
JavaScriptで要素をオブジェクトとして扱う方法は主に次の２つです。 jQueryオブジェクト DOM要素(DOM Element) ライブラリを入れてjQuer内で要素を扱うときはjQueryオブジェクトが、 純粋なライブラリなしのJavaScript内で要素を扱うときはDOM要素が使われます。 そしてこの２つはある方法を使えば互いに変換することも可能です。 ということでjQueryオブジェクトとDOM要素の変換方法について解説 ここでは jQueryオブジェクト ⇒ DOM要素 DOM要素 ⇒ jQueryオブジェクト に変換する方法についてコード例と一緒に紹介していきます。 jQueryオブジェクト ⇒ DOM要素 まず初めはjQueryオブジェクトからDOM要素に変換する方法 こちらはjQueryオブジェクトに対してget関数を呼び出すだけです。 例えば次はjQuery内で
FactoryBotでtraitを使おう - Qiita
はじめに FactoryBotでテストデータを作成するに当たってtraitを押さえるのは必須かなと思います。 RSpecをこれから始める方向けにこの記事を書きます。 traitを使ってみる 一例としてTaskのファクトリを作成する場面を想定してtraitを使ってみます。 # spec/factories/tasks.rb FactoryBot.define do factory :task do title { 'Task' } status { :todo } from = Date.parse("2019/08/01") to = Date.parse("2019/12/31") deadline { Random.rand(from..to) } trait :done do status { :done } completion_date { Time.current.yester
【Rails】rack-corsで複数サブドメインからAPIリクエスト時のCORSエラーを回避する - Qiita
別Originからリクエストを受けるときはCORS対応が必要 他OriginからAPIサーバへのリクエストを許可したいとき、CORSを意識する必要があります。 1つだけであればAccess-Control-Allow-OriginヘッダにそのOriginを設定すれば良いです。 しかし、Access-Control-Allow-Originヘッダには一つのOriginしか設定できません。 <origin> オリジンを指定します。1つのオリジンだけを指定することができます。 サーバーが複数のオリジンからのクライアントに対応している場合、リクエストを行った特定のクライアントのオリジンを返さなければなりません。 複数のOriginに対応する場合、リクエスト元のOriginをもとにAccess-Control-Allow-Originヘッダを設定する必要があります。 rack-corsで複数Orig
もう迷わないNext.jsのCSR/SSR/SSG/ISR
はじめに Next.jsで一番最初の詰まりどころと言えば、「CSR/SSR/SSG/ISRとあるけどデータ取得はどのやり方でやれば良いか」という点ではないでしょうか。 自分の中でようやくこの辺りの整理ができたので、この記事ではCSR/SSR/SSG/ISRとは何ぞやというところからそれぞれの使い分けについて書いていこうと思います。 CSR/SSR/SSG/ISRとは CSRとは CSRはClient Side Renderingの略で、日本語に訳すとクライアント側でのレンダリングです。 CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。 Reactのみを使ってSPAを作る場合にuseEffectの中でデータをfetchして結果をuseStateに渡して表示するというお馴染みのやり方です。 全てがクライア
【フロントエンド、バックエンドを一つのリポジトリで管理】monorepoを実現できるNxをさわってみた | DevelopersIO
【フロントエンド、バックエンドを一つのリポジトリで管理】monorepoを実現できるNxをさわってみた どうも！大阪オフィスの西村祐二です。 フロントエンド、バックエンドを一つのリポジトリで管理したいときがあると思います。 それの実現をサポートNxが使い勝手よかったのでご紹介したいと思います。 monorepoとは 1つのリポジトリの中に複数のパッケージを同梱しリポジトリを運用することをmonorepoと言います。 環境構築やビルドなどのプロセスを簡単に統一できることや、 フロントエンド、バックエンドの共通処理の横断した修正が容易などメリットがあります。 特にTypeScriptの場合、型定義ファイルをフロントエンドとバックエンドで共有できて効率よく開発を進めることができるなどのメリットがあります。 ただ、リリースサイクルの違いであったり、規模が大きくなった際の共有処理の管理に問題がでてき
REST APIが主流のプロジェクトの中でGraphQLを導入してみた話（サーバーサイド編） - Sansan Tech Blog
こんにちは。Eight事業部の古本です。Eightで"企業向けプレミアム"という企業内で名刺を共有できるサービスのサーバーサイドの開発・運用を主に行っています。 その企業向けプレミアムですが、去る2020年5月にバージョンアップが行われました。 そこでEightの中では初めてGraphQLを取り入れてAPI開発を行いました。 EightではRailsを採用しているためAPIといえばREST形式で書かれています。 そんな中で方式が異なるGraphQLを採用するということは、当初思い描いていた以上に様々な課題がありました。 この記事では、そこで起きた様々な課題とそれに対するアプローチや解決策などサーバーサイドの目線から述べたいと思います。 なぜGraphQLを導入することにしたのか 細かな理由はいくつかありますが、主に解決したかった課題は以下の2つです。 これ以上エンドポイントを増やしたくなか
M1 Macにnodenvをインストール（Node.jsバージョン管理）
今回は、Node.jsのバージョン管理ツール、Nodenvのインストール方法を紹介します。 Homebrewすらインストールされていない前提で進めていきます。 nodenvを使う理由 これまではNodebrewを使っていたのですが、プロジェクトごとにNode.jsのバージョンを切り替えるのが面倒でした。 nodenvなら、プロジェクトごとにバージョンを設定できるので、バージョンを切り替える手間がかかりません。 という訳で、新しいMacを購入したのをキッカケにnodenvを使おうと決めました。 Homebrewをインストール https://brew.sh/index_ja インストールの下にあるコマンドをターミナルで実行します。 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEA
nodenvの環境構築 - Qiita
この記事では個人的にお勧めなnodenvのインストール方法と使い方について簡単に紹介していきたいと思います。 anyenvを使ったインストール方法も別の記事で紹介していますので、こちらも参考にしていただければと思います。 nodenvのダウンロード まず、nodenvのソースをGitHubからcloneしてきます。
claspでGoogle Apps Scriptをローカルで開発しデプロイする - sambaiz-net
$ clasp login $ cat ~/.clasprc.json {"token":{"access_token":"... clasp createでプロジェクトを作成する。typeを指定するとドキュメントが作られ、スクリプトがそれに紐づく。 紐づいているスクリプトからはSpreadsheetApp.getActiveSpreadsheet()のようにIDを指定することなくドキュメントを参照できる。 $ clasp create --type sheets --title "clasp test" Created new Google Sheet: https://drive.google.com/open?id=***** Created new Google Sheets Add-on script: https://script.google.com/d/*****/edit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Tag Manager Custom JavaScript Variable examples - Digital Marketing Blog
https://www.web-development-kb-ja.site/ja/ruby-on-rails/%E6%96%87%E5%AD%97%E5%88%97%E3%81%8C%E6%9C%89%E5%8A%B9%E3%81%AA%E6%97%A5%E4%BB%98%E3%81%A7%E3%81%82%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/969642678/
curlでCORS設定を確認する - Qiita
nodenvでNode.jsをバージョン管理 - Qiita
nodenvでNode.jsのバージョンを切り替える
