2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する

なぜ、アルファベットで表現してまで分割して考えるのか？ それは、具体例を考えれば簡単に理解できるはずです。 ユーザに何らかのデータを伝えるとき、どんな見せ方をしますか？ あるいはどんな見方をしたいですか？ 文章、表、写真、動画、音楽の再生など、データに合わせて適切な見せ方が存在するはずです。では、適切な見せ方が決まって同じ種類のデータを扱うのなら、ある種のテンプレートにデータを流し込んで決まった見せ方にしますよね？ もし変えてしまったらユーザーは混乱しますし、そんな複雑なサイトを作るのは困難かつ望ましくありません。 上記の話の見せ方（ある種のテンプレート）の部分をview(見た目)としてDOMが担当します。viewに流しこむデータの取得・加工、viewで受けた操作の命令を受けるのはmodelとしてのJavaScriptです（写真管理のwebサービスなんかであればダウンロード操作など） MV

この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回作成したもの 見た目はBootstrapで作りました。 要件 作るのはフロント側のみ。内部の処理は考慮しない。 フォームは名字、名前・電話番号・メールアドレスの4つ 全ての項目を入力すると送信ボタンがアクティブになる 電話番号とメールアドレスは入力内容の形式もチェックする フォームの値はリアルタイムで変更を監視 ソースコード全体 <div class="form-container container" id="app"> <form> <div class="form-group"> <label for="exampleInputEmail1">名前</label> <div class="form-row"> <div class="col"> <input v-model="form.firstName" type="text" class="form-control" pla

誰も書かないような凡ミスをあえて書く Vue.jsめっちゃ好きなんですけど、最初の頃はググってもよくわからない変なミスでハマることがあったので、あえてそれを書いていこうと思います。 ちなみにこの記事は私がハマったVue.jsのショボいミス - GitPitch というLTで発表した内容を、整理した内容です。 なんかよくわからんけど動かない（2019/04/22追記） ホットリロードがあるから大丈夫！と全面的に信用しないでください。 リロードしたら直ることがあります。 細かい理由は後述。 ちょっといじったら突然画面いっぱいにエラーが表示された デカいわ黒背景の白文字だわでビビりますが、落ち着いてメッセージを呼んでください。 このオーバーレイはコンパイルエラーなので、どこかに間違いがあるはずです。 そして、だいたいの場合はどこがエラーの原因なのかもちゃんと書いてあります。 タグを足したらエラー

結局nuxt-fontawesomeのReadmeを見て解決したのですが、日本語の記事は見つからなかったりちょっと苦労もしたりだったので、（備忘録も兼ねて）記録 前提 Nuxt.jsのプロジェクトにFontAwesome 5の導入が必要になった背景はこの投稿と同じ状況です。 https://qiita.com/_rema_lp/items/137f0de9e039a464e7db 以下引用： CSSフレームワークに Bulma を使おうとしたところ、公式ドキュメントが FontAwesome 5 対応になってしました。 Nuxt.js 用の FontAwesome パッケージとして @nuxtjs/font-awesome がありますが、こちらはまだ FontAwesome 4 にしか対応していないため他の導入方法を探しました。 @nuxtjs/font-awesomeを使う代わりに、上記

本記事は、当社オウンドメディア「Doors」に移転しました。 約5秒後に自動的にリダイレクトします。 JavaScript初心者の方向けに、「Vue.js」のインストールから使い方までをわかりやすくまとめました！ご一読いただき、ぜひ一度「Vue.js」挑戦してみてください。 こんにちは。 マーケティングプラットフォーム本部 開発部の川島です。 2018年2月19日（月）にリリースした 「Rtoaster Ver.5.0」のユーザ分析（セグメント分析・作成）機能の開発を担当しています。 今回のブログは、Rtoasterの画面開発で採用した「Vue.js」について、私同様「JavaScript初心者です」という方向けに、最初に実践してみてほしいことをチュートリアルにまとめましたので、ご紹介します。 ■Vue.js とは？ 「Vue.js」は、JavaScript フレームワークです。 詳細はこ

Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

