React 内で JS のクラスインスタンスを用いる - fsubalEventEmitter とか外部の UI ライブラリ辺りが定番かと思う（カルーセルやスライダーのライブラリを自分でコンポーネントにラップした経験は数しれず）。 最近の JS では pure object + 純粋関数という #設計 を取るケースも増えたが、たとえば DOM API に対して副作用を起こすミュータブルな処理はクラスで書いたほうが自然なことも多い（ライブラリが new Slider のような形式を取るのもそれが理由だろう）。
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
AWS AmplifyのチュートリアルでJavascript(React)の環境を構築する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? いつも忘れないように、コンセプトから。 コンセプト ・お金かけてまでやりたくないのでほぼ無料でAWSを勉強する →ちょっとしたサービスを起動すると結構高額になりやすい。 ・高いレベルのセキュリティ確保を目指す →アカウントを不正に使われるととんでもない額を請求されるので防ぐ 前回は「AWSサーバーレスのWebアプリケーションをもっと勉強する」でいろいろ考察してみました。実際に触って試していきたいと思います。 まずはクライアントサイドから 実際に触って確認していくのですが、クライアントサイドの実装を選択します。前回も書きましたが、Angu
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 | Gihyo Digital Publishing … 技術評論社の電子書籍
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 著者 髙木健介，ユタマこたろう，仁田脇理史 著 発売日 2020年4月27日 更新日 2020年4月27日
ホームページ- EY-Office
世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。 今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。 React Hooks メイン (React.Componentクラスは解説程度) TypeScriptメイン Redux章には、Redux Toolkit を採用 これらの技術は、先端の技術を採用するネット企業等では既に使われている技術なので、ネット上には充分に情報があり楽勝かなと思ったのですが、案外苦労しました。 Create React App 2年前に 作りながら学ぶ React 入門 を書いた時には、まだ Create React App はありませんでした。Webpack, Babel, ESLint … をインストールし、設定ファイルを書かないと React が試せない状況で
Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
React’s unique strength is bringing to JavaScript development some of the benefits previously exclusive to more radically functional languages such as Elm and ClojureScript, without forcing you to completely eschew local state or rewrite code with exclusively immutable data structures. In this talk, Dan will demonstrate how React can be used together with Webpack Hot Module Replacement to create a
Can Swyx recreate React Hooks and useState in under 30 min? - JSConf.Asia
"Getting Closure on React Hooks" presented by Shawn "Swyx" Wang at JSConf.Asia 2019 The design of React Hooks requires a good understanding of closures in JavaScript. In this talk, we’ll reintroduce closures by building a tiny clone of React! This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Fi
Webpack チャンク最適 テクニック - Qiita
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
GraphQLの全体像とWebApp開発のこれから - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)です
AWS Amplify と AWS Cognito と TypeScript で作る ユーザー認証機能付き Next.js アプリ - Software development of explosion! －夢の破片（カケラ）たちの日々－
AWS Amplify とは？ aws.amazon.com モバイルアプリケーションやウェブアプリケーションを構築するための JavaScript フレームワークです。 これを使うことで、後述する AWS Cognito を簡単に使用できます。 AWS Cognito とは？ ユーザー管理を一括で行ってくれるユーザー認証サービスです。 Auth0 の AWS版といったところでしょうか。 この様に色々と設定できます。 Next.js とは？ React.js でサーバーサイドレンダリングするためのフレームワークです。 Vue.js の Nuxt.js のようなものですね。 やってみよう！ 1. Next.js with TypeScript な環境を作る https://nextjs.org のサイトの手順を参考に、TypeScript に対応した Next.js アプリが実行できる環境を
完全無料！JavaScriptのWeb開発手法を学習できるYouTube動画コースの厳選まとめ！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptをベースにしたWeb開発手法のトレンドを無料で学習できる海外のYouTube動画コースをご紹介します！ フロントエンドからバックエンドまでクオリティの高い動画コースを厳選しており、GitやFirebaseなどの予備知識も含めて多彩なコースをまとめました。 英語だから…と言って見ないのは非常にもったいないレベルの動画ばかりなので、ソースコードの動きをよく見ながらぜひ挑戦してみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！ ■Web開発の基礎を学ぶ まずはWeb開発を始める前に抑えておきたい基本的な知識を学習できる動画コースから見ていきましょう！ 主に、HTML / CSS / JavaScriptの3点を重点
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
フックに関するよくある質問 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいドキュメントではフックを使って React が学べます。 フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 このページではフックに関するよくある質問にいくつかお答えします。 導入の指針 フックが使える React のバージョンはどれですか？ クラスコンポーネントを全部書き換える必要があるのですか？ クラスではできず、フックでできるようになることは何ですか？ これまでの React の知識はどの程度使えますか？ フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？ フックはクラスのユースケースのすべてをカバーしていますか？ フックは
eslint-plugin-reactへのコントリビュートに挑戦してみた ~1月の活動を振り返る~ - toshi-toma blog
eslint-plugin-reactへのコントリビュートに挑戦してみた 今年からある程度まとまった単位で活動をブログなどの記事としてアウトプットしておくことで、それを使った振り返りができるように意識しています。 2020年もはや1月が終わり、どんなことをしてたか振り返るとeslint-plugin-reactへのPR作成に時間を使っていたのでまとめを書きます。 eslint-plugin-react GitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLint eslint-plugin-reactはESLintのプラグインの1つで、React用のルールが用意されています 有名なESLintのconfigであるeslint-config-airbnbなど、様々な場所で利用されています 最近は
翻訳：Rich Harris「形而上学とJavaScript」に関する見解（ReactによるDOMの抽象化の不完全性について） - yuhei blog
この記事は「Thoughts on Rich Harris’ “Metaphysics and JavaScript”」の日本語訳です。Svelteのコーディングスタイルや記事として言及している講演のスライドも併せて参照しなければ理解しづらい内容です。 公開にあたっては著者のJim Nielsen氏に許諾をいただいています。 要旨としては、ユーザーにとってSvelteは実際のDOMとのメンタルモデルのギャップが少なく感じられるデザインであって、結果的に、Reactより理解しやすいプログラミングモデルになっているという話です。 Svelteの考案者であるRich Harris氏は、Reactのプログラミングの側面を批判する「形而上学とJavaScript」というタイトルの最近の講演のスライドを共有しました。この講演には非常に説得力があり、Reactを利用した私の経験にも当てはまるとわかりまし
ライブラリのコードを読み解くNo.1 <Redux createStore編> - Qiita
はじめに ライブラリのコードを読み解いて、より深くライブラリについて理解するという記事です。 今回は状態管理のためのライブラリであるReduxのcreateStoreについて記載します。 この記事で説明すること ReduxのcreateStoreのソースコードの説明 この記事で説明しないこと Reduxのコンセプトや概要の説明 createStoreの使用方法やサンプルコードの解説 Reduxの概要を説明した記事はいろいろあるかと思いますので、公式サイトやいろいろな解説記事を見ていただくのが良いと思います。 個人的には、Reduxのco-maintainerであるMark Erikson氏によって書かれたこちらのスライドがわかりやすかったです。 対象読者 Reduxのコンセプト説明などのページを見て概要はなんとなくはわかっている人 ReduxのAPIを使用したことがある人 ライブラリバージ
JavaScriptのUIライブラリ ReactのHook使用してToDoアプリを作成してみました - Qiita
はじめに この記事ではJavaScriptのライブラリであるReactとReactの機能であるhookを使用して簡単なToDoアプリの実装を行います。 以前に書いた記事をベースに書き換えるので、そちらも参考にしてみてください。 JavaScriptのUIライブラリ ReactでToDoアプリを作成してみました Reactのドキュメントやチュートリアル（三目並べ）を一通り行った後の練習になるように書きたいと思います。 環境構築に関しては、create-react-appを使用して作成しています。 環境構築に関しては以前書いた記事があります。 ソースコード 目次 コンポーネントの確認 各コンポーネントの解説 まとめ 1. コンポーネントの確認 すぐに動かせる環境を置いておきます。 See the Pen ReactToDo with Hook by oq-Yuki-po (@oq-yuki-p
パフォーマンスチューニング、ちょっとその前に - pastak-pub
pastak.iconPasta-K @ Kyoto.js 17 こんにちは 誰 京都大学工学部情報学科7回生 株式会社はてな アルバイト TypeScript Nota Inc Gyazo開発チーム アルバイト JavaScript / React / Ruby on Rails / Browser Extension ビール仕入れ業 / ビールサーバー運用エンジニア 趣味: ビール🍻 今日のトークテーマ 先月ブログに書いた ウェブページの表示を遅くなくしたい時の道標 - ぱすたけ日記 の話をします 主にウェブページの表示に関するパフォーマンスの話 ウェブページのパフォーマンス 阿部寛のホームページは高速 素朴なHTML CSS無し テーブルレイアウト ウェブアプリケーションを作っていると、素朴だったページも雪だるま式に色んなものがくっついてくる 画像 JS/CSS あらゆるモジュール
スタイルガイド — Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Babel 7.10 Ships with Better React Tree-Shaking
