Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
JSXが実はベターな解だったのではないか？｜erukiti
JSXとHTMLベースのテンプレート言語の比較を行い、批判されがちなJSXが実はベターな解だったのでは？という記事です。 僕の結論は、HTMLとJSのどちらが制御構造を持てばいいのか？でいえばJS側が持つ方がリファクタリングしやすいため、JSXの方が良いというものです。 さて、先日、JSフレームワーク事情2020年始めという記事を書きました。これは、JavaScriptフロントエンドフレームワーク、Angularの人気が下落中という記事の元ソースであるThe State of JavaScript 2019を見ながら、React/Vue/Angularや、Next/Nuxt/Gatsbyが置かれている状況を解説するものでした。 他には、確証はないものの、Reactのシェアと人気がともに高い理由は、意外にJSXにもあるのではないか？と考えています。VueもAngularも基本的にはHTMLを
Vue.js サーバサイドレンダリング on Cloud Functions for Firebase - Qiita
去年の今頃にNode.jsとGoでサーバサイドレンダリングをしました。 ２０１７年になって自分の中でこうやってサーバサイドレンダリングすればいいなという一つの答えが出たことを書きます。 サーバサイドレンダリングの必要性 サーバサイドレンダリングをやる理由に２つ理由があると思います。 １つはSEO、もう１つが表示の高速化です。 もしGoogleからのアクセスのみを考えているのであればあまりサーバサイドレンダリングするメリットは薄いかもしれません。 GoogleのクローラはJavaScriptも解釈してくれると言われています。 それとsitemapを設定してもindexをしてくれるので個人的にSEOのためにサーバサイドレンダリングすることはとくにないです。 次に表示の高速化のためですがこれはファーストペイントの高速化のためにサーバサイドレンダリングするべきかですが これはその通りでサイトアクセ
阿部寛を超えるための技術: はてなブログからNuxtに移行した話
旧サイト(はてなブログ)からのパフォーマンスの伸びが顕著ですね。 Performanceは言わずもがなですが、はてなブログでPWA対応がほとんどされていないのが気になりました。Service Workerのような標準化しつつある仕様に追従できていないのは痛いところ。 Nuxt + Contentfulでやっていき 今回の実装にあたってはフレームワークに依存せずSPAを作成することも検討しましたが、SEOなどを考えるとSSRの仕組みが必須です。またSSRもスクラッチで組もうとすると中々ハードルが高く(Storeのハイドレーション、Render hooksのAPI設計等)、今回は業務でも利用した事のあるNuxt.jsを利用しました。 Embedded content: https://nuxtjs.org/ 詳細は後述しますが、Nuxt communityの提供しているModule群がものすご
VuetifyでtranspileDependencies設定時に"export 'default' (imported as 'Vuetify') was not found in 'vuetify'が出たときの対処 - えんぴつぶろぐ
「どんなしょぼい内容でも躓いたり、調べて解決したことはブログに書こう」月間。 Vuetifyを導入した時、躓いて時間を溶かしたので一人でも誰かの助けになればいいなと思いつつ…。 環境 mac OS Sierra 10.12.6 vue: 2.5.21 Vue CLI 3(@vue/cli-service): 3.2.2 vuetify:1.4.0 現象 ビルド時にexport 'default' (imported as 'Vuetify') was not found in 'vuetify'というwarning WARNING Compiled with 1 warnings 14:51:49 warning in ./src/main.js "export 'default' (imported as 'Vuetify') was not found in 'vuetify' ブラウ
Vue CLI 3でproduction時のソースマップを無効にする - えんぴつぶろぐ
「どんなしょぼい内容でも躓いたり、調べて解決したことはブログに書こう」月間。 Vue CLI 3でproduction時のソースマップを無効にしたくて、やったこと・調べたことの諸々。 環境 mac OS Sierra 10.12.6 vue: 2.5.21 Vue CLI 3(@vue/cli-service): 3.2.2 まずVue CLI 3のデフォルト設定を確認する そもそもVue CLI 3ではどういう設定でwebpackを動かしているのか。 以下のファイルで確認できた。 production：/プロジェクトフォルダ/node_modules/@vue/cli-service/lib/config/prod.js development：/プロジェクトフォルダ/node_modules/@vue/cli-service/lib/config/dev.js sourcemapの設定
Vue CLI 3 x Atomic Design × Storybookを使ったコンポーネント開発を試す【環境構築編】 - えんぴつぶろぐ
はじめに 先日「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読みました。 Atomic Design ~堅牢で使いやすいUIを効率良く設計する 作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る こちらの本では、Atomic Designの考え方だけでなく、ReactやStorybookを使った具体的な実装方法まで詳しく解説されています。 早速試してみたい！と思い、せっかくなのでVue.jsで試してみました。 まずは環境構築から始めます。 本当はComponent作成時のTipsについてをメインに書きたかったのですが、思ってたより長くなってしまったので分割して更新していきまます…。 はじめに Atomic Designとは Vue CLI 3とは Storybook
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://scrapbox.io/potato4d/2020%2F07%2F28_%E6%99%82%E7%82%B9%E3%81%AE_Vue_2.x_%20_TypeScript_%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A8%80%E3%81%88%E3%82%8B%E7%A2%BA%E3%81%8B%E3%81%AA%E3%81%93%E3%81%A8
https://scrapbox.io/potato4d/2020/07/28_%E6%99%82%E7%82%B9%E3%81%AE_Vue_2.x_%20_TypeScript_%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A8%80%E3%81%88%E3%82%8B%E7%A2%BA%E3%81%8B%E3%81%AA%E3%81%93%E3%81%A8
React のユーザーから見た今後のフロントエンドの予想
CSS Architecture on Vue.js
Vueと共に走ったフロントエンドリプレイス１年間
Vue Fes Japan - Speaker Deck
noteをNuxt.jsで再構築した話というタイトルでお話してきました #vuefes｜福井 烈 / note inc.｜note