2017の15日目の記事です。今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。(2017/10/14)このリリースを受けて、「今までTypeScriptを触ったこと無いけど、元々興味はあったので、これを機にVueを使ってTypeSriptを触ってみるか〜」と思いたち、気がつくとタイトルのようなオレオレスターターキットを作っていました。今回はその成果物の紹介と、調べながらスターターキットを作っていった過程での気づきや所感を記そうと思います。開発リポジトリ以下が動作まで確認できたリポジトリです。Replacementについては、以下の記事が参考になりました。ブラウザを開いたりなどしています。webpack-dev-serverを起動すると、ブラウザが立ち上がります。いじってCSSを変更・保存してみましょう。参考にしたリポジトリ他にもたくさんありましたが、最終的には、以下2つのリポジトリの設定をつなぎ合わせたような感じになりました。kayac-html5-starterPug/Sassファイルあたりはこちらがベースになっています。読んでいただければと思います。TypeScriptの設定は、こちらのレポジトリを参考にしました。お話があったようです。Replacementすらもつい最近知った技術ですが、一度試してみると良いと思います。Chromeのデバッグモードで編集してるのに近い感覚でコーディングできます。Codeで書いていると、nullになりうるオブジェクトをコンパイル前に指摘してくれたり、numberにstring入れようとしたらエラーハイライトしてくれたりと、Linter入れる前からかなり丁寧にコードを解析してくれます。環境をつくってみて環境構築は正直かなりつまづきました。単純に自分の知識不足もありますが、Vue.jsがTypeScriptサポートを強化したのがつい最近&2.0の公開もここ1-2年くらいの出来事だったので、ウェブ上にある文献がかなり少なかったというのもあります。vue-cli・Nuxt.jsなどでした。関しては言わずもがな、これを見ればフロントエンドエンジニアであればほとんど知りたいことが書いてあります。Vue.jsを使うプロジェクトの土台となる環境をCLIで一通りそろえるように出来るCLIツールです。フォルダに一式の設定ファイルが生成されます。my-project最初作る時には、とりあえずHMRを試してみたかったので、これでサクッと環境を作って試しました。アプリケーション」というなんともすごそうなコンセプトのとおり、SPA開発で必要な要素を一通り利用出来るようになっているフレームワークです。こちらも一旦cloneしてきて、設定ファイルの中身を覗いてたりいじってみたりしてました。vue-cliやNuxt.jsの登場で、そもそもゼロから自分で設定ファイルを書いてみるという機会は格段に減ったと思います。いえば入ってない...ので、導入しておきたいです。Replacement現状でもブラウザリロードさえすれば更新された状態にはなっているようなので、特に気になってはいない+ググっても事例が少ないのもあって、保留しています。使わずに、自分で調べながらオレオレスターターキットを作成してみました。案件やアプリの案件によっては、既存のテンプレートだけでは対応できない(あるいは用意されていない)場合が多々あると思います。そのような自体に備えて予め設定ファイルに関する知識を有しておくと、何かと便利です。Replacementの環境を作ってみた話Tweet関連記事2018-12-12Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメどうもみなさまおはようございます。面白法人カヤックのエンジニアのごんです。昨今の...2017-12-24中〜大規模なSPAを開発する時に抑えておきたい10のポイントこんにちは。カヤックのSPAおじさんこと島津です。(1)月別アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。