WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデートJavaScriptReactNext.js Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Static Regeneration (beta) 段階的な静的ページ再生成がサポートされました。 Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しい
Reactの主流は「関数コンポーネント＋Hooks」へ 現役フロントエンジニアが教える導入までの経緯と導入後のメリット
「Mix Leap Study」はヤフーの独自技術や業界の最先端テクノロジーに触れる勉強会。第59回は「React とその仲間たち」と題して、より実践的にReactを使うための仲間たちにも注目。ジェムクックのフロントエンジニア西村氏が、React Hooksを実際に導入してみて、導入前に比べてどのようなメリットがあり、問題点はなかったのかについて話をしました。関連資料はこちら。 React Hooks公開から1年で得られた知見 西村爽氏：西村です。よろしくお願いします。『React Hooks公開から1年で得られた知見』ということで、株式会社ジェムクック（Gemcook）でHooksを導入するまでの経緯と導入後のメリットを語りたいと思います。 まず僕のプロフィールです。ジェムクックでフロントエンドエンジニアをしている西村爽です。ふだん主に使っているのはTypeScript、React、Re
りあクト! 第3版がすごくよかった - happy developing
会社のフロントエンドエンジニアの方にReact/Typescript関連のおすすめのドキュメントを聞いたところりあクトを教えてもらいました。 読んでみてとてもおもしろく、おおげさですが感動してしまったので感想を書きます。 読んだ本りあクト！ TypeScriptで始めるつらくないReact開発 第3版(200912) りあクト!第3版Ⅰ. 言語・環境編Ⅱ. React基礎編Ⅲ. React応用編私とフロントエンド 普段仕事ではmovoという物流業界向けのSaaSのバックエンドでGoを書いています。 各種プロダクトのフロントエンドはReact(16.9)/Typescript(3.7)で書かれているのですが、swagger/openapiの生成までしかタッチしていないので フロントのコードを読めるようになりたいと思っていました。 ReactについてはUdemyのコースを買ってみてTODOを中
SIerの輪廻から解脱するための技術｜はまあ
モチベーション最近「SIer界の輪廻からどうやって解脱したらいいですか？」 という話をちょくちょく耳にすることが増えた。 それに対する"解答"というわけではないのだけど、輪廻からの解脱を目指すにあたり、どんな要素技術を学ぶべきかについてはある程度指針を示せると思ったので今回は、選ぶべき技術と、その理由について解説していきます。 SIer界で輪廻転生を繰り返したい人はジャバ言語のラムダ式を禁止にすべきか議論するほうが大事だと思うので、こんな記事にクソリプする前にさっさと帰って、どうぞ。 TypeScript解脱への第一歩は、なにはともあれTypeScriptだろう。 正直、この言語だけ覚えておけば、FaaS(Lambda, Cloud Functions)も書けるし、ReactによるSPAとか、なんならReact Nativeでアプリも書けるし、モダンな開発環境に必要なスキルセットがすべてま
[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は作成されたプロジェクトの中身をサラッと見ていきました。 今回は、Reactでよく使われる基本キーワードを抑えていくことにします。 React独自なものやJavaScriptのものが混ざっていますが、 頭が混乱しないように言葉の定義を覚えておくのも大事ですね。 React 初回のブログでも「Reactとは」については書きましたが、あらためてこちらでもまとめようと思います。 React ReactはFacebook社によって開発されたJavaScriptのためのユーザインターフェイス構築用のライブラリで、 VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラ
![[React] よーし! いっちょReactやってみっか! #3 基本キーワード編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 主にiOS担当のモバイルアプリエンジニアをやっている身として、Swiftの記事をよく書いているのですが、 「たまには他のこともやらないとなー」と思いまして、React.jsを始めてみることにしました。 この記事は、その奮闘記と思ってくださいませ。 Reactとは あらためて「Reactとは」というお話をすると、 React (リアクト) は、Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理（英語版）・ルーティング・APIとの対話のための追加のライ
![[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Webpackの入門書
Webpack入門書です。 ReactやVueでプロジェクトを立ち上げてしまえば、Webpackは設定済みのままプロジェクトが作成されますので、Webpackについては全く知らずに使っているという方も多いのではないでしょうか。 Webpackはちゃんと使うことでBundleサイズの削減、ひいてはパフォーマンスの向上が期待できます。 今回はそこまで踏み込んだ内容ではありませんが、Webpackについての最低限ここまで知っていればいいだろうという知識を集約しました。 Webpackの公式サイトは日本語に対応していないので、こちらに目を通していただければWebpackについての基本を抑えることができます。
快適なUXの裏には泥臭さがあった？ 新サービス開発に「React×Next.js×AMP」採用のワケ
2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP（Accelerated Mobile Pages）である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。 React×Next.js×AMP――この組み合わせを採用した背景 「ホットペッパービューテ
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
React ユーザーインターフェイスフレームワークを使用して Amazon Chime SDK ウェブアプリケーションを構築する
本日より、ウェブデベロッパーは、Amazon Chime SDK React Component Library を使用して、リアルタイムの音声、動画、および画面共有ウェブアプリケーションでのデバイス選択やローカル動画プレビューなどの一般的なユーザーエクスペリエンスの実装を簡素化できます。上位レベルのコンポーネントを使用して構築することで、デベロッパーは、アプリケーションのカスタマイズに集中でき、オーディオと動画のパラメータの慎重な設定を必要とする複雑なクライアント実装への投資を削減できます。 Amazon Chime SDK React Component Library は、ウェブアプリを管理するためのオープンソースの JavaScript フレームワークである React に基づいて、クライアント側の状態管理と、オーディオおよびビデオ会議アプリケーションで使用される一般的なウェブイン
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
モダンなWebフロントエンドの技術とAMP | Recruit Tech Blog
リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リクルートライフスタイルでは、じゃらんやホットペッパーグルメ、ホットペッパービューティーといった従来のWebサービスだけではなく、
Reactの環境変数をdotenv-cliで切り替えてみた | DevelopersIO
dotenv-cliを導入 dotenv-cliのパッケージをインストールして利用してみます。 dotenv-cliをインストール dotenv-cliのパッケージをインストールします。 npm install --save-dev dotenv-cli 環境変数のファイルを作成 プロジェクトのルートディレクトリに環境変数を定義するためのファイルを作成します。 ├ .env # ローカル環境 ├ .env.development # 開発環境 ├ .env.staging # 検証環境 ├ .env.production # 本番環境 各ファイルで環境変数を定義します。 REACT_APP_API_ENDPOINT=https://dev.example.com/v1/ REACT_APP_API_ENDPOINT=https://dev.example.com/v1/ REACT_APP
ReactHooksを利用したCRUDアプリケーションを作成してみる | フロントエンドBlog | ミツエーリンクス
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの24日目の記事です。 React v16.8.0で正式にHooksが導入されましたね。 ReactHooksはstate、context、ref、ライフサイクルなどReactで扱うには少々非効率的であったAPIを、シンプルで扱いやすい形に置き換えたような機能です。 各hookの機能は公式サイトに詳細が記載されていますが、本稿では1つのアプリケーションの中で実際にどのように組み込まれ、機能するのかをTODOリストの作成という形で試してみたいと思います。 カスタムフック useState useEffect useContext useReducer useRef また、本稿の趣旨はHooksの機能紹介となりますので、Reactの基礎的な部分やReduxを模した状態管理の手法については割愛いたします旨ご了承ください。それで
AWS CDKでReactアプリをデプロイしてみた | DevelopersIO
デプロイ手順 AWS CDKをインストール AWS CDKでデプロイ用のコードを書く Create React AppでWEBアプリを作成 AWS CDKでデプロイ やってみた AWS CDKをインストール AWS CDKをインストールします。 npm i -g aws-cdk プロジェクトを作成します。 mkdir aws-cdk-deploy-react cd aws-cdk-deploy-react cdk init app --language=typescript AWS CDKでデプロイ用のコードを書く 必要なパッケージをインストールします。 npm install @aws-cdk/aws-cloudfront @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment --save デプロイ用のコードを書きます。 import * as cdk f
React + Material-UIで管理画面を作成してみた | DevelopersIO
Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │ └ atoms/ # 原子（個々のパーツ） │ └ molecules/ # 分子（原子の集合体）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flutterで始めるモバイルアプリ開発一覧
宣言的UI
AWS でフルスタック React アプリケーションを構築