Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

はじめに 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をさわってみた どうも！大阪オフィスの西村祐二です。 フロントエンド、バックエンドを一つのリポジトリで管理したいときがあると思います。 それの実現をサポートNxが使い勝手よかったのでご紹介したいと思います。 monorepoとは 1つのリポジトリの中に複数のパッケージを同梱しリポジトリを運用することをmonorepoと言います。 環境構築やビルドなどのプロセスを簡単に統一できることや、 フロントエンド、バックエンドの共通処理の横断した修正が容易などメリットがあります。 特にTypeScriptの場合、型定義ファイルをフロントエンドとバックエンドで共有できて効率よく開発を進めることができるなどのメリットがあります。 ただ、リリースサイクルの違いであったり、規模が大きくなった際の共有処理の管理に問題がでてき

※この記事はMacOSを前提として書かれています。 ※Windowsの場合は、「nodistでNode.jsをバージョン管理」を参照してください。 nodenvの環境の準備 nodenvを使ってNode.jsのインストールやバージョン管理をおこないます。 nodenvのインストール まず、ターミナルで以下のコマンドを実行します。

こんにちは。Eight事業部の古本です。Eightで"企業向けプレミアム"という企業内で名刺を共有できるサービスのサーバーサイドの開発・運用を主に行っています。 その企業向けプレミアムですが、去る2020年5月にバージョンアップが行われました。 そこでEightの中では初めてGraphQLを取り入れてAPI開発を行いました。 EightではRailsを採用しているためAPIといえばREST形式で書かれています。 そんな中で方式が異なるGraphQLを採用するということは、当初思い描いていた以上に様々な課題がありました。 この記事では、そこで起きた様々な課題とそれに対するアプローチや解決策などサーバーサイドの目線から述べたいと思います。 なぜGraphQLを導入することにしたのか 細かな理由はいくつかありますが、主に解決したかった課題は以下の2つです。 これ以上エンドポイントを増やしたくなか

今回は、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のインストール方法と使い方について簡単に紹介していきたいと思います。 anyenvを使ったインストール方法も別の記事で紹介していますので、こちらも参考にしていただければと思います。 nodenvのダウンロード まず、nodenvのソースをGitHubからcloneしてきます。

プロジェクトごとにNode.jsのバージョンを簡単に切り替えられるnodenvの使い方をメモしておきます。 環境 macOS Big Sur 11.4 nodenvをインストールする Homebrewをインストールしていない場合は、先にHomebrewをインストールします。 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

$ 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

こんにちは、Misoca開発チームのmzpです。 先週は友人の家に泊り込んでWWDCのライブストリームを見ていました。 MisocaではRailsとJavaScriptでの値の共有にgonを利用していますが、ときおりcontrollerのテストが失敗するという奇妙な現象に遭遇しました。今日は、その話について書きたいと思います。 要約 テストケースごとに Gon.clear を呼べば解決する。 もうちょっと長い要約 gonはrequest store gemを使って値を保存する controllerのテスト内では、request storeは予期した動作をしない 明示的に Gon.clear を呼べば回避できる gonとは gonはRailsとJavaScriptで値を共有するためのgemです。 具体的には、Railsで gon.user_role = "admin" とのようにすると、Ja

Gonとは 導入 1. インストール 2. セットアップ 3. 使ってみる 設定 使い方 watch: watch機能を有効化する camel_case: キャメルケースに変換する camel_depth: キャメルケースを適用する深さ namespace: gonという名前空間を変える init: window.gon = {}で初期化する type: <script>にtype="text/javascript"を追加する nonce: <script>にnonce=...を追加する need_tag: <script>タグあり cdata: CDATAあり global_root: globalという名前空間を変える amd: AMD対応 <script>タグのrenderメソッド*3 Gon::Base.render_data include_gon include_gon_amd

github : https://github.com/airblade/paper_trail Railsアプリケーションで監査、またはバージョン管理のためにモデルの変更を追跡するツールです。モデルの生成から破棄まで監視していて、任意のバージョンへ戻したり、削除したものを復元したりできるようになります。 基本的にはgithubのREADMEを見ればだいたいわかるようになっていますが、少しつまづいたところもあったのでまとめました。 PaperTrailのバージョン 2015/11/25 バージョン4が最新安定版、ruby1.8.7以上、activerecord3.0以上6未満 バージョン5はunreleasedとなっています。 作成されるテーブルとその中身 PaperTrailは以下のようなversionsテーブルを作りログを残します。 item_typeがモデル名、 whodunnitは

