react

はじめに こんにちは、技術本部 Bill One Engineering Unit の江川です。 普段は、Bill OneでWebアプリケーション開発をやりつつ、フロントエンド周りの技術的な改善に向き合ったりしています。 今回は、バックエンド編の続きとして、フロントエンドにおけるConnectによるスキーマ駆動開発の実例を紹介できたらと思います！ なお、本記事は【Bill One 開発 Unit ブログリレー】という連載記事のひとつになっています。他の記事もぜひぜひご覧ください！

React でのアプリの作り方の流れを、React の流儀 – Reactの検索可能な商品データ表を例に学んだ。 モックを作る UI をコンポーネントの階層構造に落とし込む React で静的なバージョンを作成する UI 状態を表現する必要十分な state を決定する state をどこに配置すべきかを明確にする 逆方向のデータフローを追加する モックを作る まずはモックを作る（ゴールをみてどんなものが必要になるかを考えられる状態にする） モックから始めよう UI をコンポーネントの階層構造に落とし込む モックを構成する各コンポーネントを四角で囲んで命名する。 どんな役割なのかを整理する。 …

こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『レンダリングの最適化』について学びます。 コンポーネントが再レンダリングされる条件 サンプルコード memo - コンポーネントのメモ化 - useCallBack - 関数のメモ化 - useMemo - 変数のメモ化 - まとめ コンポーネントが再レンダリングされる条件 前回のおさらいです。Reactにおいて、コンポーネントの再レンダリングが発生する条件は、（大まかに言って）以下の三つでした。 コンポーネント内の状態管理されている値（state）が変更されたとき 親…

Reactにおけるstate（状態）は、コンポーネント内部で管理されるデータのことを指します。 stateは、コンポーネントの見た目や動作を変更するために使用されます。 Stateの初期化 コンポーネントでstateを使用するには、まず初期値を設定する必要があります。 クラスコンポーネントでは、コンストラクタ内でthis.stateを使ってstateを初期化します。 関数コンポーネントでは、useStateフックを使用して初期値を設定します。 Stateの初期化 Stateの使用 stateは、コンポーネント内の任意の場所で使用できます。 例えば、イベントハンドラ内でstateの値を変更したり…

こんにちは。マネックス証券で投資情報システムの開発している倉田です。 今回は私が個人的にお勧めしているIonic Reactを使用してクロスプラットフォームアプリを実装したいと思います。 IonicではAngularも使用できますが、今回はReactにフォーカスしたいと思います。 Ionicをざっくりと説明しますと、Web技術を活用してクロスプラットフォームのモバイルアプリを構築するためのフレームワークです。 プラットフォーム固有のコードを書かずに、1つのコードベースでiOSとAndroidの両方のプラットフォームに対応できます。 React Nativeほどメジャーではないのですが、それぞれ…

はじめに RecoilというReactの状態管理ライブラリが存在します。 自分はよく、/user/meから取得したユーザー情報をこのRecoilのStateに入れて保管しています。 しかしただログイン状態を入れるだけでは、複数タブで同じページを開いている場合に片方がログアウトしたという状態になっても片方はまだユーザーがRecoilに保持されていてログインしているように見えてしまうという問題があります。 なのでこの記事では、StateをBroadcastChannel APIを使用して同期してみようと思います。 Atom Effects RecoilにはAtom Effectsという非常に便利な…

要素とは 要素を DOM として描画する コンポーネントとは 関数コンポーネントとクラスコンポーネント コンポーネントのレンダー クラスにローカル state を追加する ライフサイクルメソッド 参考 要素とは 要素は React アプリケーションの最小単位の構成ブロックであり、画面上に表示したいものの説明書き： const element = <h1>Hello, world!</h1>; React 要素はオブジェクトで、 React DOM が React 要素に合致するように DOM を更新する作業を行う。 要素を DOM として描画する 次の <div> 要素があるとする： <div…

前回は GraphQL を Postman から叩いてみました。 koko206.hatenablog.com 今回はその続編として、Android から GitHub の GraphQL API を叩いてみようと思います。 （該当リポジトリ） Apollo とは Apollo は GraphQL API 用のライブラリで、React, Kotlin, iOS 用のクライアント sdk が用意されています（サーバー用にも用意されています）。 android では Apollo が実質デファクトであるため、今回はこちらのライブラリを使って Github API を叩いてみます。 apollo k…

こんばんは。 3週間近く手間取っていた、Reactでフロントエンド、Goでバックエンドを記述したローカルホストのウェブサイトが完成しました。 できることとしては、バックエンドではデータベースに接続してあるので、そこに名前と年齢をリストにして保存すること。 そしてサイトからデータベースに新たな情報を送ってリストに加えたり、データベースの情報を取得して表示したりすることです。 やってることはまだまだ初心者レベルなんですけど、よくわからないエラーがいっぱい起きるのでほんとに手間取りました。 完成して嬉しいです。 おやすみなさい。

こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『Reactのルーティング』について学びます。 はじめに 基本的なルーティング Not Foundページの設定 ネストされたルーティング ルーティング定義の切り分け まとめ はじめに Reactでルーティングを設定するにあたって、『React Router』というライブラリを使用します。 reactrouter.com 下記コマンドで、ライブラリをインストールしてください。 npm install --save react-router-dom ※本記事ではReact R…

最新技術ネタとして「View Transition API」触ってみる。 やること MDNのドキュメント読む 解説記事読む デモ作る MDNのドキュメント読む View Transitions API - Web APIs | MDN 名前つけておくとスクショ撮って追跡、DOM間アニメーションできるよという感じか。 HTML側のサンプルコードなかったのでまだ全体像は把握できていない。 解説記事読む ics.media 雑多な感想 さすがソースコードあり有難いです。 SPAフレームワークでも使えるみたい。業務向けにどちらも込みで把握しておきたい。 画像ビューラーとしてのUI演出、素敵ですね。 d…

4年目が終わった。もう完全にシニアエンジニアです！3年目終わり。 ningenme.hatenablog.com 2年目終わり。 ningenme.hatenablog.com コードレビューし続けた一年。以下4年目までの技術スタック。 DB・データストア・ストレージoracle postgres mysql aurora redis s3 aws sqs (触らなかったもの)cassandra memcached dynamo solr 今年は永遠にoracle触ってた。dockerでoracle作るときのノウハウとかが無駄に蓄積された気がする。 あとはmysql 8も結構。5.7の時の認識…

2023年5月21日（日）に池袋サンシャインで開催された技術書典14 オフライン開催にブース出展し、23日（火）には技術書典のYouTubeチャンネルで開催される「技術書典14スペシャルオンラインイベント」に出演しました！ オフラインイベントの会場やkintone同人誌を販売したブースの当日の様子や、YouTube Live配信の様子をお伝えします。 技術書典14 オフライン開催の概要 techbookfest.org 会期：2023/05/21 (日) 11:00～17:00 会場：池袋サンシャインシティ 展示ホールD（文化会館ビル2F） オンラインイベントは開催中！ techbookfes…

目次 目次 はじめに なぜKonva.jsをハンズオン形式で紹介することにしたのか Zine執筆を振り返って おわりに はじめに こんにちは、及川です。前回のアンさんのブログ記事に引き続き、Zine作成についての記事になります。 前回のブログ記事は以下です。 blog.lab.sugimototatsuo.com ネットワークデザインスタジオの大学院生3名で制作した「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブック」は以下から詳細を見ることができます。 techbookfest.org 私は、「PART 2 Konva.jsを使った写…

AWS Amplify に vite React で構築したアプリをデプロイしようとしたのですが、プロジェクトで使っている Node.js を v18.16.0 に固定していてビルドエラーになってしまったので Amplify で Node.js v18系を使えるようにしたまでのメモ 結論 AWS Linux:2 の場合は用意されている Node.js v18.13.0 を使うのが良さそう amplify.yml version: 1 frontend: phases: preBuild: commands: - nvm use 18 - node -v - npm ci build: comm…

エンジニア・プログラマーの学習に約立つコンテンツのセール情報を集めました 1位 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル ¥27,800 → ¥1,600 94%OFF!! ⭐ ⭐ ⭐ ⭐ （20,561件） 現役シリコンバレーエンジニアが教えるPython入門！応用では、データ解析、データーベース、ネットワーク、暗号化、並列化、テスト、インフラ自動化、キューイングシステム、非同期処理など盛り沢山の内容です！ 2位 【キカガク流】人工知能・機械学習 脱ブラックボックス講座 - 初級編 - ¥15,800 → ¥1,500 …

最近、AWS Amplify Studioという便利なツールが注目を集めています。AWS Amplify Studioは、ローコード開発のアプローチを取り入れており、誰でも簡単にWebサイトを作成できるクラウドベースのプラットフォームです。私も最近、AWS Amplify Studioを使って自分のWebサイトを作ってみました。この記事では、その手順と経験を共有したいと思います。 aws.amazon.com AWS Amplify Studioとは？ AWS Amplify Studioは、AWSが提供するローコード開発環境です。これを使えば、プログラミングの知識がなくても、直感的なインター…

AngularJS とは セットアップ 恒例のコードリーディング コンポーネントの追加 リリース ドキュメント 感想 AngularJS とは Google と OSS コミュニティで作成されるフロントエンドフレームワークです。 angular.jp セットアップ Angular のコマンドラインツールをまずインストールします。 npm install -g @angular/cli プロジェクトを作成していきます。 ng new my-app で作成です。 $ ng new my-app ? Would you like to share pseudonymous usage data ab…

この記事はOSSプロジェクトの一環で、コピペでDockerアプリを立ち上げるシェルスクリプトを集めてます。 まだまだ途中のコードなのでご協力いただける方は本Qiitaに編集リクエストを提出するか、以下のリポジトリにプルリクエストの提出をお願いします。 https://github.com/new-awesomedocker/awesomedocker/blob/main/Readme.jp.md CDN nginx git clone https://github.com/new-awesomedocker/awesomedocker.git cd awesomedocker/nginx do…