サードパーティスクリプトの極限環境向け Svelte
この記事は、 Svelte Advent Calendar 2020 - Qiita の 22 日目です。 昨今では、フロントエンドの JS を減らす圧が強くなってきています。とくに来年 4 月に導入される Core WebVital は SEO に関わるため、 マーケティング文脈でもフロントエンドの改善施策として、パフォーマンスを上げる圧が強くなっています。 Google の UX 指標「Core Web Vitals（コアウェブバイタル）」とは？LCP・FID・CLS を解説｜ ferret JavaScript よ。文明を捨て、自然に還れ。 ::ハブろぐ で、ユーザー体験を遅くするものとしてやり玉に上げられるのが、サードパーティスクリプトという、サイト外から読み込まれる第三者の script です。代表的なものが Google Tag Manager や Twitter や Face
原子の再定義 - Atomic ReDesign -
Atomic ReDesign とは 「Atomic ReDesign」 は、かの有名な「Atomic Design」の拡張概念です。React や Vue.js を用いたコンポーネント設計において、私たちはしばしば頭を抱えることがありました。UI 粒度の分類制約は、コンポーネント設計最適化を阻むことがあるからです。 「この粒度のコンポーネントはどこに属するものなのか？」という疑問に対し統一された解はなく、プロダクト毎の性質によって定める必要がありました。また、文脈が散在することにより、コードに対する集中力低下を招きました。 Atomic ReDesign は顕在化した 「Atomic Design とアプリケーション設計の乖離」 をとらえ、現実的な設計指針となることを目指します。 Atomic Design とアプリケーション設計の乖離 本家 Atomic Design はデザインシステ
Vue.jsエンジニアのためのReact入門 | Hypertext Candy
この記事では、Vue.js は覚えたけど React もやってみたい、というエンジニア向けに、Vue.js における各機能の React での実現方法を比較して紹介します。 私は、慣れない言語やフレームワークを使うときはマニュアルを頭から読むより、「あの機能はこっちではどうやるのかな？」と考えて調べることが多いので、自分自身の React の学習も兼ねてまとめました。 コンポーネントの機能 コンポーネントの作り方 Vue.js Vue コンポーネントは ComponentName.vue のように、.vue 拡張子を持つファイルで表現されますね。<template> <script> <style> それぞれのブロックにテンプレートや振る舞い、スタイル定義を記述します。 <template> <div> <h1>Sample</h1> <h2>This is a component.</h
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
３大JavaScriptフレームワークを比較。Angular/React/Vueの特徴を徹底レビュー！ | モナカプレス
ReactがVirtualDOMという概念を生み出して以来、Webアプリやハイブリッドアプリの開発トレンドが一気に変わってきました。それまでのHTML/JavaScript/CSSをMVCによって分割する方法から、「関心の分離」と言う考え方に変わりつつあります。関心の分離とは Wikipediaによれば「プログラムを関心（何をしたいのか）毎に分離された構成要素で構築する」ことです。画面、コード、デザインという技術で分離させるのではなく、ログインする、商品を表示する、注文すると言った機能（関心）ごとにロジックを分離する考え方です。これは Web Components にも関連する考え方になります。 Angular/React/Vueはいずれもこの関心の分離に基づいて作られています。各機能をミニマムにまとめ、それらを組み合わせて一つのシステムを構築します。各機能がコンポーネント単位に集約される
Angular/React/Vue開発を強力にサポートするデベロッパーツールの紹介 | モナカプレス
Angular/React/Vue開発を強力にサポートするデベロッパーツールの紹介 2018年10月3日 技術情報 Angular, JavaScript, Monaca, react, vue, フレームワーク 中津川篤司 JavaScriptフレームワークのAngular/React/Vueは、コードを変換（トランスパイル）してピュアなHTML/JavaScript/CSS形式にします。そのため、書いているコードと実際にWebブラウザ上で動作するコードとが異なるものになります。ブラウザに搭載されたデフォルトの開発者ツールでは元のコードを見ることができず、デバッグで苦労している方も多いのではないでしょうか。 そこでインストールしたいのが、これらのフレームワークに対応した開発用Webブラウザ拡張機能です。多くはGoogle Chrome、そしてFirefoxに対応しています。 Angula
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
