新規機能はどんどんコンポーネント化 Vue.js + TypeScriptで開発してよかったこと・つらかったこと | ログミーBusiness
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエンドエンジニア 北嶋初音氏（以下、北嶋）：では、「Vue.js + TypeScriptによる新規サービス開発の振り返り」と題して、UI開発課の北嶋初音が発表を始めたいと思います。 まず軽く自己紹介します。名前は北嶋初音と言います。経歴ですが、2016年の4月からWeb系のITベンチャーに新卒入社しまして、Webエンジニアとしての経験を積みました。次は自社サービスを作っている会社で働きたいという気持ちがあったので、転職活動を始めて、今年の1月から
Vue v3前夜のTypeScript事情をまとめた
業務でVue(Nuxt).jsを書きはじめて3ヶ月ほど経った。 それまではReact + TSのプロジェクトだったので、TSの良さは分かっているので、 今のプロジェクトにもTSを導入しようと思っていたが、どうやらVueのTS事情は複雑らしい。 Vueでプロダクトを作る場合、VuexやVue-Routerを使うことが多いが、その中で型の恩恵を受けにくかったり、そもそも書き方が複数あるようだ。 しかもVue3のリリースで、また事情が変わるらしい。 ちょっと時間ができたので、Vue3リリース前のVue + TS事情を調べてまとめておく。 今回はTSを使うためのコードの書き方と、型情報がどのように使用できるかに焦点を当てる。 VueとTypeScriptの今 2020年5月10日現在、Vue v3はベータ版であり、Vue v2.xが最新の公式となる。 この状態でコードの書き方は2通りある。 公式ド
あまり頭を使わずVue + Vuetify + TypeScriptの初期描画を高速化するためにやったこと - Qiita
やりたいこと Vue + Vuetify + TypeScriptで書かれたWebアプリをはじめて開いたときの描画を高速化したいです。初期描画が早いと第一印象が良く速いほどと嬉しいです。ロジック部分を高速化できそうなアルゴリズム書き換えたりせず、なるべく単純作業だけで高速化できそうなことをまとめます。 具体的には「マルチデバイス間でファイル転送を手軽にしたい！スマホでもPCでもcurlでも - Qiita」のWebアプリを高速化します。もともと、デスクトップ環境だとそれほど初期描画の速度は気にならないのでモバイルでの初期描画の比較を以下に載せます。 高速化の前と後での比較 最終的にどれぐらいの差が出たかの比較動画です。 左が高速化前で、右が高速化後です。 画質が良い動画: https://youtu.be/I9VTpnpB6OM 体感でも描画までにかかる速度の時間がわかります。 iOS (
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？ - Qiita
Vue.js の公式ドキュメントには「状態管理」という章があり、そこでは単純なストアパターンと、より大規模向けという Vuex ライブラリを使う 2 つの手法が紹介されています。 ですが、それぞれどこに長所・短所がありどのような基準で選択すれば良いのかは「大規模」というあやふやな基準でしか示されていません。実際その境界はどこにあるのでしょうか？ さて、TypeScript も同様に大規模アプリケーション向けと言われます。型安全性の有用さは他言語の世界で実証されています。ところが残念なことに Vuex の API 設計とは極めて相性が悪いというのはよく言われます。現時点で両者を両立させるのは大変苦労しそうです。 そこでこの記事では、ストアパターンを TypeScript で実装してみることで、その限界がどの辺りにあるのかを探っていきたいと思います。 実現すること テンプレート以外の Type
Vuex + DDD のアーキテクチャを考える - Techtouch Developers Blog
フロントエンドエンジニアの国定です。 この記事では、TypeScript + Vue.js で開発しているフロントエンドに今年からドメイン駆動設計（DDD）を取り入れ始め、ひとまず設計が落ち着いてきたのでその経緯とアーキテクチャについて解説します。 課題 アーキテクチャ Domain Service Store（Vuex） UI（Vue.js） 軽量DDDに陥らないために まとめ 課題 Vuex（Store）の責務は、エラー判定などのドメインロジック・データの永続化・API の呼び出しなど、State 管理のほかにも多岐にわたっています。UI の改善や機能追加など変化の多いフロントエンドでは開発が進むにつれ Vue + Vuex のあちこちに同じ処理が散在してしまいます。 テックタッチでもメンテナンスを繰り返す度にコードの複雑さが増し、機能追加や修正に時間がかかるようになってきました。去年
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
TypeScriptとVue - Speaker Deck
All slide content and descriptions are owned by their creators.
vue.js + typescript = vue.ts ことはじめ
vue.js は typescript を公式にサポートしています。 つい先日 vue-cli のバージョン 3.0 にてついに、初めから typescript が導入された vue.js のプロジェクトテンプレートが追加されました。 いよいよ vue.js ならぬ vue.ts に追い風が吹いてきたのを感じます。 そこでその追い風を更に強くするべく vue.js + typescript でコンポーネントを作るための基礎知識というかチュートリアルっぽいものを書いてみました。 この記事の概要 vue.js を typescript で書く vue-class-component を利用する vue-property-decolator を利用する ドキュメントにない細かい機能や tips でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する - Qiita