はじめに こんにちは、calloc134 です。毎日「React なんもわからん」を繰り返していたところ、ソースコードを読み始めていました React は今や、フロントエンド開発においてデファクトスタンダートなライブラリとなっています。 しかし、どのような考え方・仕組みで実装されているのか、気付かないうちに勘違いしている人も多いのではないでしょうか。 今回は、そんな React の内部の仕組みを、必要があればソースコードを参照しながら解説していきたいと思います。 なお、参考にするソースコードは React 18.2.0 のものを使用します。 当該バージョンは参考文献のバージョンと揃えるために選択しました。基本的な動作はおおよそ同じものと考えていますが、最新のバージョンにおける変更点があれば今後追記していきます。 なお、このブログと同じ内容で、React Tokyo #6 で発表させていただ
明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。 これからはじめるReact実践入門 目次 目次 かなり網羅性が高い 足りない情報があったら プロを目指す人のためのTypeScript入門 Next.jsについて、次に読む本はありますか？ 補足したいところ Create React Appを使わない選択肢もある Recoilさんは開発状況がちょっと心配 React Routerの知識が活きるアプリケーションフレームワークもある まとめ おまけ 2023.9.28 10:36追記 かなり網羅性が高い パラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。 Chapter 1 イントロダクション 1-1 ReactとJavaS
はじめに 最近「単体テストの考え方/使い方」を読みました。 普段フロントエンドエンジニアとして実装をしている中で、自分が作っている単体テストについての言語化をサポートしてくれました。 この記事では、フォーム UI の実装を通して、コンポーネントに対する効果的な単体テストについて考察し、具体的なテストの書き進め方の一例を提示してみます。 最終的な成果物 この記事で実装するフォーム UI の最終的な成果物は codesandbox で確認できるようにしています。右のペインの「Tests」をクリックするとテストも実行できます。 注意 この記事は「単体テストの考え方/使い方」（以下、本書）の内容に触れていますが、読んでいなくても理解できるように補足をしているつもりです。それぞれのトピックで、文中に本書の該当ページの番号を「（p123）」のように表示しています（いずれも初版のものです）。 react
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「Divide and Conquer / 分割統治法」 という解法（アルゴリズムの話でよく出てきますね）は、「困難は分割せよ」 として知られる、デカルトが『方法序説』で提唱した思考法が元になっています1。 第二は、わたしが検討する難問の一つ一つを、できるだけ多くの、しかも問題をよりよく解くために必要なだけの小部分に分割すること。 ―― 岩波文庫 『方法序説』 デカルト著 谷川多佳子訳 同様に、React で多機能で複雑な画面を作りたい時、それを小さな機能の集まりと捉えて、それぞれをコンポーネントにすることで、開発がラクになることがあり
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を３つずつご紹介します。 尚、この記事で紹介するコードスニペットは GitHub リポジトリに動作する状態で公開しておりますので、併せてご参照ください。 前提知識 読者のみなさまは、HTMLの要素 h1-h6 にどのような役割があるか説明できますか？ 大きい文字を出したかったらh1を使って、それより少し小さい文字を出したかったらh2を使う...わけではありませんでした。h1-h6 は 「見出し要素」 と呼ばれ、文章の見出しとなるテキストをマークアップするのに用いられて
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 CodeSandboxからStackblitzに変えました(少し遅い) そのほかのサンプルは こちら 機能 ショートカットキーについては以下をサポートしてます👀 全選択
React.jsの練習にブラウザで動く将棋を作りました（ソースコード）。このページで遊べます。現状ではただ将棋ができるだけなので面白くはないと思います。追記：通信機能を実装しました（反転将棋）。 TypesScript (JavaScript) をほとんど書いたことがない人がどうやって作ったかという記事です。TypeScript初心者なので以下の内容は間違いを含んでいる可能性があります。 はじめに 情報系にしては実装力があまりない僕ですが、競技プログラミングを始めて2年近くになるしそろそろアプリを何か作りたいなあと思っていました。web系の言語はほとんど書いたことがなかったのですが、おそらく作りながら学ぶのが一番効率がいいだろうと考えました。 学部生のときは将棋が趣味だったので、ブラウザで動く将棋を作ることにしました。オセロなどの他のボードゲームと比べるとルールがそこそこ複雑で、自分には丁
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
Headless CMSとはなにか？なぜ生まれたのか？ Reactとライバル達の登場で、ウェブ・フロントエンドが盛り上がっている今日このごろ。一方サーバーサイドでは、DBアクセスなどのモデルと、HTMLをレンダリングするビューのレイヤーを切り離し、APIを通じて結合を行うHeadless CMSが話題になっているようです。 いらすとや Headless CMSは、いわばビューのないCMS。コンテンツやコンテンツに組み込む画像などのメディアを編集・管理する機能を提供する一方で、ユーザーにHTMLをレンダリングするウェブサイトとしての機能は切り離して、レンダリングはクライアントに任せる仕組みになっています。 従来はCMSとレンダラーは不可分な要素として一つのプロダクト(WordPress, Drupal)で動いていましたが、JavaScriptによるフロントエンドへの役割シフトや、Androi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く