シングルページアプリケーションが流行っているらしいので、今頃便乗して簡単にできると言うVue.jsを使ってSPAを作ってみます。 Vueとか何もわからないけど、とりあえずやってみたいという人はぜひ参考にしてください。 ただ、多少触ってみてからSPAに挑戦するのをおすすめします。 超簡単にですが前回まとめた記事がありますのでこちらをご覧ください。 https://qiita.com/nagimaruxxx/items/279ca1c57a8ec8325558 開発環境 dockerコンテナ内とかではなくMac上で行います(ここで間違えてつまづいた人) macOS High Sierra node.js 10.11.0 npm 6.4.1 Vue.jsって？ JavaScriptのフレームワークです。 特徴としてあげられることは ・MVVMフレームワーク ・学習コストが低い ・双方向データバイ

こんにちは、ほそ道です。 今回はMV**なフレームワークのひとつであるVue.jsを取り上げてみます。 さて、どこから手をつけたら良いものかと思案にくれた結果、序論や諸注意点をアレコレ展開する前にまずはビシバシと弄って、ヒジョーにシンプルなサンプルをいっぱい作って体にしみ込ませてみるのがイイんじゃないかと思いました。 ボリュームがあるので何回かに分け、今回はビューモデルを生成するパターンをまとめます。 「考えるな、感じろ」の精神でやった後にどう考え学習すべきかや、どう設計すべきかなどの私見は述べられたら良いなと思っております。 ViewModel生成編 ディレクティブ編 [インスタンスメンバ編] (http://qiita.com/setzz/items/ebbfcc3565bcd27f344c) [グローバルメソッド編] (http://qiita.com/setzz/items/8f0

どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか

アプリをストア申請するにあたり、Webサイトがあった方がよさそうだったのでVue.jsで作りました。制作期間は2-3日くらい。 jyuko's playground Vue.js JSフレームワークを選定するにあたり、軽くて扱いやすいライブラリを用いたかったので、Vue.jsにしました。 jp.vuejs.org Angular.jsとReact.jsは今までに触ったことがあるのですが、いずれも学習コストは若干高めに感じましたし、Reactに至ってはJSXとなかなか仲良くなれない。 せっかくならば・・・と使ったことのないVue.jsを試してみたら、かなり良かったです。 Vue.jsの特徴としては、 軽い 扱いやすい 拡張性がある 軽量なライブラリの方が、サイト表示のレスポンスを向上させやすく、AWSなどのクラウドサービスで運用する際に通信量＝コストを抑えられます。 Vue.jsのインストー

はじめに 自己ポートフォリオを作ってたとき、デザインの勉強をしていたところ、パララックス効果(視差効果)を知りました。 デザインで参考にしたサイトは「Digital Smile Academy」さんのサイトになります http://dsa.clinic/ めっちゃかっこいいから作ってみようと。 JavaScriptでのライブラリを使ってもよかったのですが、アニメーションはなんでもCSSブームが自分の中できてたので 【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。 ↑の記事を参考にさせていただき実装しました。 今回の完成形になります。 Chromeでの動作確認のみしています。 firefoxとsafariとchromeでの動作確認しました。 Demo : https://sgnz-vuejs-parallax.herokuapp.com/ ソース: NozomiSugiya

VueのチュートリアルはQiitaなどにたくさんあるけど、構成が千差万別で、いろいろ見比べると却って迷ってしまいます。 なので、ここではなるべく一本道で学べるような、人にあった学習ルートを提案します。 特急入門コース（仕事で使いたい！一週間以内に学ばないといけない） まず猫本をAmazonで注文しておきましょう。 SPAとMPAの違いを理解しよう SPAとMPAって何が違うの？SPAにしたほうがいい？ 初心者は.vueファイルから始めるべき？ MPAコース CDN版で大きなアプリ作れるの？ flaskやrailsとどう組み合わせるのか テンプレートエンジンとVueの組み合わせ方 SPAコース webpack(vue-cli)は何をしてくれるものなのか vue-cliで何が起こるのか見てみよう REST APIって何？ Ajaxするにあたって必要な知識 ＆ axiosについて vue-rou