react

React Developer Tools Chromeプラグインとしてインストール Reactコンポーネントをデベロッパーツールから確認できる Reactを使用しているサイト上でアイコンが青色になる Node.js Reactの動作に必須 パッケージマネージャーとしてnpm、yarnがある

CDKでWebフロントエンドのSPAをデプロイするときの方法まとめ。下図のありがちなSPA構成を想定している。 このような場合、フロントエンドアプリからAPI GatewayのエンドポイントURLやCognitoのUser Pool IDなどの値を参照する必要があって、それらの値をどのように解決するか、どうデプロイするかなどに選択肢がある。早速、それらの方法を見ていこう。 方法 以下では、フロントエンドが参照すべきリソースを 依存するリソース と呼ぶ。(上図では API Gateway や Cognito User Pool のこと。) 方法1. 依存するリソースをデプロイ後、フロントエンドを…

私はFF14のエオルゼア文字を英数字に変換するアプリ「言語を超える力」を開発中です。内容はTensorFlowとObject Detection APIを用い、FF14のスクリーンショットからエオルゼア文字を探し、英数字にクラス分けするという中身です。「言語を超える力」を外部に公開するに向けて、「AWS+ECR+Lambda」という環境を作りたいと思っています。私が調べた所、その作業のためにはWindows環境にDocker環境を用意し、ECRへイメージをアップロードできるようにしたほうが良いようです。それに向けての準備を本記事では行います。

前回までのあらすじ Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。(ホントいつもの…) 結論から言えば VIte だからという事は特になく、create-react-app で作成したプロジェクトと大差ありませんでした ESLint パッケージのインストール $ npm i -D eslint eslint-plugin-react-hooks React のドキュメントに Hooks の呼び出し場所をコンポーネントとカスタムフック内に強制できる eslint…

ちょっぱやだと噂の Vite で React のプロジェクトを作ってみた素振りのメモ Vite とゎ？ 昨今の巨大な JavaScript のプロジェクトはモジュールバンドルのパフォーマンスがボトルネックになってきていた。 従来のものは更新頻度の少ないファイルも全てバンドルして提供していた。 開発サーバーでは10倍から100倍高速である esbuild を用いて依存関係を事前にバンドルし、 native ESM を利用することで頻繁に更新されるファイルを Dynamic import するようにして高速化させている。 Production ではコード分割やCSSの処理が成熟している Rollu…

間が空いてしまったが、練習として色々作ってみる。 今回は動画の一覧を表示してみる。準備編： DjangoとReactを使ったアプリケーションを作ってみる①(Django側の準備) - doramochi blog DjangoとReactを使ったアプリケーションを作ってみる②(React側の準備) - doramochi blog 素材の準備 モデル修正とDBの準備 モデルの修正 DBの準備 フロントエンド側の修正 Material UIのインストール Component作成 App.jsの修正 素材の準備 まずは練習に使用する動画と画像をダウンロード。 今回はNHKクリエイティブ・ライブラリ…

recoiljs.org const localStorageEffect = <T>(key: string): AtomEffect<T> => ({setSelf, onSet}) => { if (process.browser) { const savedValue = localStorage.getItem(key); if (savedValue !== null) { setSelf(JSON.parse(savedValue)); } onSet((newValue, _, isReset) => { isReset ? localStorage.removeItem(ke…

更新日時 2022/05/17/07:00 Qiita Trends Daily 1位 ※前日5位 SRE,srenext Qiita Trends Daily 2位 ※前日3位 Android,googleio,GoogleIO2022 Qiita Trends Daily 3位 [New] データベース,機械学習,AI,データサイエンス,データマネジメント Qiita Trends Daily 4位 [New] 初心者,働き方改革,若手エンジニア Qiita Trends Daily 5位 [New] shopify Qiita Trends Daily 6位 [New] 勉強会,初心者,…

前回はとりあえず fetch してレスポンスを確認しただけだったので、フォーム入力されたデータを使って、ページ遷移します下記エントリで Native React で Fetch を作り込んだ「/api/connect」、「/api/latestdataset」からデータひっぱってきたいと思います konchangakita.hatenablog.com 【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 ・ログインページをデザイン ・フォーム制御 ・とりあえずFetch ・FetchからRouterでページ遷移 ←イマココ ・SSR で fetch する ・Layou…

こんにちは。たいきゅんです。 今回は、改めてエンジニアの勉強法を学習を再定義してみようと思います。 転職活動のエンジニア面接において毎回「勉強法を教えてください。」という質問を行い、面接官の方の勉強法を色々と聞いてみました。 そこで学んだことをアウトプットしていきたいと思います。 ①私の学習法 私はまず作りたいものを決めてそれを達成するために必要な学習を積み上げる学習方法でやってます。 「GoでTodoアプリを作りたい」とか「Vueでaxiosを使ってリクエストを送信できるものを作成したい」等です。 作るために必要な知識は基本的に理解できるものの、より深い知識や体系的な知識が不足していたのも事…

（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇‍♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を…

こんにちは、ForSchoolチームでエンジニアをしている島田です。最近の好きな漫画は「白山と三田さん」です。 今回はStudyplus For School(以下FS)のseed運用について説明します。 FSは以下で構成されたSPAです。 サーバーサイド：Ruby on Rails フロントエンド：React.js Railsの環境構築時などで初期データをローカルのDBへ投入する場合に、Railsのseed( $ rails db:seed )を利用している方が多いのではないでしょうか？ FSチームでもRailsのseedを利用していたのですが、以下のようなことが発生していました。 モデルが…

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

個人開発（趣味プロジェクト）でプロダクトを作りながら, 本職の仕事でソリューションアーキテクトっぽいことをしているマンです*1. 最近は個人開発のネタとして, プロ野球選手の成績予測プロジェクト ヘルスケア周りの自分専用プロダクト開発 この2本軸で週末エンジニアリングをしているのですが, これらの事をしているうちに, Webアプリケーション + 分析用のデータ基盤の最小セット, みたいなパターンが見えてきた クラウドにおけるサービスの選び方・スケール（=拡張）するときに気をつけるべき勘所 みたいなのがまとまってきました. せっかくなので, 言語化した上で再現性をもたせよう！という主旨でこのエン…

最近の起床時間 最近アラーム設定せずに寝ているんですが、起床時間は7時～8時頃と安定してきました。今まで2度寝して9時頃に起きるってこともあったんですが、それもなくなり、今日は起床後の倦怠感もなく、すんなり起きれました。 昨日マウスが壊れた 昨日マウスが壊れたので、今は代替品を使ってます。 今まで使ってたのは3年保証があったので、昨日チャット式のやつで問い合わせたのですが、外国人の人でシステムで翻訳してやり取りしてました。 24時間～48時間以内にメールで連絡するとのことでしたが、ちゃんと伝わってるのか不安なので、明日電話で問い合わせてみようと思います。 今日やること 今日はこれから家で軽くス…