サードパーティスクリプトの極限環境向け 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・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
３大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
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
Vue.jsとFirebaseで最速でウェブサービスを作るための学習教材３ステップ【完全独学】 - かとのぼのマイコード・マイライフ
この記事は、 ・実際に何か自分でウェブサービスを作って見たいけどどうすればいいかわからない。 ・Vue.jsを使って何か作って見たい という方向けの記事です。 なぜVue.jsとFirebaseでウェブサービスを作るのか 私は、何かウェブサービスを作って見たいと考えている人には、Vue.jsとFirebaseを利用したサービスの作成をオススメしています。 なぜなら、この二つを習得するとすごく簡単にウェブサービスを作ることができるからです！シンプルな理由ですし、これが一番大事ですよね。 私のブログには多くのプログラミング初心者やVue.jsを勉強している方が訪問してくださっています。 その方々の参考になるよう、自分の今までの学習した教材や内容を書き出し、本当に必要で、そして最短で技術を身に付けるにはどのような教材をどの順序でやるのが一番効果があるかを書き出しまとめました。 この教材にたどり着
最新版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ファイルをまとめるモジュールバンド
Vue.js + Firebaseでポートフォリオを作ろう！ - Qiita
追記 この記事は公開から一ヶ月後くらいに、中身をだいぶ変えました。 前の記事が読みたい方はこちらからどうぞ。 今のコードの方が結構マシなはずなので、あまり需要は無いでしょうが...。 旧 https://qiita.com/sosumii/items/f097bf8b2209b9d75d1a/revisions/9 https://github.com/sosmii/hello-sosmii/tree/f4dc0f0295e5ffd569fb828e6b2e6559f5844874 作っていきましょう 突然ながらエンジニアのみなさま、ご自身の実力を市場にアピールできるような成果物をお持ちでしょうか？ 会社が信用できなくなった時の備えとして、良いチャンスを掴むためのきっかけとして、外から見える成果というのは用意しておいて損はありません！ 本記事は、私がサーバーサイド処理を組み込んだポートフォ
最近の砂場活動その3: フロントエンド編(Vue.js/SPA) - yasuhisa's blog
Vue.jsでフロントエンド再入門しました。仕事でjs触るけど、ゼロからあれこれやると分からないことが無限に発生しますね...。成果物はこちら。 GitHub - syou6162/go-active-learning-web ML News サーバーサイドはGoで書いていて、フロント周りがVue.jsです。それっぽい見た目になってきたので、Route53でドメイン取得しました。 前回までのあらすじ 初手 webpackを導入 Componentの導入 Bootstrapで見た目をマシにする SPA導入 SPAにするとGoogle Analyticsで正確にトラッキングできない問題 参考図書 前回までのあらすじ 今年の目標で自分であれこれ触って壊して試せる砂場を作る活動というのをやってきました。先月までは主にインフラとかミドルウェア周りをやりました。 下回りは整ってきつつありますが、表側が
Vue.js + ElectronでTwitterクライアントを作った - razokulover publog
Vue.jsとElectronでシンプルなTwitterクライアントを作った。 vue-twitter-client きっかけとしては一言で言うとフロントエンド周りの勉強。 2017年1~3月の振り返りにも書いた通り。 自分はモダンなフロントエンドの開発に疎かったので重い腰を上げてそろそろやるかという気持ちになって3月中頃くらいからはじめた。 Vue.jsについては2,3週間前くらいから触りはじめている。 Vue.jsはちゃんとしたSPAからフォームにちょいと味付けみたいな使い方もできたり小回りがきく。 個人的にはReactでの開発よりやりたいことが直感的に書ける気がしてるので使いやすいという印象。 とりあえず最初はTODOアプリやAPIを叩く小さなフィードを作って、次にNuxt.jsでSSRできるミニサイトを作ったりで大体使い方は覚えてきたというステータス。 ライブラリでいうとvuex,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tiptap
昔懐かしいインターネットの風物詩を最近の技術で作る話 - Speaker Deck
CODEPREP | はじめてのVue.js
Vue JS 2 Tutorial