Vue.jsTwitterFacebookはてブPocket2年以上前にVue.jsでTypeScriptを使ってChrome拡張機能をつくった経験がある。今では、Vue.jsも公式で型定義を提供している。TypeScriptのサポートも手厚くなり、型のある環境での開発が楽になっているらしいが......。startedのような最小構成にはしたくない。いうことで、vue-cliのwebpackテンプレートをベースに、とにかく楽してVue.jsプロジェクトでTypeScriptを使えるようにする。v2.4.2vue2.5以降でvue-class-componentのデコレータを使わない方法は、以下の記事を参照ください。vue-cliを導入するvue-cliとは、コマンド1つでScaffolding(雛形生成)してくれるcliツールだ。vue-cliをglobalにインストールする。vue-cli詳細は、以下の記事を参照してほしい。テンプレートを使ってプロジェクトディレクトリを作成するvue-cliは、公式でいくつかのテンプレートを公開している。今回は一番メジャーなwebpackのテンプレートをベースにする。buildをすればローカルwebサーバが起動してVue.jsのサンプルページを見ることができる。GitHubTypeScriptでかけるように設定するwebpackのテンプレートをベースに、必要なモノだけを追加してTypeScriptを使えるようにする。vue-class-componenttypescriptとts-loaderはTypeScriptをビルドする用。vue-class-componentはクラススタイルのVueコンポーネントにする用。GitHubtsconfig.jsonを追加し、webpackでビルドできるように修正する次に、TypeScriptをビルドするための設定をする。tsconfig.jsonから。]}targetはes6(es2015)にしておく。'vue'という記述ができるようになる。...が推奨されている。GitHub次にwebpackでTypeScriptをビルドできるようにするため、build/webpack.base.conf.jsの一部を変更する。GitHubTypeScriptで書くために拡張子などを変更するここまででTypeScriptをビルドする環境はできた。次は、TypeScriptで書けるように拡張子などを変更する。コマンドじゃなくても良いので、srcディレクトリ配下の.jsファイルを.tsに変更する。./src/router/index.tsVueファイルでの使用言語を指定する。src/App.vueとsrc/components/Hello.vueのscriptタグにlang="ts"を追加する。"./App"のようなエラーが出てしまうので、vueファイルの型定義(src/sfc.d.ts)を作成する。GitHub続いて、import部分を修正する。GitHubvue-class-componentを使ってTypeScriptで開発する準備は整ったので、あとはvue-class-componetを使って開発していくだけだ。ためしにサンプルに手を加える。src/App.vueから。App'}</script>最後にビルドして、ちゃんと表示されるか確認する。GitHubpropsは、@Componentとメンバ変数に定義。dataは、クラスのプロパティとして定義。computedは、getterとして定義。methodsは、メンバメソッドとして定義。createdなどはそのままの名前で定義。だいたいこんな感じで開発できる。VuexのstoreもTypeScriptで書きたいので、後日記事を書こうと思う。buildするとUglifyでエラーになるなどなど...いずれ解決したらブログに書こうと思う。Serverでの開発を行った時にハマったのが、Nullと空文字("")の扱いの違いだった。結論から言うと、以下のようになっている。...【C#】いろんなパディング(空白埋めやゼロ埋め)固定長IFファイルの作成では必要不可欠な処理、パディング。文字長を一定にしたり、ブラの隙間に夢を詰めたりいろんな使い方がされる。このエントリでは以下の3種類の方法を紹介する。2)」とかいたらコンパイラさんに怒られてしまった。LEFT関数は特に問題ないが、可変長データ...Excelで「データを貼り付けできません。」というエラーが出た時の対処法Excelでなぜか図形が挿入できない。オブジェクトを貼り付けることができない。こんなしょうもないことで、10分を無駄にしてしまった。その対処法をまとめる。Google先生に聞いたところ、以下の対処法があったが、どれもよくわからなかった。結論から言うと、VBAにはTry-Catch-Finallyが存在しない。Errorステートメントとラベルを使う。簡単な例外処理(エラーハンドリング)は以下のとおり。」というエラーになる。ToStringプログラミングを行ううえで使う頻度が高いのが型変換(キャスト)。基本的なキャストには以下のようなものがある。どれも型変換に使うメソッドだが...position:stickyでスクロール可能なテーブルの行・列ヘッダを固定するテーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。使うと簡単に実装できる。IEは対応していないため、ポリフィルが必要となる。完成予想イメージは以下のとおり。昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。Standard.、SAVASホエイプロテインとの組み合わせについても書く。時間ではなく、技術を売る技術者になることを目標にブログやってます!ご用の方は、ページ右の問い合わせフォーム(※PC用ページのみ)、またはTwitterまでご連絡ください。当ブログの利用するにあたり、何らかのトラブルや損害などが生じても当ブログ管理人は一切責任を負いません。許諾や有無など、その内容については一切の保証を致しかねます。