りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】：くるみ割り書房
💡 紙本+電子版セットは BOOTH にて。 https://oukayuka.booth.pm/items/2368045 ―――― シリーズ累計 2.5 万部を突破、仕事で使える React 本と評価の高い『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。全 3 巻構成となっている第 1 巻「言語・環境編」です。 最新のフロントエンド環境構築ツール Vite の使い方に始まり、JavaScript（ES2022）、関数型プログラミング、TypeScript までをカバー。JS のパワーをフル活用する React を使いこなすための基礎力を固めます。 「フロントエンドの開発になぜ Node.js が必要なの？」「使っている各種のツールは何をしてくれてるの？」「import はどうやってファイルを読み込んでるの？」のような、学習者が抱く根本的な疑問にまで
【React】画像を表示するパターン。
概要 Reactで画像を参照する方法は通常のhtmlとは方法が違うので、忘備録としてメモ。 また、画像を参照してCSSで背景画像として設定する方法もメモ。 画像を表示する方法 publicフォルダにある画像を参照する create-react-appでプロジェクトを作成するとpublicフォルダが作成されている。 publicフォルダ内に配置したどのようなファイルも、オンラインでアクセスできる。 例えば、publicフォルダにさらに画像だけのimagesフォルダを作成してpublic/images/dummy.jpgという画像が場合、ローカル環境（localhost）でReactを動かしているとき、画像は以下でアクセスすることができる。
【NextJS】NextJS・TypeScript・Apollo Clientを使ってGraphQL・Apollo ServerのAPIにアクセス - 株式会社isub
【Next.js】 2023.08.01 【NextJS】NextJS・TypeScript・Apollo Clientを使ってGraphQL・Apollo ServerのAPIにアクセス 1. 概要 上記、記事ではBack-End側のAPI開発の内容でした。今回は上記APIにアクセスし、データを取得するFront-End側の開発をする内容となります。Next.jsやApollo Clientを使い、GraphQLよりデータを取得してみます。 対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。 2. Back-End側のAPI開発 こちらを参考 【GraphQL】Apollo ServerやPrisma・MySQL・TypeScriptを使ってGraphQLの更新系APIを開発する (isub.co.jp) 3. nodeのイ
(自称) 日本一わかりやすいemotionのドキュメント - Qiita
※ あくまで自称です。笑 ※ 今後もどんどん拡張していく予定です。 ※ emotion/styled に関しては割愛する予定です。 Emotionとは？ フレームワークにとらわれず使うことができるCSS in JSのフレームワーク。 (styled-componentsと比較されがちだが、emotionの方が後発であるためstyled-componentsができることは基本できます。) 初期設定 利用したいEmotionのパッケージをインストールする Emotion関連のパッケージ @emotion/css フレームワークにとらわれず、Emotionを使用するためのパッケージ。 @emotion/react React用のEmotionパッケージ。 @emotion/styled styled-component っぽい記法で書くことができるEmotionパッケージ。(筆者はstyled-
React × Viteで新機能を開発した話(採用理由、実装、CI/CD)
オンライン家庭教師マナリンク CTO の名人です。 先日マナリンクでリリースした新機能でReactとViteの組み合わせを選定しました。 本記事ではReactとViteについて、以下の順で解説させていただきます。気になるところから読んでいただければ幸いです。 採用理由 実装の内容（環境設定、ライブラリ選定、コンポーネント設計など） CI/CD（デプロイ、テスティング、Linterなど） React×Viteの採用理由 マナリンクについて 採用理由を説明するにあたって、簡単にマナリンクの事業背景を説明します。 マナリンクは、オンライン家庭教師と生徒（と保護者）を繋ぐプラットフォームを運営している事業です。 大きく分けて3つの性質の違うプロダクトを開発しています。 オンライン家庭教師を集客するメディア 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト 宿題やチャッ
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
オンラインショップをヘッドレスコマースでいい感じにした話｜yuya
アメリカ発のD2CスタートアップRamen Heroが、どのようにしてオンラインショップをリニューアルしたのか、背景や経緯を含めて紹介します。 この記事について以下のような方々にとって、少しはお役立ちできる内容になっているかと思います。 ・D2Cサービス運営に関わる方 ・オンラインショップ運営に関わる方 ・Shopifyを利用している方 ・（特に、スタートアップの）エンジニアの方 はじめにこんにちは、Ramen Heroでリードソフトウェアエンジニアをやっているyuya（Twitter）です。 Ramen Heroは、サンフランシスコ ベイエリアを拠点とするフード系D2Cスタートアップです。 アメリカ全土（一部地域を除く）に本格的なラーメンを冷凍で配送しています。 Ramen Heroについての詳しい説明はこちらの記事を参照してください。 私達のオンラインショップは2020年の4月にブラン
【初心者】React × TypeScript 基本の型定義
はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わる型定義） 先述の記事を書いている際、TypeScriptを用いたReactの基本的な型定義について網羅的にまとめている記事がまだまだ多くないように感じたため、今回「React × TypeScriptの基本の型定義」について改めてまとめ直してみることにしました。 TypeScriptの基礎学習を終え、これからTypeScriptを利用してReactやNext.jsでの開発をしてみようという方の参考になれば幸いです。 そこそこ長
GraphQL IDE の “GraphiQL” をカスタマイズして、開発ツールとして活用する - Hatena Developer Blog
こんにちは．マンガチームの id:mangano-ito です．最近は GraphQL API の開発を担当しており，GraphQL に関することを勉強したり実践したりしています．今回は開発ツールについてのお話です． GraphiQL とは GitHub API での使用例 GraphiQL を導入してみよう ツールバーをカスタマイズしてみよう ヘッダーやクエリをカスタマイズしてみよう 実際に開発ではどう使っているか GraphiQL とは graphql/graphiql: GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. GraphQL API の使いやすい GUI クライアントです．GUI クライアントなので GraphQL ではなく Graph i QL となっているのが
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
Uber Eatsの障害についての事実をReact Nativeの観点から確認する - ナカザンドットネット
公式アナウンス ユーザーの声 React Nativeっぽい 2つの事実を確認する RedBoxが表示されている Textコンポーネントについてのエラーが出ている 追記 感想と邪推 追記：Textコンポーネントのエラーが起きるパターン おわりに 本日、Uber Eatsで大規模障害がありました。React Native絡みのようなので、今わかっている範囲の事実だけメモしておこうと思います。 公式アナウンス 【システム障害に関するお知らせ】 現在、Uber Eatsアプリのシステム障害の為、サービスを一時停止しております。 ご迷惑をおかけしますが、復旧までしばらくお待ちください。— Uber Eats Japan（ウーバーイーツ） (@UberEats_JP) 2020年1月16日 【サービス再開のお知らせ】 サービスを再開いたしました。 ご注文に影響のあった注文者の皆様には個別にメールにて
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】 - Qiita
『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】FirebaseReactreduxmaterial-ui はじめに 前回の記事では『電卓』の実装をしました。 その後以下の面白い記事と動画を見つけたので、早速参考にしてLINE風のChat機能の一部分を実装してみました！ React & Firebaseで簡単なChatアプリを作ってみた Firebaseあればサーバーサイドエンジニア要らない説 一気に全部書くとすごく長くなりそうなので【準備編】、【Component編】、【状態管理編】の３部構成にして記事を書きたいと思います。今回は【準備編】です！ 前回の記事 『React』+『Redux』でiPhoneに入ってるような電卓を作ってみよう！ 次回の記事 『React』 +『Redux』 + 『Firebase』でLINE風のChat
Sentry で始める快適エラートラッキング on React Native
この記事は React Native Advent Calendar 2017 の 4 日目の記事です。 TL;DRエラートラッキングサービス Sentry の React Native における導入方法の紹介Sentry を使えば、 OS ・バージョン等どのような環境でどのような問題が起きたかがわかるようになるどのユーザがどのようなシチュエーションで問題に遭遇したかがわかるようになる基本的な使い方を紹介 エラートラッキングの必要性とその方法一切の問題無くアプリケーションが動作するのであればそれに越したことはありませんが、十分なテストを以てしても予期せぬ障害は起きるものですよね。 そういった問題は全て解決されるべきですが、そのためには以下が不可欠でしょう。 問題が発生したことに気付ける仕組み問題が発生する原因を（容易に）知ることが出来る仕組み文字通り解釈すれば前者をエラートラッキングと呼ぶ
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
reduxをtypescriptで使うならこれを使うしかない。(typescript-fsaがすごい) - Qiita
reduxをtypescriptで使うならこれを使うしかない。(typescript-fsaがすごい)TypeScriptreduxtypescript-fsa ReduxとTypeScriptっていまいち相性が良くない？ TypeScriptとReact.jsって相性が良いですよね。 実際Reactを使うのにTypeScriptとかflowを推奨している気がします。 Reactの学習を始めるのにも補助輪として有効ではないかと思います。 その辺は 古いですが 「TypeScriptを使ってreactのチュートリアルを進めると捗るかなと思った。」 を見ていただければご理解いただけると思います。 さて、しかしながらです。この調子でReduxもTypeScriptで学習初めたら捗るかと思いましたが 上手く行きませんでした。 理由の一つとして reduxにおいてAction は概念として重要なもの
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた
複数人でプレイできて、経営シミュレーションの仕組みを取り入れたゲームを作りたい。Stardew Valleyから交流機能を省いた、経営活動ができるゲームだ。 こう考えた私は、PHPとReactJSでゲームを開発することにしました。 しかし問題は、複数人でプレイするゲームの構成や、プレイヤーと経営の仕組みを実装する方法について何も知らなかったことです。 自分自身にReactJSを使うだけの知識があるのかすら分かりませんでした。初期のバージョンではサーバーの処理と経営の仕組みを実装することに重きを置いているので、インターフェイスの構築にはReactJSが適しています。経営の仕組みとして考えている農業とのインタラクションについては自信がありませんが、経営システムを単一のインターフェイスで構築するのは魅力的なアイデアです。 私がJavaScriptによるゲーム開発に関する本を執筆したきっかけは、d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rakkasjs/rakkasjs: Bleeding-edge React framework powered by Vite
GitHub - oldboyxx/jira_clone: A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.
https://qiita.com/merrill/items/cdfe983b057549481380