「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
ReactのSuspenseを使った非同期処理のエラーハンドリング
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにした
VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita
Vanilla JSのメリット フレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。 それは動作が速いことです。 今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。 どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。 この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。 仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ
5ヶ月で完走！新規開発を止めないAngular→Reactリプレイスの進め方まとめ｜Yuito Sato
【結論】 5ヶ月かけて無事完了しました。あー長かった。 新規の機能開発を止めないために一般的な開発チームでは今回のようなフロントエンドのフルリプレイスで一部新規の機能開発を止めながら開発を行うことがあると思います。 コードフリーズとなど呼ばれているものですね。 しかしログラスのようなスタートアップではプロダクトを絶えず進化させていくことがとても重要です。 機能開発を止めてしまえばたちまち大きな開発チームをもつ競合に追い抜かれて会社が負けてしまいます。 本記事ではフロントエンドフルリプレイスを新規機能開発を止めずに走らせる方法を解説していきます。 リプレイス概要本題に入る前に今回リプレイス対象となったLoglassについてとプロジェクトの概要について説明します。 【Loglassについて】 「プランニングクラウド Loglass」はBtoB SaaSのサービスの一つです。 基本はSSGやSS
Introducing Aurora | Chrome for Developers
On the Chrome team, we care about user experience and a thriving web ecosystem. We want users to have the best possible experience on the web, not only with static documents but also when they use rich, highly-interactive applications. Open-source tools and frameworks play a large role in enabling developers to build modern apps for the web, while also supporting good developer experiences. These
ts-jestとESM - lacolaco notes
#Jest v27 / ts-jest v27 https://jestjs.io/ja/docs/next/ecmascript-modules Node.js の --experimental-vm-modules オプションが必要 ESMとして扱いたいファイルの拡張子を extensionsToTreatAsEsm で宣言する必要あり JestがESMをサポートしている状態では内部的に supportsStaticESM フラグがtrueになる このフラグを明示的に外から指定はできない。総合的判断される ts-jestに渡したtsconfigのmodule設定はリスペクトされていない https://github.com/kulshekhar/ts-jest/blob/a4b88ca076e1e2a367e01341b8bd0e21033ec422/src/compiler/ts-c
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ
愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato
「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ
BankCodeJP API — 金融機関コードAPI
Japan Financial institution Code Web API金融機関検索APIのスタンダード銀行、信用金庫等の統一金融機関コード、名称を検索できる Web API。 毎月 8,000万を超える検索リクエストを処理し、トラフィック増加時にも優れた可用性とレイテンシを提供しています。 BankcodeJP APIシンプルそしてパワフルに設計されたAPIは、Eコマースにおける金融機関検索に最高のパワーを与えます。 JSONフォーマットで金融機関情報を返却するAPIはCORS対応しているためAjaxで通信できます。JQuery はもちろん、Angular や React、Ember.js、Aurelia、Vue.js などの SPAフレームワーク からも利用できます。 いくつもの企業がBankcodeJP APIを導入し、素早く効率的に Webサービスを構築しています。
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド | ログミーBusiness
スピーカー自己紹介、『JavaScript コードレシピ集』を出版池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。 JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。 Webの劇的な変化は少なく
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
Angular と Firebase で月間 3.5億PV になった PWA の収益性改善とコストカット - Qiita
適当に作ったグラフですが、この例だと SSP-A を使い続けるのと比較し 30% 以上も収益性アップ！ 図を見ればわかるようにビッダーの繋ぎこみをすればするほど凹が凸に変わる確率が高まります。 （ただしビッダーを増やした分レイテンシが増加するため、単に増やし続けるのが正解ではありません。 これがヘッダービディングにより収益が改善できる大まかな理由です。 DFP について 参照した図の中に DFP(DoubleClick for Publishers) という表記がありますが、これは Google の AdManager というツールのことです。 （旧名称が DFP。DSP やら DFP やらで本当にややこしいですね^^； AdManager は Google が提供しているだけあって、広告配信ツールとしての完成度が非常に高く、その前身であった GoogleAdExchange や SSP
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
Grid.js - Advanced JavaScript table plugin
Grid.js Advanced Table PluginGrid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
AWS AmplifyとAngular8を使ってCognitoでQuickSightにログインするページを作ってみる | DevelopersIO
先日、aws-samplesで公開されていたCognitoのユーザーでQuickSightにログインするサンプルを紹介するブログを書きました。 また、AmplifyとAngular8を使ってCognitoでAWSマネジメントコンソールにログインするページを作るブログも書きました。 今回のブログではこの２つのブログをがっちゃんと合わせて、ブラウザで動かせるCognitoユーザープールのユーザーでQuickSightにログインするページを作ります。 ついでに、Cognitoユーザーごとに異なるQuickSightユーザーでログインできるような構成例を紹介します。 ゴール 次のことができるサイトを作ることがゴールです。 ログイン、ログアウトができる ログインした際に、QucikSightへフェデレーションログインができる こちらが完成イメージです。 構成概要図 AWS Amplifyでざっくりこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Resource inlining in JavaScript frameworks | Aurora | Chrome for Developers
使ってみよう！Angular DevTools
Angular struggles in 2020
Vue.js/Blazor/Angularの文法比較サンプル集 - Qiita
