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 でお送りします。 目標はコンポーネントを自由に作れるようになることです。 プロジェクトテンプレート 何
SimpleStatisticsを使って、TypeScriptで回帰分析 - Qiita
分析といえばRやPythonが有名ですが、JavaScriptにも統計解析に強いライブラリが無いか探していたところ、 SimpleStatisticsというものがありました。 https://simplestatistics.org/ GitHub: https://github.com/simple-statistics/simple-statistics Documents: https://simplestatistics.org/docs/ 分散や標準偏差といった記述統計、ベイズ分類器、線形回帰などが使えるようです。 .d.ts型定義が同梱されており、TypeScriptでそのまま使うことができます。 こちらを使って回帰分析をしてみましょう。 完成品はこんな感じです。 https://s2terminal.github.io/regression_js_sample/ 環境 Win
Typescript学習まとめ - Qiita
はじめに 間違っている部分があれば、編集リクエストいただけるとうれしいです！ まだ途中のため、随時更新していくので、通知が欲しい方はいいね！よろしくお願いします。 Typescriptとは？ 静的な型(type)とシステムとクラスベースのオブジェクト指向構文を備えた。Javascriptのスーパセット。Javascript構文の正当な拡張なので、本来のJavascriptのコードがほぼそのままで動作する。 C#やJavaと類似した構文を持つため、これらの言語を利用したことがあればなじみやすい。 Typescriptでは、ECMAScript2015の仕様が取り込まれ、利用できる。 Typescriptを学ぶことで、自然とこれらの次世代構文を学ぶことができる。 学習環境 今回は、環境構築の必要なくTypescriptが使えるTypescript Playgroundを使う。 変数/データ型
React + Polyglot で多言語化対応をおこなう - Qiita
はじめに 今のチームでは、多言語化対応をおこなう際、Airbnb製のライブラリであるnode-polyglotを使っています。 Reactの多言語化でポピュラーなライブラリとしてreact-intlがあります。 しかし我々の場合は、フロントエンドにReactを採用したのは最近のため、これまで利用していたライブラリを継続して使う形で開発をしています。 今回はその使い方を簡単にまとめました。 開発で用いる環境の構築 ここでは、create-react-appで環境を構築しています。 動作確認のための環境なので、 tslint のエラーが出ないように少し設定をいじっています。 tslint.jsonのrulesは以下の通りです。 "rules": { "no-var-requires": false, "interface-name": [true, "never-prefix"], "no-e
TypeScriptのIndex typesと Mapped typesを使ってJavaScriptライブラリをIDEで補完する - Qiita
TypeScriptのIndex typesと Mapped typesを使ってJavaScriptライブラリをIDEで補完するJavaScriptTypeScriptEventEmitter TypeScriptの型定義はアプリの初期設計時に適切な形で導入すれば後の開発が楽になりますが、使うだけならともかく自分で定義するほどには理解が及ばないというケースは多いかと思います。 特に Index types や Index types は扱えると便利なのですが、聞かれると説明に窮することがあり、自分の理解を深めるためにもまとめました。 ※以下の記事は TypeScript3.1.1 が前提です。 EventEmitterを型安全に扱う ありがちですが、 EventEmitter を題材にします。 ほぼこちらの記事の二番煎じです。 TypeScript 2.1 で導入される keyof を使っ
JavaScriptのオブジェクトリテラルの前後にスペースを含めないほうが好き - Qiita
const withSpace = { name: 'yamada', locale: 'JP' }; // 空白あり const withoutSpace = {name: 'yamada', locale: 'JP'}; // 空白なし 🤔 実は規定がない どれを見ても『オブジェクトリテラルを一行で書く場合』の規定がない。 Google JavaScript Style Guide Airbnb JavaScript Style Guide Node.js Style Guide ただ、いろいろな GitHub のコードを見る限りでは、スペースありで書いてるプロジェクトの方が多い。でも個人的にはスペースなしで書いた方が良いと思っているという話。 🦉 スペースなしの方が一貫性がある 配列リテラルとオブジェクトリテラルを比べた場合、複数行で書く場合は以下のように同じ形式になるけど co
TypeScript - WideningLiteralTypes - - Qiita
LiteralTypes の Widening / NonWidening - let / const で明示的型キャストを付与せずに宣言すると以下のとおりとなる。 const によるプリミティブの暗黙的型キャストは LiteralTypes となるが、これが普通の LiteralTypes ではない。以下では Numeric で解説するが、LiteralTypes において当てはまる。Annotation / Assertion を付与すると NonWidening となり、明示的型キャストがない場合 Widening となる。これは VSCode などの見た目上では気づかない。 const THREE = 3 // THREE: 3 (Widening NumericLiteralTypes) const FOUR: 4 = 4 // FOUR: 4 (NonWidening Nume
Electronでコピペを実装する - 俺がコピーしたいのはテキストだけじゃないんだ - Qiita
TypeScript製映像編集ソフト Delirを開発しているHanaklaです Electronでコピーペーストといえば「MenuItemOptionにrole: 'copy'をつける」が基礎的な方法です。 しかしこの方法で実装できるコピー＆ペーストはBrowserWindow上のテキストのみで、アプリケーション上のコピー可能なオブジェクトのコピーペーストの実装には別の方法が必要です。今回は、Delirでどのように「テキストじゃないもののコピーペースト」を実装したかをお話します。 前提 ElectronのMenuItemを触ったことがある人が対象 なにをコピーしたいの？ Delirには「クリップ」と呼ばれる画像や動画を表すオブジェクトがあり、今回コピペするのはこのオブジェクトです。また、テキストエリアも存在するため、通常のテキストもコピペできる必要があります。 アーキテクチャ Delir
Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (1:サンプル起動まで) - Qiita
Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (1:サンプル起動まで)TypeScriptSPAFirebaseReactmaterial-ui ※2018/10/29 Firebase Authentication + SPA(React/TypeScript) でサンプル作り直してみたとしてサンプルを作り直して記事を書きました。 Firebase Authentication によるユーザ認証周りについて理解しておきたく、実際に自分が普段作っている SPA(React/TypeScript) に組み込むとどんな感じになるかということもあったので試しに作ってみました。なおちょっと面倒なのは承知の上、リダイレクトモードでやります1。 それから、説明まで書くと長くなりそうなので 2 回に分けようと思いますま
Visual Studio Code - InsidersでPromise.then()構文をasync/awaitに自動変換 - Qiita
Visual Studio Code - Insidersには、TypeScript 3.1が備わっています。そして、Promise().then構文を、ECMAScript 2017のasync/awaitに自動変換する機能が加わりました。 asyncが使えるのはfunctionです。Promiseオブジェクトを返すFetch APIでも自動変換できます。 コード001■fetch()でweb APIからJSONデータを取得する function getSpacePeople_(url: string): Promise<void> { return fetch(url) .then((response) => response.json() ) .then((jsonData) => console.log(jsonData.people) ) .catch((error) => co
TypeScriptの勉強メモ - Qiita
Vue + TypeScript + Nuxtの書き方 概要 Vue使いたい！Nuxt使いたい！Vue3系からは、Typescriptを利用しているらしい！ ということで、TypeScript使ったことないので、勉強がてらメモ & リンク集。 （TypeScript部分は動作確認を全てしているわけではないので注意！） TypeScriptとは？ マイクロソフトが開発したaltJS（JavaScriptの代替言語、コンパイラーによって、JavaScriptに変換される） 特徴を簡単に言うと、静的な型システムとクラスベースが使えるJavaScript（ただ、クラスベースの開発は、ES2015でもできる） 基本 変数の定義時には、型を宣言する。 デフォルトでは、全ての型に対して、null / undefinedを代入可能。これは、tsconfig.jsonで代入不可能に変更可能。 let nam
16000行の壁を超えてさくっとダウンロードしたい (BigQueryの話) - Qiita
Meguro.es #17 @ Drecom 2018年10月4日 自己紹介 ちきさん GitHub/Twitter/Qiita: @ovrmrw 市ヶ谷のオプトという会社で働いています (話すこと) BigQueryのクエリ結果がデカいときに簡単にローカルにダウンロードする方法 BigQuery は Web UI で使いたいじゃないですか Web UI を使うメリット・デメリット メリット クエリを書いてすぐに実行できるのでさくさく試せる。 クエリを保存する機能が便利。 エンジニアじゃなくても使える。例えばビジネスの人とか。 デメリット 16000行を超える結果を簡単にダウンロードできない。 16000行で切られてしまう選択肢 JSON としてダウンロード CSV 形式でダウンロード スプレッドシートに保存 たとえクエリ結果が100万行でも勝手に切られてしまう。かなしい。 かなしい例 で
Axios(vue.jsのajax)で外部APIをたたく時のクロスドメイン問題を（サクッと）解決したメモ
Vue.js（フロントエンド）から外部の(一部の)APIを呼び出す際、クロスドメインの制限でレスポンスを使えなくなってしまう。 Q.そもそもなぜこんなことになっているのか A.セキュリティの問題でそのWebアプリケーションのドメインのサーバとしか通信できないというブラウザの制約があるため。 対策 調べたところ色々な対策が存在するようです。詳しく理解したいorしっかりと問題を解決したい方はこちら等をご参照下さい。 今回は少しずるい方法でサクッと解決したのでその覚え書きです。 今回の解決法 この制約、ブラウザに付いているため、サーバーサイド等からは通常通りAPIを利用することが可能です。 そこで適当なPHPの動くサーバー（筆者はlolipopのサーバーがあったので）にAPIを叩いてその値をそのまま返すphpを設置しました。 <?php $url = 'APIのアドレス'; $json = fi
Typescriptのお勉強2 - Qiita
oclifを使ってコマンドラインのツールを作った IDEはinttelij 会社のlambdaのコードもtypescriptにしたくなった ググった 上位互換なので、拡張子を変えれば動く intellijでtypescriptについての追加記述のおすすめはしてくれるっぽい gmail add-onのclaspがtypescript対応しているとのこと これを試してみるのもいいかもな Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ https://tech.actindi.net/2018/09/10/083314 gmail-add-ons-samples/github at master · gsuitedevs/gmail-add-ons-samples https://github.com/gsuitedev
TypeORMのmigrationで.tsファイルを直接参照したい - Qiita
TypeORM v0.2.6 Node.js v10.11.0 TypeORMのmigrationを使うため、公式ドキュメントを参考にrootにormconfig.jsを置いてDB情報を設定 module.exports = { type: 'postgres', host: 'localhost', port: 5432, database: 'hogehoge', username: 'hogehoge', password: 'hogehoge', entities: ["build/server/database/entities/*.js"], // <- ビルドされたJSファイルを参照している subscribers: [], migrations: ['migrations/*'], cli: { migrationsDir: 'migrations', }, };
JavaScriptの日付処理でLuxonを使う - Qiita
今までは Moment.js 使ってたけどモダンに再設計された Luxon を使うことにした。 🤔 なぜ Luxon がつくられたか Why does Luxon exist? に書いてある。 作者は Moment.js のメンテナー Moment.js を改善するアイデアを持っていたが良いコードベースではなかった より明示的な API にしたかった moment(Number) -> DateTime.fromMillis(Number) moment(Date) -> DateTime.fromJSDate(Date) 追加のデータファイルなしでタイムゾーンを扱いたかった Intl API を使って国際化の仕組みを再考したかった ⏰ Moment.js に劣っていること 最新ブラウザの機能を使うと古いブラウザのための互換性対応をしなければならずコードが煩雑になる 国際化された文字列を
Vue.js における次のイテレーションの計画 — Vue.js
Oct 1, 2018 このブログはこちらの翻訳ブログです。 先週の Vue.js London で、私は Vue の次のメジャーバージョンについて簡単なプレビューを行いました。このポストでは、計画の詳細な概要を提供します。 なぜ新しいメジャーバージョンを？Vue 2.0 はちょうど2年前にリリースされました（時が経つのは早いものです！）。この期間中、core は下位互換性を維持しながら5つのマイナーリリースを行いました。他にも改善をもたらすアイデアはありましたが、それらは破壊的な変更を伴うために、延期されてきました。同時に、JavaScript エコシステムと言語そのものが急速に進化しています。ワークフローを強化するツールが大きく改善されたこと、また多くの新しい言語機能によって、Vue が対処しようとしている問題を、より簡単・完全・効率的に解決できるようになりました。エキサイティングなの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript で関数合成やPipe処理をする - Qiita
create-nuxt-appで構築したNuxt2のプロジェクトにTypeScriptを入れてvuexを使えるところまで持っていく - Qiita
Sentry を Laravel と Vue.js に導入してみた - Qiita