日付と時刻を両方表現したい場合は2008-05-16T11:25:30+09:00 つまり日付と時刻をTでつなげる。 これが世界的スタンダードとしてISO8601とRFC3339に定められた日付と時刻の表現方法。 有名どころの言語やらデータベースその他ミドルウェアはすべてこれに沿った表記を解釈し入出力できるようになっている。 プログラマのみなさんは覚えておいて損はないというか絶対覚えておいたほうがいい。 日付がスラッシュ区切り（YYYY/MM/DD）だったりするソフトやらライブラリやらが巷に散見されるが、まったくおすすめできない。 http://neta.ywcafe.net/000851.html というわけで普段使っている言語でどの程度対応しているか調べてみた。 ISO8601とRFC3339があがってるけどW3CDTFも検索キーワードに入れた方が良さそう。 ちなみに、HTTP,SMT

RuboCop 0.87 がリリースされた。 github.com 今回の目玉は rubocop -a コマンドラインオプションへの非互換変更となる。 これまでは rubocop -a オプション (rubocop --auto-correct も同義) を使った場合に、自動修正を備えたすべての Cop が適用されたていた。そのため Safe でないと見なされる Cop の自動修正も適用されるというのがデフォルトの振る舞いだった。 今回のリリースからは rubocop -a は Safe とマークされている Cop のみが自動修正の対象となり、従来どおり自動修正を備えた Unsafe を含むすべての Cop を適用する場合は rubocop -A (rubocop --auto-correct-all) を実行することになる。つまり RuboCop 0.59 で導入された rubocop

前置き APIの設計をしている時など、日付のデータのフォーマットを決めなければならない場面はよくあるとおもいます。 日付の形式で僕がよく使うものをまとめてみました。 Unixtime形式 UNIX時間 - Wikipedia Rubyでは以下のようにすると出力させることが出来ます。

ajaxなど、ブラウザ経由でGET, POST, DELETEリクエストを投げると、実際のリクエストが走る前にOPTIONSリクエストが送信されることがあります。 一度しかリクエストを送信していなくても、実際はOPTIONSとGETなど、２回リクエストが走っています。 APIによっては、OPTIONSリクエストを受け付けないため、Response to preflight request doesn't pass access control checkのようなエラーが返ってくる場合があります。このOPTIONSリクエストはCORSプリフライト（preflight requests）と呼ばれていて、これが通らないと、実際のGET, POST, DELETEなどのリクエストは送信されません。 このプリフライト・リクエストとは何なのか、OPTIONSリクエストを回避する方法はあるのか調べてみま

annotateとは 各モデルのスキーマ情報をファイルの先頭もしくは末尾にコメントとして書き出してくれるGemです。 どんなカラムがあったっけ？ってなった時にいちいちdb/schema.rbを見に行く手間を省けます。 さらに、config/routes.rbにルーティング情報を書き出してくれる機能もあります。 いちいちrails routesを実行して確認する手間が省けますね。ありがたい。 環境 Rails 5.2.3 Ruby 2.6.3 annotate 2.7.5 準備 Gemfileに以下を記述して、bundle install。

こんにちは！ ねこじょーかー（@nekojoker1234）と申します。 前のページに戻るボタン、付けたいと思ったことはありませんか？ 「rails　戻るボタン」とかで調べると出てくるのが、以下の処理です。 これは、1ページだけ戻る場合は上記で問題ないのですが、複数ページ戻る場合、ループしてしまう問題があります。 たとえば、以下の操作を見てみましょう。 投稿一覧を見る Aさんの投稿の詳細を見る Aさんのプロフィールを見る 上記の操作をしたあと、「1. 投稿一覧を見る」に戻りたいとします。 戻るボタンを押すと、「2. Aさんの投稿の詳細を見る」まで戻ることができるのですが、もう一度戻るボタンを押すと、「3. Aさんのプロフィールを見る」に戻ってしまいます。 つまり、= link_to '戻る', :backというのは、「一つ前に表示していた画面に戻る」という機能でしかありません。 したがって

