[B! react] simommのブックマーク

simomm id:simomm

reactに関するsimommのブックマーク (16)

React を深く知るための入り口
Reactに対する見方をアップデートする国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文R
simomm 2023/06/20
プログラミング

programming

フロントエンド

frontend

javascript

react
リンク
2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新）コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
simomm 2023/06/20
プログラミング

programming

フロントエンド

frontend

javascript

react

vue
リンク
Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog
こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。選定結果から言うと、モノタロウ独自の7つの選定基準をもとに、Reactを選ぶことになりました。背景新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた俯瞰して改めて選定基準を考えた一般的な視点モノタロウの社内事情7つの選定基準選定結果技術選定を通して得た3つの学び背景まず、モノタロウの現フロントエンドについてざっくり説明します。モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違
simomm 2023/06/20
プログラミング

programming

フロントエンド

frontend

javascript

react

vue
リンク
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
simomm 2023/06/20
プログラミング

programming

フロントエンド

frontend

javascript

SPA

react
リンク
サイボウズWebフロントエンド脱レガシーの今までとこれから
UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』 - connpass https://uit.connpass.com/event/201312/
simomm 2023/06/20
フロントエンド

frontend

javascript

react

技術的負債

アーキテクチャ

サイボウズ
リンク
76. モダンウェブフロントエンド(2022)に至る歴史 - React Server Component、SSR Streaming w/ morishin127 | fukabori.fm
MP3ファイルをダウンロード内容紹介 2022年のモダンウェブフロントエンドまでに至る歴史、SPA、CSR、SSR、SSR Streaming、React Server Component などについて語っていただいたエピソードです。出演者話したネタモダンウェブフロントエンド勉強会を開催しましたそもそもWebページのダウンロードって、どう始まった？ JavaScriptがマウスカーソルをキラキラさせていた時代 Ajaxの登場や、jQuery フロントエンドMVC、Backbone.js、Knockout.js Reactは何が革命的だったのか？手続き型の実装は何が辛かったのか？ SPA(Single Page Application) MPA(Multi Page Application) CSR(Client Side Rendering) サーバーサイドがJSONを返す時代
simomm 2022/09/18
フロントエンド

プログラミング

programming

frontend

react

javascript

Next.js

ソフトウェア開発
リンク
株式会社リクルート　エンジニアコース新人研修の内容を公開します！（2022年度版）
こんにちは！2022年度エンジニア新人の太田です。毎年反響を頂いているエンジニアコースの研修内容を、今年は受講者の立場から紹介させていただきます。研修概要リクルートの新卒エンジニアコースでは、入社した新人を対象に技術研修を行っています。その内容は、実際の開発業務に活かせる技術を扱う﹁本当に必要な生きた知識・技術﹂を取り入れたものとなっています。特筆すべき点として、研修の資料はほとんどが内製であることが挙げられます。そのため、講義中の質疑を通してより深い知識や、開発の現場で培われた経験に触れることができます。フロントエンド、モバイルアプリ、バックエンド、インフラ、データ分析、セキュリティなど幅広いテーマが扱われるため、知識のインデックスを張ることにもつながります。またハンズオンや競技形式の演習も取り入れられており、実際に手を動かすことで印象に残りやすく、エラーへの対処も学ぶことができ
simomm 2022/09/10
リクルート

ソフトウェア開発

研修

勉強

エンジニア

react

Next.js

programming

プログラミング

学習
リンク
なぜ僕が「SPAはコストが高い」と考えているのか
どうもみなさんこんばんはちょっと前に﹁個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね﹂みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思いますちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし︵インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います︶、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です前提の話こういう記事ではコ
simomm 2022/04/17
プログラミング

programming

フロントエンド

frontend

javascript

development

開発

ソフトウェア開発

react
リンク
WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行 - ZOZO TECH BLOG
はじめにこんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。リプレイス前の環境リプレイス前の環境はオンプレミスの環境にロードバランサー、Windowsサーバー(IIS)があり、そこでVBScriptが動いています。VBScriptでテンプレートHTMLにデータを流し込み、ブラウザに表示する仕組み
simomm 2022/04/17
プログラミング

