はじめに https://svelte.jp/ 皆さんはSvelte使っていますか？ 私はReactやVueをよく利用していましたが、最近Svelteにハマっています。 Reactヘビーユーザーの私が感じた、Svelteの良いところ、改善してほしいところを挙げてみました。 Reactを使う上で特に不満があったわけでもないですが、Svelteに乗り換えてみると無駄が多かったことに気付かされました。 私の思うSvelteの良いところをいくつか挙げさせていただきます。 書きやすい、分かりやすい SvelteはReactと同様に、宣言的にUIを記述することが出来ますが、Reactと比べてより少ないコードで書けるようになっています。 例えば、React.useEffectのような記述は、以下のように書くことが出来ます。
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
追記: 2021年6月現在はアーキテクチャが変わってきています。 次の記事に詳細を書いていますので、一読をお願いします。 Kaizen Adのフロントエンドアーキテクチャの遷移について - Kaizen Platform 開発者ブログ Kaizen Platform でフロントエンドエンジニアをしている山本です。この記事では、我々が運営するサービス「Kaizen Ad」のフロントエンド部分をご紹介します。 Kaizen Ad とは Kaizen Ad は、動画広告をサポートするマーケットプレイスです。 カスタマーがクリエイティブを依頼すると、広告クリエイティブを作成するグロースハッカーから動画広告クリエイティブが納品される仕組みです。 カスタマーにとってはクリエイティブ改善の運用を省力化できると同時に、グロースハッカーにとっても新しい働き方が創造できるソリューションとして提供しています。
React Static とは Reactベースの静的サイトジェネレータです。 つまり、全てハードコードの静的サイトはもちろん、ブログのようなCMSベースのサイトも React＋αの知識で！ DBなしに！ サーバーの（大した）設定もせず！ 超高速表示に！ 作れる優れもの。 僕のようなフロントエンドに知識が偏ってる人間には特に福音だったりします。 その中でもReact Staticは、Mediumで3,000clapを叩き出した記事 「2019年のReactジェネレータ」でもGatsbyに続き２番手に選ばれたイケてる子！ しかもGatsbyよりも学習コスト≒React＋αのα部分が少ないと僕の中で噂に。 ということで公式ドキュメントの「基礎概念」（Core concepts）部分を以下に訳します。 続編 React Static 設定大全 https://qiita.com/IYA_UFO/
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた
Transcript 3FBDU���5ZQF4DSJQUͷ ڥߏஙͱ࣮5JQT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBD XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� *OTJEF�'SPOUFOE���ͷ$'1ืूதʂʂ IUUQT���EPDT�HPPHMF�DPN�GPSNT�E�F� �'"*Q2-4q17/@�435:#�OK%��5"(8CM,D�;6H�2W'Z�#G(X9q%��@H�WJFXGPSN ΞδΣϯμ wDSFBUF�SFBDU�BQQ� wBXFTPNF�UZQFTDSJQU�MPBEFS� wUT�MPBEFS� w!CBCFM�QSFTFU�UZQFTDSJQU� w࣮5JQTΛগʑ
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
この記事は クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog の後編。 前提として、今回の出す例で、「Web フロントエンドで、そこまで複雑な状態を考慮するなんてそもそも間違ってる」という意見があると思う。これに関して、そもそも「SPA というものが、いかに実現可能になったか」という視点の話であり、また、自分の経験上「フロントエンドなんて雑でシンプルでいいでしょ」というものが、複雑な構成を取っていくのを、何度も目にしてきた、という2つの前提がある。 適切な粒度に応じた適切な構成をとるべし、というのは別の話で、今回、対象が複雑なアプリケーションなのは前提とする。 Flux 以前 先の記事で ActiveRecord を前提にしたサーバーサイド ORM をクライアントで輸入しようとすると、クライアントでは Storage 層が存在し
React Native at Instagram
React Native has come a long way since it was open-sourced in 2015. Fewer than two years later, it’s being used not only in Facebook and Facebook Ads Manager, but also in many other companies, from Fortune 500 companies to hot new startups. Developer velocity is a defining value of Instagram’s mobile engineering. In early 2016, we started exploring using React Native to allow product teams to ship
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Emergencies wait for no one, which is why bad credit is available 24 hours a day, 7 days a week. Instead of waiting for your bank or credit union to submit your loan application, the online loan networks listed below can process your application in minutes. If you are eligible, you can choose from several […]
名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー
react-helixというライブラリを公開しました。 これは、私が作成したライブラリの PR 記事です。 react-helix は React で Immutable な設計をうまく扱うための小さなライブラリで、いわゆる Flux フレームワークの亜種になります。 亜種ですので Flux そのものではありませんが、その基本的な思想は継承しています。 その上で、ボイラープレートが不要なインターフェイスになるよう再設計してあります。 このライブラリの目標は、以下の3つです。 Action (ただの関数) を中心に、Model を Immutable にして、自然に View からビジネスロジックを引き剥がす。 Flux にあるボイラープレート (定数とかDispatcherへの処理登録とか) をゼロにする。 サーバーサイド レンダリングを妨害しない。 このライブラリを利用して作成したTOD
![[PR] React で Immutable な設計をうまく扱うためのライブラリを公開しました - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/28cf631b253ef4657b85f407ddd08dbc0fcb3367/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzI1NTUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2OTkxOTE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9Y2RjOGNhOWNmMDU1N2ZkY2QyOTMxYzYzM2JlNTA0MDE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D2b1bf1cdd9f6024def891e328193408b%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUFIlNUQlMjBSZWFjdCUyMCVFMyU4MSVBNyUyMEltbXV0YWJsZSUyMCVFMyU4MSVBQSVFOCVBOCVBRCVFOCVBOCU4OCVFMyU4MiU5MiVFMyU4MSU4NiVFMyU4MSVCRSVFMyU4MSU4RiVFNiU4OSVCMSVFMyU4MSU4NiVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MyVBQSVFMyU4MiU5MiVFNSU4NSVBQyVFOSU5NiU4QiVFMyU4MSU5NyVFMyU4MSVCRSVFMyU4MSU5NyVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTkzMTMzZGI2MjliNTdlZDg1MDk1YTc1ZDNiNWNlMTY3%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBteXN0aWNhdGVhJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YTI0MDMzMzExZTAwM2RkN2MzOGMyYWY1MWNlYTIzYjA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De7a5afb4b30e6033c86f877396f817c9)
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 3/22 (日) の rebuild.fm で React の話をしようと思っているが、その前に頭を整理するために React 雑感。雑感なので殴り書き。 React はこれ一つで複数の課題を解決しようとしている。そのため、人と議論してると話のコンテキストがぶれやすい。ざっくりは フロントエンドのプログラミングパラダイムを、サーバーサイドのような富豪的なスタイルに変える コンポーネント (雑に言うと独自タグ) 指向で UI を組み立てる ステートレスコンポーネントやメッセージパッシングで疎結合性を高めることにより、イベントの依存関係地獄
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実してい
2015-03-15 ReactでBEMなclassNameを書きやすくするBemmerというライブラリを作った JavaScript React BEM npm 作った JSX ReactとBEMはすごく相性がよくて、ずっとBEMで書いている。 ReactのComponentという単位、性格にはmodule.exports対象にするような再利用性のあるUI部品をBEMのBlockという単位に結びつけると、非常に扱いやすくなる。 ファイル名もxxx-xxx-xxx.jsx``xxx-xxx-xxx.lessのようにして、クラス名もxxxXxxXxxのようにすると、名前が競合する危険性がゼロになり、それが再利用可能であることを示唆できる。 背景 で、そんな中React.createClass()でJSXのclassName属性を設定する際、困ったことがあって、Modifierに弱いという問題
@armorik83 さんの記事を受けて Fluxフレームワーク Arda が気になる10の理由 - Qiita 設計思想とか指針とか残しておきます。 mizchi/arda Arda - MetaFluxなフレームワークを作った - Qiita Ardaは実践的なものを目指した 他のフレームワークは思想から入って実装されたものかもしれませんが、ArdaはFluxを意識しつつも実際のアプリで使われている画面遷移の機構を抽象化する点から開発がスタートしています。 またKobitoという比較的寿命が長い(ことを予定している)アプリの基盤にすることで長くメンテされる予定です。なのでKobitoはちゃんと使ってもらえるようなものにしたい、と思って開発しています。(この記事が宣伝兼ねてないとは言いませんが。) (自分の開発したものにしては)ドキュメントが充実していることについて 開発者の今回の様子に
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか？ スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか？いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。 David BellonaがTwitter Universityでの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
