「React」に関連する技術ブログ
企業やコミュニティが発信する「React」に関連する技術ブログの一覧です。
全389件中 301 - 315件目
ヘッドレス CMS 運用におけるデプロイと環境差分について
2020/12/15
ブックマーク
こんにちは。武田（ @tkdn ）です。 MVP でスタートさせた au Webポータル 無料ゲーム というサービスを、手製のビルドスクリプトと手製のコンフィグで生成していた静的サイトから、Next.js SSG + ヘッドレス CMS へ 9 月にリニューアルしました。 リニューアルした理由に触れつつどうやってデプロイ・運用しているか、あたりを中心に今日は書いていきます。 なお、この記事
OpenAPI + Express.js + TypeScriptでAPI開発するTips
2020/12/14
ブックマーク
FORCIAアドベントカレンダー2020 14日目の記事です。 事業開発部の龍島です。皆さんschema firstな開発してますか？ フォルシアではwebアプリケーション開発にサーバサイドはExpress.js + TypeScript、クライアントサイドはNext.js(React.js) + TypeScriptを用いており、間をつなぐAPIインターフェースの定義にOpenAPI Specification(swagger)を用いてschema firstな開発を行っています。 ここ2年ほどschema
複雑さを相手に抽象化を盾にしましょう
2020/12/11
ブックマーク
こんにちは、サーバーサイドエンジニアの Steven です。 この記事は Enigmo Advent Calendar 2020 の 11 日目の記事です。 抽象化という単語とその議論をそれほど目にすることがありませんが、設計においては極めて重要な概念だと思いますので、ここで抽象化は何を指すのか、何のためのものなのか、どうやるのかを説明してみます。 ソフトウェア・エンジニアリングとは それ
Netlify Hosting を使わずに Netlify CMS を立てた話
2020/12/10
ブックマーク
mediba Advent Calendar 2020 10日目担当の尾野です。 入社から昨年度まで関わっていた au Webポータルから離れ、今期からゼロイチの経験をしたくて新規事業創出部門にいます。 ただ、何を隠そう我々の部門は お金がありません 。 今回はそんなお金の無い部門が安価に CMS を立てたと言う小ネタ中の小ネタなお話です。 こんな人が対象 初期構築/ランニング共に安価な構成で構築
初学者が手探りでOSS(Deno)に触れてみたら楽しかった話
2020/12/04
ブックマーク
FORCIAアドベントカレンダー2020 4日目の記事です。 事業開発部の田中です。業務では webコネクト の開発・保守に携わっています。 Node.jsを基盤とし、フロントはReact+Redux+Next.js、サーバーサイドはExpress.jsを利用し、TypeScriptで開発を進めています。 OSS(Deno)を触りたくなった動機 2020年5月にDeno 1.0.0がリリースされたのを受け、Twitterや様々な技術ブログでそれが注目されている
エンジニア歴1年半のこれまでをアウトプットベースで振り返る
2020/12/01
ブックマーク
FORCIAアドベントカレンダー2020 1日目の記事です。 こんにちは、新卒エンジニア2年目の高橋です。 アドベントカレンダーのネタ探しに迷走し続け、自分が使っている技術の説明をしても中途半端な内容になりそうだなーと思い、自分にしか書けないことってなんだろうと考えた結果、プログラミングを始めてからこれまでに作成したコードやアプリについて振り返ってみ
自動で画像最適化してくれるのうれしいよね(Next.js)
2020/11/30
ブックマーク
こんにちは。フロントエンドエンジニアの 渡邉 です。 普段はReactとTypeScriptを書いています。 今回の内容はタイトルにも記載されていますが、Next.jsを使った画像の最適化です。 画像の最適化でやるべきことは多々あります。 例えば、画像のサイズ・重さ調整や、フォーマット、遅延読み込みなどあります。 Next.js 10で発表された next/image を使えば誰でも簡単に画像の最
TypeScript入門 ~JavaScript入門者が脱TypeScript初心者するまで~
2020/11/19
ブックマーク
はじめに こんにちは。最近お気に入りのお店が閉店してしまい、悲しみに暮れています。 楽楽勤怠バックエンドチームの mako _makokです。 バックエンドチーム所属ではありますが、諸事情で数ヶ月間フロントエンドヘルプとしてTypeScriptでフロントエンドの開発を行っていました。 今ではある程度にTypeScriptを書けるようになったものの、ヘルプ当初は実務として初めてのTy
GraphQL, TypeScript, React を用いて型安全に社内システムをリニューアルした話
2020/11/06
ブックマーク
こんにちは。メドレーのエンジニアの山田です。現在、医療介護求人サイト「ジョブメドレー」のチームで開発を担当しています。 今回、ジョブメドレーの社内スタッフが利用する社内システムをリニューアルした事例をご紹介します。 リニューアル対象はバックエンド領域も含まれますが、本記事ではフロントエンドの話を中心にご紹介します。 また、弊社デザイナ
Next.jsとTypescriptが奏でるUniversal JSの世界 ~commmune を支えるアーキテクチャ~
2020/11/01
ブックマーク
Next.jsはサーバレンダリング、ゼロセットアップなどモダンな機能を兼ね備えたフルスタック系Reactフレームワークです。commmuneではUniversal JSを実現する手段として採用し世界的なトレンドの先端を切り拓いています。 また、Typescriptは今や大規模開発には欠かせない基盤です。commmuneでは全レイヤーをTypescriptで統一しており、型の力を最大限引き出しています。
Next.jsとTypescriptが奏でるUniversal JSの世界 ~commmune を支えるアーキテクチャ~
2020/11/01
ブックマーク
Next.jsはサーバレンダリング、ゼロセットアップなどモダンな機能を兼ね備えたフルスタック系Reactフレームワークです。commmuneではUniversal JSを実現する手段として採用し世界的なトレンドの先端を切り拓いています。 また、Typescriptは今や大規模開発には欠かせない基盤です。commmuneでは全レイヤーをTypescriptで統一しており、型の力を最大限引き出しています。
【Meetup】SaaSプロダクトのフロントエンド／Vue.js、React、TypeScript、E2Eテスト
2020/10/29
ブックマーク
はじめに 今回は10/28開催の ラク スMeetup 『 SaaS プロダクトのフロントエンド／Vue.js、React、TypeScript、E2Eテスト』 の様子をお届けします！ ラク スがこれまで開催してまいりましたイベントの中でも最多の申し込みをいただき、 ラク スエンジニア3名が日々のフロントエンド技術の取り組みを堂々と発表させていただきました。 はじめに イベントテーマ概要 発表の紹介 テ
Reactでページネーションを実装
2020/10/28
ブックマーク
目次 はじめに ライブラリ(react-paginate)の導入 ページネーションの実装 おわりに はじめに こんにちは、スタメンでエンジニアをしている手嶋です。今回は「react-paginate」というライブラリを使用し、Reactでページネーションを実装する方法を紹介したいと思います。 ライブラリ(React-Pegination)の導入 まず「react-paginate」」の導入です。ページネーションのライブラリはいく
iOSDC Japan 2020 にメドレーが協賛しました
2020/10/02
ブックマーク
皆様こんにちは。インキュベーション本部エンジニアの濱中です。 9/19〜21 に iOSDC Japan 2020 （以下 iOSDC）が開催されました。 先日の記事 の通り、メドレーは 2017 年より iOSDC に 協賛 しております。 メドレーでは、Swift を利用してオンライン診療／服薬指導アプリ「CLINICS」iOS 版の開発をしています。 CLINICS(クリニクス) オンライン診療・服薬指導アプリ 5 回目となる今回
Lighthouseを使ってパフォーマンス監視する
2020/09/30
ブックマーク
こんにちは。フロントエンドエンジニアの 渡邉 です。 普段ReactとTypeScriptを書いています。 目次 Lighthouseとは Lighthouseを導入しようとした経緯 使ってみる 最後に Lighthouseとは Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can