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 や Index types は扱えると便利なのですが、聞かれると説明に窮することがあり、自分の理解を深めるためにもまとめました。 ※以下の記事は TypeScript3.1.1 が前提です。 EventEmitterを型安全に扱う ありがちですが、 EventEmitter を題材にします。 ほぼこちらの記事の二番煎じです。 TypeScript 2.1 で導入される keyof を使って EventEmitter を定義してみる 以下のように interfaceを定義します。 export type EventDef = {[P in string | symbol]: an
Electronでコピペを実装する - 俺がコピーしたいのはテキストだけじゃないんだ - Qiita
TypeScript製映像編集ソフト Delirを開発しているHanaklaです Electronでコピーペーストといえば「MenuItemOptionにrole: 'copy'をつける」が基礎的な方法です。 しかしこの方法で実装できるコピー＆ペーストはBrowserWindow上のテキストのみで、アプリケーション上のコピー可能なオブジェクトのコピーペーストの実装には別の方法が必要です。今回は、Delirでどのように**「テキストじゃないもののコピーペースト」**を実装したかをお話します。 前提 ElectronのMenuItemを触ったことがある人が対象 なにをコピーしたいの？ Delirには「クリップ」と呼ばれる画像や動画を表すオブジェクトがあり、今回コピペするのはこのオブジェクトです。また、テキストエリアも存在するため、通常のテキストもコピペできる必要があります。 アーキテクチャ D
Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (1:サンプル起動まで) - Qiita
※2018/10/29 Firebase Authentication + SPA(React/TypeScript) でサンプル作り直してみたとしてサンプルを作り直して記事を書きました。 Firebase Authentication によるユーザ認証周りについて理解しておきたく、実際に自分が普段作っている SPA(React/TypeScript) に組み込むとどんな感じになるかということもあったので試しに作ってみました。なおちょっと面倒なのは承知の上、リダイレクトモードでやります1。 それから、説明まで書くと長くなりそうなので 2 回に分けようと思いますました(2018/10/11)。 サンプル起動まで(この記事) 要点の説明 という感じで考えています。 ※ソースコード一式 は GitHub に置いています。 起動方法 前提条件 Firebase プロジェクトを 1 つ用意する。 そ
Visual Studio Code - InsidersでPromise.then()構文をasync/awaitに自動変換 - Qiita
function getSpacePeople_(url: string): Promise<void> { return fetch(url) .then((response) => response.json() ) .then((jsonData) => console.log(jsonData.people) ) .catch((error) => console.error('エラー:', error) ); } getSpacePeople_('http://api.open-notify.org/astros.json'); Visual Studio Codeで関数名をクリックすると、電球のアイコンが左端に表れます。その電球からメニューが開けますので、[Convert to async function]を選んでください(図001)。 図001■電球のアイコンから開いたメニ
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を設置しました。
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
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 に劣っていること 最新ブラウザの機能を使うと古いブラウザのための互換性対応をしなければならずコードが煩雑になる 国際化された文字列を
3 step wallet を作成した話 設計図編（製作者の思い） - Qiita
エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は３ step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ ３step walletの作成のテーマがあります まずその１ これは知的障がいの人を支援してきた経験から思いついたのですが、みんながみんな文字を読めて、理解できるという世界にいなかったからこそ、この発想になったんだと思います。 逆に言い換えるならば文字を使わない直感的な操作のみで決済を済ませるという買い物ってそういうものだったよね。という観点で作っています。 その２ 自閉スペクトラム症を持っている方でよく聞くそして支援中に体験する話として、「こだわりが強い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのオブジェクトリテラルの前後にスペースを含めないほうが好き - Qiita
TypeScript - WideningLiteralTypes - - Qiita
TypeScript で関数合成やPipe処理をする - Qiita
create-nuxt-appで構築したNuxt2のプロジェクトにTypeScriptを入れてvuexを使えるところまで持っていく - Qiita
TypeORMのmigrationで.tsファイルを直接参照したい - Qiita
Sentry を Laravel と Vue.js に導入してみた - Qiita
TypeScriptでFunction.bindを使うのはよくない - Qiita
TypeScript3.1 で ReduxAction型定義は不要になりました - Qiita
jQueryに追加した関数のTypeScript型定義を作成する - Qiita
