サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
tech.smartshopping.co.jp
はじめにこんにちは。フロントエンド/SETエンジニアの@1010realです。 子育て中は自分の事が全て後回しになりますね。。 # 今日の朝ごはんはカップ麺 今回は、新機能の開発において、mock service workerを使ってGraphQLエンドポイントをモックした単体テストを導入したので、それについてまとめてみました。 ちなみに導入に関しては、大部分を以下の記事を参考にさせて頂きました。とても勉強になりました。 mswとgraphql codegenでGraphQLをモックし、効果的で効率的なReactのテストを書く 本記事は上記の導入に際して、細部の環境の差異、実際につまづいた点および自分が調べた点を追加した内容になっております。 目次はじめにmswについて導入手順 Typed Document Nodeを生成するmswを設定するテスト用のRender関数を用意するテストを書く
SREチームの@biosugar0です。 今回は社内外向けに、スマートショッピングのSREチームの再立ち上げと、 最近定義したミッション、ビジョン、バリュー(MVV)について紹介したいと思います。 結論から書くと、Site Reliability Engineeringを先導する組織としてSREチームを再立ち上げし、以下のMVVを作成しました。 ミッション 日常を革新するプロダクトが走り続けるために、整備された道とガードレールを作り改善していくビジョン 自律して信頼性の高いプロダクトを作り続けられるスマートな開発組織の実現バリュー Bold and FlexibleAutomationOne for AllData DrivenProactiveでは背景などから紹介したいと思います。 これまでのSREチームのミッション実はこれまでも、SREチームのミッションとして以下のようなものを定義して
こんにちは、SmartShoppingでスマートマットライトの開発を担当している @leafです。 先日スマートマットライトの利用イメージをより掴んでいただきやすくするために、サービスサイトのリリースを実施いたしました。 今回は、サービスサイトで商品検索機能を実装するために利用したMySQLの全文検索について紹介していきたいと思います。 全文検索とは対象の文章に対して、指定したキーワードを探し出すことです。 私の場合は、全文検索と聞くと「Elasticsearch」をイメージしていたのですが、今回は検索機能の規模が小さく、なるべく工数を少なく進めたかったため、MySQLに用意されているFULLTEXT INDEXを利用して実装を行いました。 MySQLの全文検索MySQLではFULLTEXT INDEXというINDEXが用意されており、これを利用することでLIKE検索と比較して、高速に対象
はじめにエンジニアの@biosugar0です。 皆さんは2020年のre:Inventで発表されたLambdaのコンテナサポートを使っていますか? この機能、個人的にはこれまでのZIPで固めてやる方法があまり好きではなかったのでとても嬉しい発表でした。 さて、今回はLambdaコンテナ内でplaywright-pythonを使う方法を紹介します。(playwright自体の使い方の説明はしません) PlaywrightPlaywrightは、マイクロソフトが開発しているブラウザ操作を自動化するためのライブラリおよびCLIツールです。このようなライブラリはpuppeteerやseleniumも有名ですね。 主にNode.jsライブラリとして開発されていますが、python用のplaywright-pythonもあり、今回はこちらを使います。 Lambda コンテナの準備使用したbaseイメー
2020-07-13Options APIを使用してNuxt.js + TypeScriptでVuexに型指定する方法(nuxt-typed-vuex) はじめにこんにちは。エンジニアリング事業本部の@gc_tech70です。 今回自社内で新規のWebサービスの開発プロジェクトがあり、その際の開発技術としてNuxt.js + TypeScriptを採用しました。 本記事ではその開発時のナレッジとして、Nuxt.js + TypeScript環境におけるVuexの型指定の方法についてご紹介させていただきたいと思います。 ※TypeScriptを使用する理由は多くの記事で語られていると思いますので、この記事ではあえて言及はしません。 Nuxt.js + TypeScriptでの技術選定まず最初にNuxt.js + TypeScriptと言っても現状(2020年7月12日時点)では技術選定として
こんにちは。エンジニアリング事業本部の@leafと申します。 今回はプロジェクトでOpenAPIを利用したので、作成からGitHubActionsを利用してチームに共有するまでどのように進めたかを紹介したいと思います。 まだまだ模索している部分もありますが、参考にしていただければ幸いです。 OpenAPIとはOpenAPIはREST APIのAPI定義を記述するための仕様です。 定義はYAMLまたはJSON形式で定義することができ、プロジェクトの言語に依存しないため様々な案件で利用することができます。 また、Swagger UIなどを利用することで、ドキュメントとして確認することもできます。 参考:https://swagger.io/docs/specification/about/ OpenAPIの作成次はOpenAPIの定義をどのように作成していたか紹介していきます。 OpenAPI
2020-05-29Sentryをちゃんとセットアップしたら、想像以上にできるやつだった話(フロントエンドのエラー監視) はじめにこんにちは。エンジニアリング事業本部の@1010realです。 今年初めからスマートショッピングに入社して、既存サービスの管理画面のリプレースや運用・新規機能開発におけるフロントエンド開発を全般的に行っております。 今回はWebフロントエンド開発における本番環境のエラートラッキング及びそのバグフィックスについて、Sentryを用いて効率的に行う方法を紹介しようと思います。 内容としては、Webフロントエンドに限らず、バックエンドやアプリなど、Sentryが対応しているPlatformであれば、参考にできる内容となっています。 目次はじめに目次Sentryについてなぜこの記事を書こうと思ったかちゃんとセットアップってどういうこと?導入手順 最初のエラーをトラッキン
このページを最初にブックマークしてみませんか?
『techBlog | スマートショッピング』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く