programming

フロントエンド

frontend

javascript

react
リンク
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。こんにちは！LINE フロントエンド開発室のダバロスアランです。この記事のタイトルを見て﹁釣りタイトルですね〜﹂と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。その変
simomm 2022/04/17
プログラミング

programming

フロントエンド

frontend

javascript

react
リンク
レガシーおじさん、SPAを始めてみた。そして限界を知る
はじめに最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。まあ最終的な結論は正直﹁これすごく
simomm 2020/10/19
プログラミング

programming

フロントエンド

frontend

javascript

react

SPA
リンク
SIerの輪廻から解脱するための技術｜はまあ
モチベーション最近﹁SIer界の輪廻からどうやって解脱したらいいですか？﹂という話をちょくちょく耳にすることが増えた。それに対する"解答"というわけではないのだけど、輪廻からの解脱を目指すにあたり、どんな要素技術を学ぶべきかについてはある程度指針を示せると思ったので今回は、選ぶべき技術と、その理由について解説していきます。 SIer界で輪廻転生を繰り返したい人はジャバ言語のラムダ式を禁止にすべきか議論するほうが大事だと思うので、こんな記事にクソリプする前にさっさと帰って、どうぞ。 TypeScript解脱への第一歩は、なにはともあれTypeScriptだろう。正直、この言語だけ覚えておけば、FaaS(Lambda, Cloud Functions)も書けるし、ReactによるSPAとか、なんならReact Nativeでアプリも書けるし、モダンな開発環境に必要なスキルセットがすべてま
simomm 2020/10/11
プログラミング

programming

フロントエンド

frontend

react

ソフトウェア開発

開発
リンク
リクルートテクノロジーズ　エンジニアコース新人研修の内容を公開します！（2020年度版） | Recruit Tech Blog
こんにちは！リクルートテクノロジーズでセキュリティエンジニアとして活動している、藤原巧です。毎年恒例となっており、大きな反響をいただいている、エンジニアコースの新人研修の内容を紹介させていただきます。研修の概要リクルートテクノロジーズでは、新卒採用の新人向けに3ヶ月間の技術研修を行っています。この技術研修では大きく分けて2つのコースが設けられています。 1. プログラミングやWebサービスの構造の基礎を体系的に学び、その後一人につき、ひとつのスマホサイトを企画からリリースまで行うコース 2. 一定以上のプログラミングスキルと開発系経験がある新人に向けた、実際の開発で必要となる様々な技術要素をより深く学び、その後実際のサービスでチーム開発にてOJTを行うコース今回公開するのは 2. で使用した資料です。この技術研修は、そのほとんどの部分を内製で実施しています。この研修の最大の
simomm 2020/10/11
開発

プログラミング

programming

ソフトウェア開発

frontend

フロントエンド

javascript

SPA

react
リンク
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。シェアだけで見るとAngularとAngularJS︵Angular系の1.x系︶の合計値はVueよりも高いですが、﹁今後はもう採用したくない﹂と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
simomm 2020/05/05
ソフトウェア開発

フロントエンド

frontend

react

programming

プログラミング

javascript
リンク
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者︵Java, PHP, Ruby, Go... 全て含む︶のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。︵Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！︶対象読者は、Java, PH(以下略︶などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。あとホームページ屋さんとかウェブコーダ
simomm 2020/05/05
過去のHTML/CSS/JSの知識と経験をゼロリセットすべき。昔はバックエンド主体だったが、今はフロントエンド比重は50%。Node.jsが必須。

ソフトウェア開発

フロントエンド

frontend

javascript

react

プログラミング

programming
リンク
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。最初に結論を書いておくと、﹃React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide﹄という組み合わせが、いま僕の採用しているJavaScriptの環境です。主要ライブラリは ReactAJavaScript library for building user interfaces | React 去年、一気に普及したReact
simomm 2016/04/10
javascript

フレームワーク

programming

development

framework

react

Redux

開発

プログラミング

ソフトウェア開発
リンク
1