デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
OverVue - Vue開発で役立つプロトタイピングツール
Vueの人気が高まっています。HTMLとJavaScriptが分かれるので、分業しやすいのも利点でしょう。しかし、それでもプログラマーでないと最適な構造で画面を作っていくのは簡単ではありません。 そこで使ってみたいのがOverVueです。画像を元にして画面を設計できるソフトウェアです。 OverVueの使い方 立ち上げました。まず画像を読み込みます。 画像が表示されている状態で、左からコンポーネントを追加していきます。 divやボタンなどを追加します。コンポーネントは枠を使って表示位置を指定できます。 OverVueを使うことで画像からWebコンポーネントとしてVueの構造を書き出すのが簡単になります。各コンポーネントの親子関係も可視化されます。簡易的なコード生成機能もついています。 OverVueはVue製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）で
News Vue.js - Vue.jsのニュースポータル MOONGIFT
フレームワークの使い方を学ぶのに、そのフレームワークを使っている事例を参考にするのは良い方法です。何ができるのか、何ができなさそうかが判断できます。そのフレームワークらしい書き方を学ぶこともできるでしょう。 今回紹介するNews Vue.jsはVue.jsを学ぶのにぴったりなWebサイトです。Vue.jsに関するニュースを配信しています。 News Vue.jsの使い方 トップページです。テキストコンテンツの他、ポッドキャスティングの再生もできます。 ニュース（ブログ記事など）を投稿できる窓口が用意されています。 検索、アーカイブなどの機能があります。 News Vue.jsは仕組みとしては記事を一覧表示して概要を読んだり、ポッドキャスティングを再生するなどシンプルなものになっています。Vue.jsに関する最新情報をキャッチアップするのはもちろん、Vue.jsの開発について学ぶリソースとし
Vue + TS に触れて2週間でシングルページアプリケーションを作ってリリースした話 - GS2 Blog
みなさん、こんにちは。GS2の丹羽です。 本日 Game Server Services は次世代版のベータテストを開始しました。 これまで提供していた GS2 を GS2 Classic と呼び、次世代版 GS2 を単に GS2 と呼びます。 gs2.io GS2 のリリースにあたっては非常に多くの新しいチャレンジを行いました。 それについては少しずつブログや登壇を通じて皆さんにお伝えしていきたいと思います。 今回は、GS2 のマネージメントコンソールをシングルページアプリケーションとして作りました。 しかも、Vue + TypeScript に触れて2週間で。というトピックで振り返ってみようと思います。 なぜ Vue + TypeScript にいたったか GS2 Classic のマネージメントコンソールは Google App Engine を使用していました。 弊社はフルサーバレ
【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順 - Qiita
【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順JavaScriptTypeScriptVue.jsvue-cliVuetify はじめに Vue.js 用のマテリアルデザインフレームワークであるVuetifyと JavaScript の静的型付けのスーパーセットである TypeScript を使用したプロジェクトの環境を構築しサンプルを立ちあげるまでの手順です。 Vue-CLI のインストール Vue-CLI でひな型を作成するのが簡単なのでインストールします。
Nuxt.js + TypeScript + Vuetify でWebアプリ開発環境を構築する - Qiita
1. はじめに 社内で Nuxt.js + TypeScript + Vuetify の構成で、SPAを開発しました。 その際に開発効率が高くて良いと感じたので、環境構築や開発の方法をご紹介します。 良いなと思ったことは下記の3点です。 Nuxt.jsを使うことで環境構築が簡単に行える TypeScriptを使うことで型の恩恵を受けながら開発を行える Vuetifyを使うことでマテリアルデザインのUIを手軽に扱える 今回は下の画像のようなSPAを作成するところをゴールとします。 現在の時刻から、今年が何％進んでいるかをプログレスバーで表示します。 ※この記事ではSSRは取り扱いません。ご了承ください。 2. 技術紹介 この記事で取り扱う下記の言語やフレームワークについて概要をご紹介します。 Nuxt.js TypeScript Vuetify 2.1. Nuxt.js Nuxt.js は、
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
Vue.js でかんばんライクなタスク管理アプリを作ってみました。 | 株式会社ヌーラボ(Nulab inc.)
Backlog 開発チームの saki です。仕事は Scala と Java ですが、Ruby や JavaScript などのいわゆる動的型付け言語も好きです。最近はフロントエンドに興味がありプライベートで Vue.js を触っています。 Vue はプログレッシブフレームワークを謳っており、その名の通り最初は小さく導入でき、ソフトウェアの成長に合わせて他のライブラリを組み合わせることで規模の大きい開発にも利用できる柔軟さが気に入りました。ドキュメントも充実しており学びやすいと思います。どのライブラリも自分が一番と宣伝する中で、他のフレームワークとの比較 のページには誠意を感じました。 今回はそんな Vue を使って、かんばんライクなタスク管理アプリの簡単な作り方を紹介します。アウトラインは以下です。 基礎の作成 状態別にタスクを抽出する処理を作成 task-card コンポーネントの作
SPA フルリニューアル計画における技術選定や設計思想（2019年2月版） - 30歳からのプログラミング
SPA のフルリニューアルを技術選定や設計からやることになった。 前回の記事も、そのために検討や調査を行っている際に生まれた副産物をまとめたものだ。 目指すべきは変更しやすいシステムであり、そしてそれは、堅牢性を実現することで達成されるはずだという結論に至った。 numb86-tech.hatenablog.com 今回の記事では、堅牢なシステムの実現に向けてどんな技術を選んだのかを記録しておく。 まだ検証フェーズというか、試し書きや検証を行っている段階なので、今後変わる可能性はある。 前提 現行のアプリは Rails アプリで、その上に Vue を載せて SPA を作っている。 フロントエンドのビルドは Webpacker 。別のプロダクトでは Webpacker を剥がしてしまったが、このプロダクトでは実現できていない。 ビュー関連の処理について、どこまでを Rails でやってどこか
Vuex のルールと Component 設計 - ROXX開発者ブログ
こんにちは、自意識過剰な正義のヒーローでお馴染みの株式会社SCOUTERの石岡 将明( @masaakikunsan )です。 前回の Flutter のブログで、「２月半ばにAPIの叩き方やページ内のレイアウト作り方などをちゃんと解説したブログを書こうと思うのでお楽しみに！」と言ったのですが、あれ以降 Flutter を触れていないので今回は普段触ってる技術について書きます。 techblog.scouter.co.jp 現在 SCOUTER では、SARDINE と back check の大きく分けて２つの開発チームで開発を行っています。 僕は、back check で プレイングマネージャーとして開発をしているのですが、SARDINE チームに最近フロントエンドの相談を受けるようになってきたので今回はその話をしていきます。 Vuex でのルール Vue や Nuxt で開発している
Vue 2.6 released!
Yesterday we just celebrated the 5th Vueniversary — today we are excited to announce the release of Vue 2.6 “Macross”! In the past year, we spent a lot of time working on the new CLI and prototyping for 3.0. As a result, Vue core 2.x hasn’t received major updates in quite a while. It’s about time! This release combines a number of substantial improvements, internal changes and new features which a
vue-pwa-plugin で Service Worker をカスタマイズする - Qiita
はじめに vue-cliにはPWAのプラグインがあってデフォルトでキャッシュなどの処理を行ってくれるServiceWorkerを作成するようになっています。しかし、WebPushなどの別の機能も利用したい、というときがありますよね。そうしたときに、ServiceWorkerをカスタマイズする方法を紹介します。 Vue.jsやvue-cli自体について詳しく知りたい方は、こちらの記事をおすすめします。 - Vue.js を vue-cli を使ってシンプルにはじめてみる 環境 vue: 2.5.16 vue/cli: 3.0.1 vue/cli-plugin-pwa: 3.0.1 インストール プロジェクトを作成したい場所で以下のコマンドを実行します。 $ npm install -g vue-cli $ vue create my-project ? Please pick a prese
FN1809001 | Vue CLI 3入門 06: CLIサービス | HTML5 : テクニカルノート
ID: FN1809001 Technique: HTML5 / ECMAScript 2015 Tool: Vue CLI 3.0.4 Vue CLIサービスは、Vue CLIプロジェクトにインストールされるバイナリです。デフォルトで備わっているコマンドのほか、プラグインが加えるものもあります。本稿は「CLI Service」をもとに、CLIサービスについてご説明します。 01 バイナリを使う Vue CLIプロジェクトには、@vue/cli-serviceがvue-cli-serviceという名前のバイナリをインストールします。バイナリは、 npmスクリプトではvue-cli-serviceで直ちに参照できます。ターミナルからは、./node_modules/.bin/vue-cli-serviceです。 デフォルトのプリセットでつくられたプロジェクトでは、package.jsonのs
Vue Cli 3への開発環境移行でつまづいたこと - GAミント至上主義
yagish履歴書は2018年2月ごろから開発を始めた影響で、開発環境が古かったので現時点で最新のVue Cli 3を使った環境に変更中。 rirekisho.yagish.jp cli.vuejs.org 導入の流れは以前の記事参照 uyamazak.hatenablog.com つまづいて時間を無駄にした点をいくつかメモしておく。 環境変数(process.env.NAME)が読み込めない ドキュメントをよく読めば済む話。 以前はjs形式の設定ファイルに書いていたものが、.envファイルになった。 cli.vuejs.org で、前のから移植して .env.development SITE_TITLE=【開発】ブラウザでつくれる履歴書「yagish（ヤギッシュ）」のように書いて、 process.env.SITE_TITLEで使おうとしていたが、undefinedになっていた。 でもN
Vue + PWAの開発環境をvue-cli3 + pwa plugin + yarnを使ってDocker上で構築する - GAミント至上主義
uyamazak.hatenablog.com 2018年の2月ごろ、VueでPWAの履歴書作成アプリを作り始めて、もうすぐ本番公開だけど改めて調べると環境がすでに大きく変わっていた。 作ったのこれ↓ rirekisho.yagish.jp 半年もたってないけどこの変化だからなるべく早く変更する準備をした方がよさそう。 大きいのは下記4点。 vue-cliのテンプレートではなくプラグインになった 以前使ったテンプレート形式のもの github.com 新しいvue-cliのプラグイン形式 vue-cli/packages/@vue/cli-plugin-pwa at dev · vuejs/vue-cli · GitHub まだrc版なせいもあるのか、ドキュメントちょっとしか書いてない WebPack3が4に せっかく分かってきたところで大きく変わった yarn.lockを見たらwebpa
Vueを用いた開発プロジェクト用に「コンポーネント設計・実装ガイドライン」を作った話 - Qiita
はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Componentの粒度に関して Container ComponentとPresentational Component コンポーネントの共通化に関して コンポーネント実装時の細かな決め事 CSSに関して まとめ Componentの粒度に関して これまではフロント
VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定 | iwb.jp
VS Codeとは 正式名称はVisual Studio Code。Microsoft社が開発したオープンソースのテキストエディタ。 Vue.jsとの相性が良いためVue.jsの開発者のEvan Youなどが使用している。 VS CodeはEmmetやGitなどコーディングを行う上で必須の拡張機能がいくつか最初からインストールされているので使いやすい。 (Extentionsで@builtinで検索すると一覧が見られる) しかし、Vue.jsを使用する上で必要な拡張機能は最初からインストールされている訳ではないため、インストールしたほうが良い拡張機能と設定(settings.json)をまとめた。 以下にVS Codeおすすめ拡張機能を記載した。 Vue.js Extension Pack Vue.js開発でインストールされていることの多い11の拡張機能パック。 vetur vue-pee
Vue.jsの生みの親 Evan氏が箱根でみんなの質問に答えてくれた【動画有り】 - アシアルブログ
こんにちは、生形です。 先般開催されましたVue Fes Japan 2018のために、JavaScriptフレームワーク「Vue.js」の生みの親であるEvan Youさんが来日されました。 この機会を逃す手はない！ということで、Evanさんへの質問をTwitterで公募し、インタビューした様子をライブ配信しました。インタビュアー兼通訳を担当したのは、Vue Fes Japanのスタッフでもある、弊社代表の田中です。 左：Evan Youさん／右：アシアル 田中正裕 当日、Evanさんは温泉で日本を堪能していたようです。なんとライブ配信は箱根の旅館から！浴衣がお似合いですね。 はじめはSublime Textをずっと使っていて、次にAtomに切り替えましたが最近はもっぱらVS Codeを使っています。 VS CodeはTypeScriptのサポートが強力なので便利ですね。ちなみに、VS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-cli 3.0で始めるPWAとVue.jsのconfig周り
Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス
