皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか? これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
社内勉強会の資料デス(wipデス) ■ Vue 3から新しく追加されるもの- Composition API - Teleport - Fragment - Emit Component Option■ Composition API Vue 3の目玉機能。React Hooks的な関数ベースで状態の作成・監視などができる。Custom Hooks的なこともできる。 Composition APIのCustom Hooks集のライブラリもある(https://github.com/antfu/vueuse) 触ってみるのが一番早い(ハンズオン形式で触ってみる) ↓ Viteで作った雛形 app.component('modal-button', { template: ` <button @click="modalOpen = true"> Open full screen modal!
# Vuex はなるべく避ける Vuex は、グローバル変数 state を使うために使います。 actions, mutations でグローバル変数 state を変更し、getters でグローバル変数 state を参照します。 たかだかグローバル変数 state を変更するだけで、こんなに大きな Vuex というライブラリがあるのか、疑問でした。 Vuex は、「いつ」、「どこで」、「だれが」、変更したのかを監視するためのライブラリです。 また Vue.js devtools を使えば、「いつ」、「どこで」、「だれが」 グローバル変数 state を変更 mutation したかを確認することができます。 Vue.js devtools - Chrome ウェブストア (opens new window) これら、いつ、どこで、だれが、変更したのかを監視したいという「気持ち」と、
Is the Vuex Store still necessary in Vue3? The answer for me is definitely NO! And here is why. Why You Probably Shouldn’t Use VuexIf you don’t know Vuex already you can find more information here: https://vuex.vuejs.org/. Basically, Vuex is a state management plugin for Vue. It provides reactivity out of the box and also integrates nicely into the Vue dev tools. After using Vuex quite extensively
TypeScriptなんも分からんワイ ワイ「なぁ、ハスケル子ちゃん」 ハスケル子「はい」 ワイ「最近、TypeScriptっていうのが流行ってるみたいやけど」 ワイ「何がええの?」 ワイ「普通のJavaScriptじゃアカンの?」 ハスケル子「うーん」 ハスケル子「じゃあ、VSCodeでコードを書きながら説明しますね」 ハスケル子「例えば・・・」 const titles = ['記事タイトル1', '記事タイトル2', '記事タイトル3'] const newestTitle = titles.pop() console.log(newestTitle) ハスケル子「↑このコードは正しく動くと思いますか?」 ワイ「ええと」 ワイ「まずはtitlesという変数に、記事タイトルが3つ入った配列を格納するんやな」 ワイ「そんで、配列が持ってるpop()メソッドを実行して」 ワイ「一番最後の要
はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに
Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。JavaScriptTypeScript設計Vue.jsNuxt はじめに Composition APIで、Providerパターン(provide/inject)が、なぜ重要なのでしょうか。 Composition APIを使えば「状態やロジック」を簡単にコンポーネントの外に切り出すことができます。 しかしながら、Composition APIだけでは「ロジックや状態は切り出せても、複数コンポーネント間で共有できない」からです。 Composition APIによって、荷物をダンボールに梱包はできても、運ぶ人がいない状態です。 みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか? https:/
こんにちは。ECプラットフォーム部のMA(マーケティングオートメーション)アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤(@snagasawa_)です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。 この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0への
Useful LinksSee free Vue 3 Course(9 hours) on https://academy.eincode.com Github repository with starting project: https://github.com/Jerga99/vue-3-updates We are going to cover : Global ApiCompositionData optionRoot nodesFiltersSuspenseReactivityv-modelsTeleportvue-routerGlobal APILet’s start at the entry point of our application, the main.js file. In Vue 2 you were used to mounting Vue component
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く