Rails の ActionView::Helpers::UrlHelper#link_to についてのtipsです。 戻るボタンを実装するとき、 link_to '戻る', :back のようにシンボルで :back と渡すとReferrerを読みに行きリンクを生成します。 しかしReferrerが設定されていない場合どうなるんだろうと思いました。 そこでドキュメントを見ると https://api.rubyonrails.org/v5.2.0/classes/ActionView/Helpers/UrlHelper.html Using a :back Symbol instead of an options hash will generate a link to the referrer (a JavaScript back link will be used in place o

こんにちは、brownieユニットに移動した堀口です。 今回はRubyのtimeoutメソッドを使った時にロールバックされなかった話です。 先に理由だけ書いちゃうとtimeoutメソッドが悪いというよりメソッド内でthrow~catchを使っているせいでした。 ここではthrow~catchを使うと何故ロールバックされないのか、またtimeoutメソッドでどう処理されているかを説明していきます。 やりたかったこと とあるバッチで使用しているAPIがたまに処理が長くて30分以上経っても終わらない場合、タイムアウトさせてDB更新のロールバックすることにしました。 以下のような感じです。 DB更新 ↓ API実行 ↓ 処理が長い場合、タイムアウト発生 ↓ ロールバック ということをしたかったんです... タイムアウトした時にロールバックさせたい！ Rubyでタイムアウトするには Rubyでタイム

