はじめに はじめまして、株式会社スタメンのミツモトです。 普段は、REST API をベースに React + Redux で開発しています。 最近になり開発者体験の向上、プロジェクトのスピードアップという観点から、社内でスキーマファーストな開発に関心が集まっています。そういった背景もあり弊社でも GraphQL の勉強会を始めました。今後のプロジェクトにおいて GraphQL を導入する可能性があるため皆で学んでいます。 React ✕ GraphQL という技術を採用する場合、client 側の状態管

こんにちは。フロントエンドエンジニアの 渡邉 です。 普段はReactとTypeScriptを書いています。 今回は自分がNext.js + NextAuth.js + Prismaを使って認証付きアプリケーションを作成する際の土台を紹介をしようと思います。 フロントエンドエンジニアとしてトレンドの技術を抑えておきたいというのと、実際に新規のプロジェクトで開発する際に採用される可能性もあるので、Next.js + NextAuth.js + Prismaといった選定をしています。 技術の概要 Framew

こんにちは久保田(@kubotak_public)です 先日の2021/06/23にNuxt道場というオンライン勉強会を開催しました。 macloud.connpass.com この勉強会は弊社でも扱っているフロントエンドのフレームワークであるNuxt.jsをテーマとした勉強会で、 株式会社Hajimariの三宅様、株式会社レアジョブの田原様を師範（登壇者）としてお迎えいたしました。 Nuxt道場はYoutubeLiveで配信したため、アーカイブとして現在でも視聴することができます。 Nuxt道場って何？

はじめに こんにちは、フロントエンドチームのta_kameです。 私がSassを使い始めた頃、Sassに種類があるなんてことは全く知らず、その上多くの人に使われているはずのLibSassが非推奨になるなんて思ってもみませんでした。私自身知らずのうちに使っていて、結構最近になってから Dart Sassを覚えたのですが、今回はそのことについてまとめてみようと思います。同様にLibSassを扱っている方も含めて、今回はSassについて知っている人も知らない人も、少しでも参考になれば幸いです。 目次 はじめに

はじめに こんにちは、スタメンでエンジニアをしている手嶋です。普段は、React+TypeScriptでフロントエンドメインで開発をしています。 弊社のプロジェクトではフロントエンドの状態管理ライブラリとして Redux を使用していますが、直近のプロジェクトにおいて Redux の Store に格納するデータを正規化することで多くの恩恵を得られた為、今回はそのメリット及び具体的な正規化の方法について紹介したいと思います。 ※ Redux の 公式ドキュメント でも Store の正規化が推奨されていま

こんにちは技術広報の syoneshin です。 今回は当社の開発メンバー達に聞いた おすすめの『 エンジニアの勉強法 』を中心に 現役エンジニアにも役立つ勉強法をいくつかご紹介します。 自主的な勉強の状況 平均的な勉強時間 エンジニアのおすすめ勉強法 勉強するハードルを下げる 読書を活用した勉強法 動画を活用した勉強法 まず手を動かす アウトプットする 新しい情報の収集 さいごに 自主的な勉強の状況 これからエンジニアを目指す方も含めて、現役エンジニアの多くが自主的な勉強に取り組んでいます。 技術環境の

こんにちは。 Photorait エンジニアのヒエイです。 Photoraitでは Webつく というWebサイト作成ツールを提供しており、Reactを使用しています。 フロントエンドテストを導入した話を書きます。 前提 Photorait Webつく技術スタック React 16.13 TypeScript 3.9 Jest導入 方針 Jest 、 Enzyme を利用 Jest facebook社製のテスティングフレームワーク。 Enzyme Reactテストライブラリ・ユーティリティツール。 パッケ

