音楽サブスクリプション配信中のゲーム音楽のポータルサイト
ゲーム音楽
音楽サブスクリプション配信中のゲーム音楽のポータルサイト
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
フロントエンドのデザインパターン
本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実際のサービス をぜひお試し頂ければ幸いです！ システム構成 図の通り、システムは大きく 3 つに分けられます。 フロントエンド バックエンド データ基盤 使用技術は図の通りではあるのですが、フロントエンドと
Udemyで新春セール開催！ 2020年にUdemyで最も興味を集めたカテゴリートップ5と人気コースを紹介 - はてなニュース
2020年は新型コロナウイルスの流行、それに伴うリモートワーク（テレワーク）やワーケーション、オンライン授業での学習といった大きな社会的変化がありました。 意図せず起きた変化ではありましたが、働き方や学び方の変化は、自分次第で何かを大きく変えられるチャンスでもあります。内閣府の調査*1によると、在宅勤務などで生じた空き時間を新たな挑戦に充て、オンライン学習でプログラミングなどIT関連の学習に取り組む社会人が増えているとのこと。 めまぐるしく変わる社会へ適応するためには、自分にとって必要な情報を見極めるだけでなく、時代と共に学び続ける姿勢も必要。新しい学びはきっとあなたの強い味方になってくれることでしょう。ちょうどオンライン学習プラットフォーム「Udemy」では、2020年12月30日（水）～2021年1月7日（木）の間、対象の講座を1,200円から受講できる新春セールを開催。講座は買い切り
【注意！】 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で外
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~ 2022年デジタル新卒研修 デジタル編成ユニット Yuta IDE
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub｜Webエンジニアのキャリアを考える！
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
Home テクノロジー Blog Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPA
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
Reactを自作しよう
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
新しい記事もよろしくやで！ →ハスケル子「タグごとに色がついてたらいいのにな…」 38歳無職ワイ ワイ「（カタカタカタカタ・・・ッターン！）」 娘（5歳）「パパ、今日は何してるの？」 ワイ「今日はな、むかしWordPressで作った自分用TODOリストの」 ワイ「デザインをリニューアルしてんねん」 よめ太郎「（そんなことより職を探せや）」 娘「へぇ〜」 娘「WordPressってことは、PHPを書いてるの？」 ワイ「いや、ちゃうで」 ワイ「リニューアル後は、フロント部分をReactで実装しようと思ってな」 ワイ「そこで、WordPressをREST APIモードで使うことにしたんや」 ワイ「つまり、WordPressを管理画面つきAPIみたいに使うってことや」 娘「要は、WordPressをヘッドレスCMSとして使うんだね」 ワイ「ヘッドレス・・・？」 ワイ「ちゃうちゃう、管理画面つきAP
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。 今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。 選定結果から言うと、モノタロウ独自の７つの選定基準をもとに、Reactを選ぶことになりました。 背景 新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた 俯瞰して改めて選定基準を考えた 一般的な視点 モノタロウの社内事情 ７つの選定基準 選定結果 技術選定を通して得た３つの学び 背景 まず、モノタロウの現フロントエンドについてざっくり説明します。 モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。 基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ
モダンJavaScriptを基礎からしっかり学びたい人、Reactを身につけたい人に最高の入門書 -React実践の教科書
モダンJavaScriptの基本からTypeScriptの実践的な内容まで、Reactを一から学び、しっかりと身につけたい人にお勧めの解説書を紹介します。 Reactを身につける上で、これだけは知っておいた方がよいというJavaScriptの知識も分かりやすく解説されており、基礎からしっかり身につきます。 本書はUdemyのReactコースで最高評価を獲得し、ベストセラーでもある著者がモダンJavaScriptの基本からTypeScriptの実務で役立つ内容まで詳しく解説した解説書です。著者が開催している勉強会で初学者がReactのつまづきやすい挫折ポイントをやさしく、分かりやすく導いてくれる解説書です。 発売して間もないですが、Amazonでは早くも高評価がたくさんついています。
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
![なぜGoogleは“あなたの不満”を無視できるのか | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/df1fbcfb853756284b40841e70fc320268975ba8/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F04%2F04Apr2024.jpg)
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
【React+TypeScript】Netflixのクローンを作るチュートリアル
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
Build your own React
Reactのレンダリングに関する完全ガイド - Qiita
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
5歳娘「パパのReact、めっちゃ遅いね！」 - Qiita
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita
React Server Components はウェブ開発を変えるゲームチェンジングな技術である
blog.goo.ne.jp/yoshikawasuisan02
forbesjapan.com
news.yahoo.co.jp
www.hotosena.com
plan-d.co.jp
www.yomiuri.co.jp