ちょっと前にハマったのでメモ。 Sequelでトランザクションを使う時は次のように transaction メソッドにブロックを渡します。 require 'sequel' require 'logger' db = Sequel.connect('mysql2://user:passwd@localhost/test') db.loggers = [Logger.new($stdout)] db.transaction do db[:test].insert(id: 123) end I, [2017-03-12T22:34:51.946849 #27932] INFO -- : (0.000119s) SET @@wait_timeout = 2147483 I, [2017-03-12T22:34:51.947047 #27932] INFO -- : (0.000133s) SET

Linc'well Advent Calendar3日目の記事です。 当社が展開するクリニックグループである CLINIC FOR の予約システム では一部機能にGraphQLを導入しているのですが、スキーマの管理等も踏まえてどのように構築し、運用したかについて紹介したいと思います。 ※ ちなみに構築したのは2019/3~4頃であり、その点は割り引いてご覧ください 今だともっと良さげなプラクティスがあるかもしれません。 また、予約システム全体としてはモノリシックなRailsアプリケーションになっているのですが、GraphQLを導入した一部機能ではフロントエンドがTypeScript+Reactで構築されており、ruby側で定義されたスキーマ情報はTSの型定義へスムーズに繋げる必要がありました。 スキーマファイルの生成 GraphQLには様々な実装があるかと思いますが、今回rmosolgo/

githubのちょっと便利な使い方。 https://github.com/cakephp/cakephp/ の部分は自分の環境によって変更して下さい。 /compare/ がみそね。 ブランチ間の diff を見る ブランチ 3.0 と 3.0-fix-log-scope の差異を見る。

こんにちは、Chatworkカスタマーサクセスチームのさかぐち（cw-sakaguchi）です。 「Google Apps Script」を利用して「業務効率化」する手順を不定期に更新していこうと思います！ よろしくお願いします！ 今回は「Googleフォームで登録された情報をChatworkへ通知する仕組み」を作成しようと思います。 ※複数のGoogleアカウントにログインしている場合、手順通りに進めない場合があります。設定をしたいGoogleアカウトにのみログインし、手順を進めてください。 目次 目次 Google Apps Scriptとは 手順 Chatwork API Tokenの発行 通知するグループチャットの「ルームID」を取得 Googleフォーム作成 Google Apps Scriptの作成 トリガーの設定 動作確認 まとめ Google Apps Scriptとは g

Google Apps Scriptというと以前はWebのエディター上でしかコードを書けなかった。 手に馴染んだエディタが使えないし、バージョン管理はしにくかった。 Googleからclaspが登場し開発環境は大幅に改善された。 利用バージョン： clasp v1.1.5 インストール npm コマンドでインストールできる。 npm i clasp でインストールすると以前は別モノがインストールされたが、今は An alias for @google/claspと書かれており単にclasp のみでも良さそう。 ログイン Webエディタ側から取るにも、Webエディタ側にアップするにもユーザ認証が必要ということで、まずはログインする必要がある。 ログインする前には Google Apps Script API を有効にしておく必要もある。 https://script.google.com/h

# リポジトリ作成 git init # 最初のコミット git commit --allow-empty -m "first commit" 解説 Gitの最初のコミットを修正したいとなると以下のようなことをする必要がある git commit --amend で最初のコミットを修正する(コメントで教えてもらいました!) この方法なら楽にできますね git rebase -i --rootでrebaseする git update-ref -dで参照を更新する 参照 First commit が git rebase -i できない問題 → git rebase -i --root でできる 初回のコミットを取り消したいときにはgit update-refを使う 上記のよう面倒くさいので first commit は空コミットにしておくと良い。 こうすることで2回目以降が本質的に意味のある

現在時刻を扱う処理をJavaScriptで書くことはよくあると思う。ある日時を過ぎていたらリンクを非活性にしたり。 そんなときにブラウザで試そうと思うとPCの時刻を変えるのが手軽なわけだ。 もちろん現在時刻をモックして変えられる仕組みを導入していればいいのだが、WEBフロントエンドではそういう仕組みを導入しているところは少ないんじゃないかと。 じゃあ試してみようと思ってPCの時刻を変えてChromeで試してみると数十秒待たないとその時刻が反映されなかったりする。 Firefoxで試すと即時反映される。ブラウザごとに違うんだなーってことで一旦2ブラウザでどう変わってくるか試してみた。 検証したOSはWindows。Macとかだとまた違うかもしれない。 ブラウザ 現在時刻 タイムゾーン Chrome タブを新しく開けば更新される、そのまま待っていても数十秒更新されない、ページを更新しても数十秒

Railsアプリに簡単に検索機能を追加できるransackを使っています。 ここで一つの問題にぶつかってしまいました。 ぶつかった問題 検索値に1を設定するとArgumentError (wrong number of arguments (0 for 1))が発生する。 （0、2、3、、、、なら発生せず) やりたいこと Viewからselectで選択したメニューの値（1,2,3,..）を受け取り、その値を検索値とし、自前のscopeをransack経由で使おうとしました。 以下はモデルとコントローラー抜粋。 : scope :pathogen_eq, ->(pathogen) {joins(:test_results).merge(TestResult.where(pathogen: pathogen)).uniq} : def self.ransackable_scopes(auth_

Herokuで公開しているRailsアプリでiOSで撮影された画像を扱う際にちょっと工夫が必要だったのでその手順を共有します。 ちなみにiOSのSafariから直接アップロードするときには自動的にJPEGに変換されてからサーバに送られてくるので特別な対応は必要ありません。今回対応が必要だったのは、iOSで撮影した写真をMacやPCからアップロードする場合のみです。 ImageMagickのバージョンを確認 ImageMagickはバージョン7.0.7-22ならばHEICの読み込みに対応しているようです。 手元の開発環境で使っているImageMagickがそれ以上であることを確認してください。 $ convert --version Version: ImageMagick 7.0.11-8 Q16 x86_64 2021-04-17 https://imagemagick.org Copy

0. はじめに Qiitaはじめ、さまざまなところでRailsのActiveRecordの内部結合や外部結合に関する記事がありますが、それらがまとまって存在していると良いリファレンスとなるのではないかと思い本記事を作成しました。 また、Rails5で動作確認しておきながら、Rails5から追加されたleft_outer_joinsなどは載せてません。今後、載せていきたいと思います。 group byやサブクエリ（副問い合わせ）に関しては下記もご参照ください。 ActiveRecordにおけるGROUP BYの使い方 ActiveRecordでサブクエリ（副問い合わせ）と内部結合 0-1. RubyとRailsとPostgreSQLのバージョン $ ruby -v ruby 2.2.4p230 (2015-12-16 revision 53155) [x86_64-darwin15] $ r

Help us understand the problem. What are the problem?

こんにちは。Wantedly Visit の Product Squad で Frontend Engineer をしている原 (chloe463)です。 Product Squad では主に Wantedly Visit の Web 版の新規機能開発やリニューアルを行っています。 本記事では、つい先日リリースされた募集作成画面の開発で導入したGraphQLサーバーの開発について紹介します。 ・より集中して作成しやすく：作成ステップを分割・より完成形をイメージしながら作成しやすく：ステップごとにモバイル版プレビュー画面が表示・カバー画像設定をより手軽に：アップロード後にガイドラインに合うようにトリミング可能に。また、モバイルアプリ、デスクトップ、ソーシャルで表示された際のプレビューが可能に・募集作成のTipsが閲覧可能に：一部作成ステップに対応したサポートコンテンツへのリンクが表示 TL;

GatsbyJS と TypeScript でブログを作成して公開する(3) ~ Gatsby を TypeScript 化して ESLint と Prettier を導入する ~ 今回は、これまでにgatsby-starter-blogを用いて生成されたソースを TypeScript で書けるように変更していきます。 環境構築についてはこちらを、gatsby-starter-blog についてはこちらをご覧いただければと思います。 変更履歴 2020/12/12: .eslintrc の設定内容を変更 2021/09/19: スタイルの調整 参考にさせていただいた記事 こちらの ZENN の投稿がとても参考になりました。 検証環境 node 14.15.1 yarn 1.22.3 gatsby cli 2.14.0 TypeScript 4.0.3 新しいプロジェクトの作成 まず gat

なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U

なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U

やったことまとめ brewのアップデート Ruby2.6.2のinstallとglobal設定 bundlerのupdate railsプロジェクトの作成 yarnのインストール webpackerのインストール Webpackerで使うNode.jsのバージョンを上げる ハマったこと（解決策は「参考」のページを参照） railsコマンドが通らない Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError) mysqlのgemが入らない Gem::Ext::BuildError: ERROR: Failed to build gem native extension. 参考 railsの環境構築について Rails6でのRubyOnRails 環境構築 - Qiita Library not l

漠然と考えていたことが既に書かれていたので、非常に参考になったし面白かった。 developer.kaizenplatform.com GraphQL APIの設計を中心にフロントエンド、バックエンドをそれぞれ作っていくと、それぞれの実装待ちが発生しなくてよい。しかもAPI仕様のドキュメントを作成することも簡単だった。 graphql-rubyからGraphQLのスキーマ情報を作成する Railsプロジェクトでgraphql-rubyを使ってスキーマ情報を生成するのは簡単。Rakefileに以下を追記して、rake taskを追加する。 #!/usr/bin/env rake require File.expand_path('../config/application', __FILE__) require 'graphql/rake_task' # 追加 Rails.applicati

You will notice that the recipes look very much like Dockerfiles. This is an intentional design decision. Existing Dockerfiles can be ported to earthfiles by copy-pasting them over and then tweaking them slightly. Compared to Dockerfile syntax, some commands are new (like SAVE ARTIFACT), others have additional semantics (like COPY +target/some-artifact) and other semantics have been removed (like

概要 GraphQL Rubyのバージョン1.8~以降で導入されたClass-basedの書き方を使用し、簡単なAPIを作成する方法を紹介します。 ネット上でClass-basedの書き方に関する記事が少なかったので、誰かの助けになれば幸いです。 GraphQL,GraphQL Rubyの基本概念等は以下で学習して頂けます。 - GraphQL入門 - 使いたくなるGraphQL - Qiita - GraphQL Rubyに関して - GraphQL公式 - How to GraphQL - The Fullstack Tutorial for GraphQL GraphQL with Ruby on Rails ユーザーが記事(post)の取得、作成、更新、削除を行える簡単なapiをRuby on RailsとGraphQLを用いて作成します。 ソースコードはこちらから確認する事ができ

$ bin/rails g graphql:install Running via Spring preloader in process 50049 create app/graphql/types create app/graphql/types/.keep create app/graphql/rails_graphql_api_schema.rb create app/graphql/types/base_object.rb create app/graphql/types/base_argument.rb create app/graphql/types/base_field.rb create app/graphql/types/base_enum.rb create app/graphql/types/base_input_object.rb create app/graph

以前は純Railsで開発を行うことが多かったんですが、最近はgraphql-ruby + SPAを採用することも増えています。 フロントの表現力がやっぱり違いますね。最近はリッチな要望をいただくことも多く、うまいこと対応するには都合が良いです。あと作ってて楽しい。 というわけで、今回はRailsをGraphQLサーバにするgem、graphql-rubyを使ったCRUDを紹介しようと思います。 Dockerに乗せたサンプルアプリを用意したので、ぜひ活用してください。（かなり面倒な）環境構築をスキップすることができます。 基本的にサンプルのコード前提で話を進めますのでその点ご了承ください。 やること graphql-rubyを使った簡単なCRUD実装 やらないこと GraphQLとは？の説明や前提知識の解説 環境構築の解説 フロントの実装（リクエストはpostmanから投げます） サンプルア

この記事では GraphQL 自体の説明や GraphQL 特有の用語の説明などは行いません。 Rails をつかって GraphQL の API をサクっと作ってみるという趣旨で作成しています。

PostgreSQLのインストール次にデータベースをインストールします。 今回データベースはPostgreSQLを利用するため、Homebrewからインストールしておきます。 すでにインストール済みであれば必要ありません。 $ brew install postgresql $ brew services start postgresql (postgresqlを起動させます）これで構築の準備は完了です。 もし、ここまでの工程でエラーが発生してしまった場合は、開発環境や発生状況をコメント欄に記載すれば回答いたします。 Shopify アプリの構築Shopify アプリの作成Shopify アプリ CLIのインストールが完了したら、いよいよShopifyアプリの作成をしましょう。 今回はホームディレクトリ直下に「shopify_dev」フォルダを作成し、その中にアプリを作成します。（お好きな

>_cd /blog/id_025 development technology#Serverless Framework#ServerlessDate2022-04-18Time00:00:00 JST 概要Serverless Framework はServerless Applicationを構成管理デプロイするためのツールです。この記事ではその使い方をまとめています。 ※ 2022.4.17 – Serverless Framework v3 の変更内容を反映しました。 インストールNode.jsのインストールServerlessはNode.jsで作られたCLIツールです。 なので、あなたのマシンにNode.jsをインストールする必要があります。Node.jsの公式サイトからあなたのPCにNode.jsをインストールしましょう。ServerlessはNode.jsのv12以上が必要

はじめに Shopifyの環境構築(Node.js + React)で大コケしたところに、shopify-cliに救われた。。。 本記事は以下のShopifyDevsさんが出している動画、 How to Build a Shopify App with Node and React を参考に環境構築、アプリ作成。 コマンドだけでアプリが構築されるのは快感です。 完成形 商品一覧を取得し、選択するだけのアプリを作成 🎉 前作業 Shopifyパートナーアカウントを作成し、開発ストアを作成しておく必要があります。 まだの場合は、Shopify partnersからアカウント作成します。 環境構築 Shopifyで動作するアプリを作成するための環境構築をします。 必要な環境は以下 node.js ngrok shopify app-cli ここではShopify App CLIを使用して環境構

最新版2023年度チュートリアルはこちら（2023/09/12） 2023年8月にフレームワークがRemixに変更されました。 最新版を学習されたい方は下記にリンクをご確認ください。 [2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！ 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になって... techgeek-school.com 2023.09.12 2022年度版チュートリアルはこちら（2022/06/26） [2022年版] Shopify アプリ開発 チュートリアルの徹底解説 - Shopify CLI 3対

Shipping, taxes, and discount codes calculated at checkout. WORKS GO SUB サブメニューを展開する GO SUB GO SUB ヘルプページ Demo Store FAQ SERVICE サブメニューを展開する SERVICE CREATIVE サブメニューを展開する CREATIVE Shopifyサイト構築、制作 Shopify運用保守 LP制作サービス クリエイティブ・バナー制作 ECコンサルティングサービス OMS(ネクストエンジン)連携 DEVELOPMENT サブメニューを展開する DEVELOPMENT Shopifyアプリ開発、機能開発 DIGITAL MARKETING サブメニューを展開する DIGITAL MARKETING Facebook広告 SNS広告 Google 検索広告 Amazon広告

業務でngrokを利用したので、忘れない為にも利用方法を記載します。 ngrokとは？ Public URLs for building webhook integrations. Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall. webhookを利用する為のpublicURLを発行できます。 簡易的にセキュアなURLをローカルホストサーバーにNATやFirewallを通して構築することが可能です。 有料プランと無料プランがありますが、ちょっとした動作確認が目的の場合は無料プランで十分です。 ngrok説明図 画像参考：ngrok を使ったら Webhook のデバッグが非常に捗った話 ngrokの

こんにちは 今日は、Macにデフォルトで入っているrubyのバージョンがちょっと古いので、 rbenvを使って最新バージョンで動くようにした話を書きます。 今回実行した環境 OSバージョン: iMac 10.13.3 手順 Homebrewは入っている前提で話を進めます。 まずは、Homebrewをアップデートします。

class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title, null: false t.timestamps null: false end end end class Book < ActiveRecord::Base before_validation do puts "before_validation #1" end before_validation do puts "before_validation #2" end after_validation do puts "after_validation #1" end after_validation do puts "after_validation #2" end before_save