こんにちは。エンジニアの鈴木（yamotuki）です。 今回は本番や開発環境でエラーが起こったときに、効率よく対応ができるように Rollbar というツールを導入した話です。 Rollbar とは 公式はこちら JavaScriptやPHPで発生したエラー詳細をSlack通知してくれます。 通知や画面詳細ページは後述してあります。 導入目的 導入目的としては、フロントエンドのエラー検知とバックエンドサーバのエラー対応の簡素化の二つがあります。 1. フロントエンドのエラー検知 Universalモード（

こんにちは、今回は技術的な話ではなく、TRILL開発部で行っている勉強会などの紹介をしたいと思います。 社内勉強会 TRILL開発部では週1で社内勉強会を行っております。 参加メンバーはTRILL開発部メンバーということで、サーバサイド、Webフロントエンド、スマホネイティブアプリ、PdMなど、領域をまたいだ参加者での勉強会です。 （もちろんこれとは別でクラシル・TRILL合同のiOS勉強会など領域特化の勉強会もあります） 勉強会で扱う題材も様々で、 BigQueryを使ったワークショップ 実装した機能の

BASE株式会社 Owners Experience Frontend チームのパンダ（ @Panda_Program ）です。 BASE では BASE の UI を構築するための社内コンポーネントライブラリ「BBQ」を使ってフロントエンドの開発をしています。 BBQ は Vue2 + Storybook v5 で作成されています。現在、フロントエンドの有志たちで Storybook のバージョンを最新の v6.2 にする対応をしています。 この記事では、Vue2 + Storybook v5 のコンポ

こんにちは、久保田(@kubotak_public)です 今回は弊社で運用しているサービスであるM&Aクラウドのフロントエンドの実行環境をAWS LambdaからECS Fargateへ移行した話です。 まずは弊社のサービスが動いている環境は次のようになっていました。 フロントエンドにNuxt.js（JavaScript）、バックエンドにLaravel（PHP）を利用しています。 LaravelはAWS ElasticBeanstalkで作成されたEC2インスタンス上で動作しています。 そしてフロントエン

はじめに 今すぐできるレビュワーに優しいPull Requestをつくる7つのポイント 1. WhyとWhatをそれぞれ記載する 2. 説明文は構造化する 3. コミットは課題を解決した単位で行う 4. Pull Requestは適切な大きさに分割する 5. 個別説明が必要な箇所は積極的にコメントをつける 6. テストを書く 7. Pull Requestでのコメントを Slack に通知させる さいごに はじめに はじめまして。DELISH KITCHEN開発部の桝村です。DELISH KITCHENの

介護や医療、ヘルスケア、シニアライフの領域で高齢社会の情報インフラを構築している株式会社エス・エム・エス（以下、SMS）のエンジニアの神谷です。コードを書く以外にも、採用などの組織づくり、開発環境整備など幅広く仕事をしています。 自分がSMSに入社したタイミングでは、開発現場にはよくある、開発環境がアップデートされていない、デプロイのためのコストが高く一度のリリースが大きくなってしまうなど「技術的負債」がたまっており、どのように負債を解消していくかを模索していました。 今回は、技術的負債の解消にどう取り組

はじめに こんにちは。フロントエンドチーム新卒2年目のhy094です。 Reactでよく使用するJSX。 使ってみると便利なのですが、最初は「 JavaScript 内にHTML？」と混乱の原因になっていると思います。 また、その構文から違和感や気持ち悪さを感じる方もいると聞きます。 そこで、今回はReactで使用するJSXについてまとめます。 少しでも混乱や違和感の解消ができたら幸いです。 目次 はじめに 目次 JSXとは？ JSXの記法 JavaScript式を埋め込む コメントアウト タグが空の場合

【応用編①】LINE Front-end Framework で「ToDo」LINE Botを作る（フロントエンド編） - サーバーワークスエンジニアブログで、LINE Front-end Framework(以下LIFF)を紹介しましたが、 AWS Amplify(以下 Amplify) を使えばより早く、簡単に実装できるのではないかと思い試してみました。 環境 macOS(Catalina 10.15.6) @vue/cli 4.5.3 @aws-amplify/cli 4.45.0 Amplify