Established UI patterns are often underutilized in the frontend development world, despite their proven effectiveness in solving complex problems in UI design. This article explores the application of established UI building patterns to the React world, with a refactoring journey code example to showcase the benefits. The emphasis is placed on how layering architecture can help organize the React

（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン） この記事では、現在のモダンウェブ開発において注目されている Blazor と React の 2 つのフレームワークを比較します。読者の皆様にとって、どちらを採用するのがよりご自身の状況に対して適切かを判断する材料になれば幸いです。(2023年2月最新情報に更新しました。) シングルページアプリケーションを開発する場合、様々なフレームワークの選択肢があります。最も一般的な選択肢は、Angular、Vue、React の 3 つです。ただし、これらのフレームワークでは、JavaScript または TypeScript を使用する必要があります。JavaScript を扱いたくない場合の解決策としては、Blazor があります。 この記事では、以下の内容を取り上げます。 Blazorの概要 - 現在の状況／特徴 Web

前書き 会社でデスクトップアプリを作っているんですが、Webのほうが開発速度が速くてネットにも割と情報がたくさん落ちているので、どうにかWebでデスクトップアプリ作れないかなーということで探していたところ、Electronにたどり着きました。Tauriもいいなーと思ってんですが、Windows10向けのアプリが多いためできればWebView2に依存したくないなということで、今回はElectronやっていきます。UIは今もうほぼ一強のReact.js、バンドルはViteとかが流行りですが正直まだプロダクトに使うには厳しいかなということで安定のWebpackです。 この記事では、環境構築、IPC通信でコンソールに文字を表示、コマンドの実行、ファイルアクセス、通知、そしてexeの作成までやっていきたいと思います。 盛りだくさんなので長くなりますが、これを見ればとりあえず基本的なことはできるように

ReActとは？ LLMのpromptingの方法の一つです。LLMに質疑応答させたり、意思決定させたりという場面で力を発揮するほか、外部データベースや外部APIとLLMを組み合わせる場合にも使えます。 また、LangChainでもReActの考え方は多く活用されています（エージェントなど） 今回はReActが提案された論文REACT: SYNERGIZING REASONING AND ACTING IN LANGUAGE MODELSを細かくチェックしていきます！ 論文のソースはこちら： この記事を見て分かること CoT、ReActのノリが分かる ReActの限界と能力の向上方法について理解できる Let's Go! 元の論文の各章の内容要約＋一言コメントでまとめています。ちょっとLangChainとか齧った方なら理解できる程度のものだと思います。（内容要約が分からなかったら所感だけ見

【Next.js,microCMS,AWS】 ポートフォリオサイトを作ってAWS サーバーレスアーキテクチャでデプロイS3TypeScriptCloudFrontNext.jsmicroCMS はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Actions figma 制作ポイント デザイン デザインを考える上で

はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳

はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は環境構築をしてWEBアプリを作成し、起動するところまでをやりました。 また、Chromeの開発ツールの導入も行いました。 今回は作成したプロジェクトを一度俯瞰して見てみましょう。 VSCode 開発のために使うIDEとして VSCode を使うことにしました。簡単に手に入りますからね。 前回の復習 前回は、以下のように任意のディレクトリでReactアプリのプロジェクトを作成しました。 % npx create-react-app my-app VSCodeを簡単に開けるようにしよう もし「VSCode を初めて使うよ」って場合は、ちょっと一工夫しておくと良いかと思います。 ま

日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 React 17 には新機能はありませんが、新バージョンの JSX トランスフォーム (JSX transform) に対応します。この記事ではこれがどのようなもので、どのように試せるのかについて説明します。 JSX トランスフォームとは？ ブラウザはそのままでは JSX を理解しないため、ほとんどの React ユーザは、Babel や TypeScript のようなコンパイラを利用して JSX コードを通常の JavaScript に変換 (transform) しています。Create React App や Next

個人サイトをNext.jsとesaを使って作った。 スタイルが適当だったりmetaとか色々設定してないけど、記事が見れればいいっしょ、ぐらいのノリなので、とりあえず公開している。 corocn.dev モチベ r7kamura氏のエントリを見て作ろうと思った。 https://r7kamura.com/articles/2020-09-21-personal-website 概ね理由は同じだが、フィードバックと適切な距離を置いて、アウトプットへのハードルを下げたいのが理由。前から作りたいなと思っていたので、えいやで構築した。 このネタどこで書こう、Qiita? Zenn? note? はてブ? というように選択コストが上がってきたのと、プラットフォームが燃えてると自分の記事まで燃えている気持ちになるのにつらみを感じたので、雑に個人サイトでアウトプットする形に戻した。技術ネタ以外も書きたいし

経緯 Axiosに認証トークンを設定する処理を共通化したい 何ならAxiosを使用する際にトークン設定済みの状態にしたい 方法 Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。 実装 ラッパーファイル（例：customAxios.ts） import axios from 'axios'; // Axios本体をインポート const instance = axios.create(); // Axiosインスタンスを生成 instance.interceptors.request.use( (config) => { // 認証トークンをヘッダーに付与 config.headers.common['Authorization'] =

はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。

はじめに 今まで作ったアプリケーションに今回は登録されているデータを条件によって検索できる機能を実装していきました。 今回作ったアプリケーション 一つの画面の中に条件フォームを作り、絞りこみボタンを押すとその条件に合致した情報を画面上に表示する機能です。 例えば以下の画像では「好きな住居形態」という項目で「森」を選んだ結果、合致するゴリラとhatakeyamaが画面に表示されました。 前回のページネーションがちゃんと作動しているのでページネーション番号もちゃんと表示されています。 また絞る条件は一項目ではなく複数項目選ぶことができます。 今回使用するコンポーネント 条件検索のロジックを持ったUserInfoFilterコンポーネントと条件検索で帰ってきた値を格納するUserInfoコンポーネントを今回使っていきます。 UserInfoFilter.tsx(条件検索するコンポーネント) im

Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start

記事の概要と動機 Takepepeさんの「AtomicDesign 境界線のひき方」という記事を読んでいて、はたと気づいた。「限定的コンポーネントを横断的なものに移行する」という箇所は、SOLID原則のISPとそのリファクタリングの話だ。ISP（Interface Segregation Principle）とはインターフェース分離原則である。 コンポーネントは、はじめは限定的コンテキストで実装するべきでしょう。共通利用される頃合いに、リファクタリングすれば十分です。その際に忘れてはならないことが「抽象化」です。 この記事は、Takepepeさんの記事中の以下の一文に対して、インターフェースという観点から解説を加えた返歌、つまりアンサーソングである。 コンポーネントのインターフェース フロントエンドのコンポーネントのインターフェースとは、単純化するとPropsの型である。 type Art

今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換

React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode

styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS