[B! javascript][React] satoshieのブックマーク

CSS-in-JSのパラダイムシフト

2023年現在、Reactでは多種多様なスタイリング手法が用意されています。代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの

satoshie 2023/04/21

リンク

Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita

はじめに今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法本記事では下記の7つをピックアップして紹介します三項演算子分割代入スプレッド構文配列操作アロー関数非同期処理(Async/Await/Promise) APIコール三項演算子三項演算子はMDNでは下記のように解説されています。条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。三項演

satoshie 2022/10/20

リンク

styled-components: API Reference

CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all

satoshie 2022/06/10

リンク

Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク

2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースしたキカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。

satoshie 2021/05/26

リンク

export defaultってなんだろう - Qiita

import { Sample } from './sample.tsx'; import { connect } from 'react-redux'; const mapStateToProps = .... ;　// 割愛 export default connect(mapStateToProps)(Sample);

satoshie 2021/04/20

リンク

if文はJSXの中で書け - Qiita

はじめに今日、インターン先オフィスでReactを勉強しているデザイナーさん2人と話していたところ、JSX内の条件文についてまとめ記事があったらいいよねという話になったので淡々とまとめていきたいと思います。簡潔にまとめたいので、前置きはこの辺にして早速始めます。そもそもJSXってなに？ JSXとは、まるでHTMLを書いているかのようにReactを書くために作られたものです。なので

satoshie 2021/02/08

リンク

【React+TypeScript】Netflixのクローンを作るチュートリアル

【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外

satoshie 2021/01/23

リンク

今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界

この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で「最初に教えてくれればよかったのに〜！」と思った内容を React と Next.js を用いて紹介するものとなっています。読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです：基本事項 SPA のルーティングによる問題リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き役に立つweb

satoshie 2021/01/14

リンク

【基礎】ReactでServer Side Rendering - Qiita

const React = require('react'); module.exports = class Sample extends React.Component { render(){ return ( <div> hoge </div> ); }; }; Viewをブラウザに返す node-jsxを入れておくと、requireでJSXを解釈してくれるので入れておいたほうがいい。 Reactコンポーネントを読み込んで、 ReactDomServer.renderToStringでHTML文字にする。あとはそれをブラウザに渡す。・・・ require('node-jsx').install({harmony: true}); const React = require('react'); const ReactDomServer = require('react-dom/se

satoshie 2020/12/20

リンク

react-helmetでheadにインラインJavascriptを記述したい時のメモ - Qiita

<Helmet> <script type="application/javascript">{` { console.log("success!!"); } `}</script> </Helmet>

satoshie 2020/11/13

リンク

JSXの中にインラインスクリプトを埋め込む - React | nju33

こんな感じのインラインスクリプトを用意します。以下はGoogleAnalyticsの埋め込みタグです。 <script async src="https://www.googletagmanager.com/gtag/js?id=あなたのid"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'あなたのid'); </script>

satoshie 2020/11/13

リンク

Reactシングルページアプリケーションをサーバサイドレンダリングする - オフトゥン大好き。

どうも、 @nukosuke です。こちらはQiita Advent Calendar '17 React #1、3日目の記事です。概要この記事ではReactで構築したシングルページアプリケーション(SPA)をサーバサイドレンダリング(SSR)する過程をまとめました。つかったもの Node.js TypeScript React ReactRouter Koa Webpack 成果物まずは出来上がったものから。こちらのリポジトリをcloneして以下のように起動できます。 $ npm run build:server # サーバjsをビルドします $ npm run build:client # クライアントjsをビルドします $ npm start # localhost:3000で起動します手順ざっくりとした手順ですが、今回やったことを要約すると以下のようになります。 Ko

satoshie 2020/09/28

リンク

React – ユーザインターフェース構築のための JavaScript ライブラリ

React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。