こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ？」「あの人、最近はどんなことに取り組んでいるんだろう？」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知（組織やプロダクトの方針等）や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
この記事は オープンストリーム Advent Calendar 2018 の11日目の記事です。 うっかり期限を勘違いしていて前日に慌てて記事を書いています！間に合え！！ やりたいこと 最近やっと TypeScript と Vue.js を使い始めたので Vuex も一緒に使ってみたい。 とりあえず vue-cli でプロジェクトを作成すると、 store.ts ってファイルがぺろっと一つ追加される。けど、できれば1ファイルにべた書きするんじゃなくて、いいかんじに分けて書きたい。けど何をどう書けばいいのかよくわからない あとたぶん別の言語やって1ヶ月もしたら内容をすっぱり忘れるので、備忘録もほしい というわけで、調べてみた。 結論 ここにぜんぶ載ってた。すてき。 https://codeburst.io/vuex-and-typescript-3427ba78cfa8 ……なのですが。これ
この記事は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
TypeScript を使用している Nuxt プロジェクトでは、ストアにアクセスしたり、書き込んだりするためにさまざまなオプションがあります。 クラスベース vuex-module-decorators 最も人気のあるアプローチの1つは vuex-module-decorators です。- ガイドを参照してください。 Nuxt で使用するために重要な条件がいくつかあります： モジュールは stateFactory: true で装飾する必要があるため、以下のようにします: store/mymodule.tsimport { Module, VuexModule, Mutation } from 'vuex-module-decorators' @Module({ name: 'mymodule', stateFactory: true, namespaced: true, }) cla
はじめに Nuxt（Vue）の Typescript 環境構築は、確立された手法が存在しません。 よって、いろんな人が、いろんなやり方で、環境を構築されています。 ここで紹介するのは、僕が色々な手法を試した中で、 一番楽で、一番使いやすいと感じた環境構築の手法です。 型推論が 100% 完璧ではなかったりしますが、完璧を目指すと大変です。 ある程度妥協して、まぁこんくらいなら十分かなと思えるような環境を構築します。 完璧を求める方は、他の方の手法をお試しください。 それでは、構築していきましょう。 追記：あまり頑張らないために重要なこと 2020年4月に、nuxtの環境構築コマンドcreate-nuxt-appが改良され、 Typescript環境を簡単に構築できるようになりました。 この記事の前半の内容は、このコマンドによって代替できますので、 こちらを利用することを推奨します。 cre
始め TSを初めて勉強したときに「typeよりinterfaceを使うように！」というブログをよく見ましたが、業務の時は全部typeで型を定義してました。あれ？と疑念に思ってましたので、記事でお話させていただきます。 1. 型の定義 TSで一番手っ取り早く型を定義できる方法は多分これだと思います。 let level: number = 15; level = 15 level = "十五" //Type 'string' is not assignable to type 'number' このように宣言時の変数に方の注釈をつけることを型アノテーション(Type Annotation)と言います。上の例だけ見たら特に問題なさそうに見えますが、コードが少しでも複雑になったら問題があります。
type Example1 = (param: string) => string; const example1: Example1 = param => param; example1は型Example1の型アノテーションをつけて、関数を定義しています。 型アノテーションによって関数の引数が推論され、引数のparamはstring型と解釈されます。 完全記法 完全記法では(引数の型): 戻り値の型という組を{}の中に記述します。
はじめに VSCodeで快適なVue3コーディングをおこなうために、環境構築方法について調べてみました。 ついでにtailwindの導入についても紹介しています。 日本語の記事では情報がなかなか見当たらないものもあるため、Vue3ユーザーは必見です！ Vue3のプロジェクト作成 今回はVue3のプロジェクトをViteを使って作成していきます。 ViteはVueの作者が開発しているビルドツールで、Vue CLIに比べると動作が圧倒的に軽快です。 上記コマンドを入力すると、プロジェクト名などの入力をするように促されます。 Project name: ←プロジェクト名を入力 Select a framework: ← vueを選択 Select a variant: ← vue-tsを選択 ちなみに、プロジェクトの作成はテンプレートを使うことでも可能です。 VSCodeの設定 Volarのインス
TypeScriptは部分的に導入することが出来ないと思ってFlowtypeを導入したが、出来るぞ！という指摘を頂いたので、調べた。 --allowjsオプション tscの実行時に--allowjsを付けるだけだった。tsconfig.jsonの場合、compilerOptions.allowJsにtrueを設定すればよい。 検証用のディレクトリを作って、typescriptをインストールする。 $ mkdir allow-options $ cd allow-options $ echo "{}" > package.json $ yarn add -D typescript
Vue.jsの環境構築 Vue.jsは日本で人気のあるウェブフロントエンドのフレームワークです。柔軟な設定のできるCLIツールが特徴です。本書では3系についてとりあげます。 作成時に最初に聞かれる質問でdefaultのpreset（babelとeslint）ではなく、Manually select featuresを選択します。 TypeScriptを選択する場合はManually select featuresを選択 次のオプションで必要なものをスペースキーで選択して、エンターで次に進みます。選んだ項目によって追加の質問が行われます。Routerやステート管理などのアプリケーション側の機能に関する項目以外にも、LinterやユニットテストフレームワークやE2Eテストの補助ツールなど、さまざまなものを選択できます。 TypeScriptを選択する場合はManually select f
AtomやSublimeTextを使っていましたが，最近VSCodeの良さに気づき始めて完全に虜になりましたw なので，TypeScriptの勉強も兼ねてVSCodeの拡張機能でも作ってみようと思いました 環境 windows10 Pro(Macは試してませんが，多分同じような感じになるはず・・・) 環境構築 Node.jsのインストール TypeScriptをインストールするために，Node.jsがいるのでまずはこれをインストールします Node.jsのインストーラは公式サイトから入手できるます 投稿時点では推奨版と最新版がありますが，推奨版の8.12.0をダウンロードしてインストールします インストールが成功したか確認するには，コマンドラインで以下を入力します 問題なければバージョン番号が表示されます ###npmの確認 Node.jsをインストールすると，一緒にnpmというパッケージ
Microsoft が開発した言語で、JavaScript に型定義などの機能を追加したものです。 JavaScript 言語の完全なスーパーセットになっています。 型の異なる関数呼び出しや代入をコンパイル時に検出することによりプログラムの品質を高めることができます。 また、ECMAScript の最新機能を早めに取り入れるため、まだ、ブラウザが未対応の機能を早い時期から使用することが可能となります。 プログラムの拡張子には通常 .ts をつけます。 TypeScriptファイル(*.ts) を JavaScript ファイル(*.js)にコンパイル(トランスコンパイル・トランスパイル)します。 React や Angular などでも TypeScript がよく利用されています。
TypeScriptの利用を検討しているものの、 ・使い方が分からない…。 ・JavaScriptとの違いが知りたい…。 という方も多いのではないでしょうか。そこでこの記事では、 ・TypeScriptのメリット・デメリットやJavaScriptとの関係性 ・TypeScriptのインストールからコンパイルまでの方法 について解説します。 TypeScriptの利用経験がない方でも、この記事を読めば、TypeScriptの特徴や基本的な使い方がわかります。 公開日：2020/03/16 【入門者向け】TypeScriptとは？ TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。2014年頃にMicrosoftによって開発・発表されました。 TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。そのため、Java
はじめに 今関わっているプロジェクトで7万行以上のコードを、JavaScriptからTypeScriptに移行するというのを経験しました。 移行するにあたっての準備や手順、実際にやってみて感じたことなどを共有します。 プロジェクトの概要 フルスタックWEBアプリケーション フロントエンド: JavaScript + React バックエンド: Node.js + Express.js + GraphQL なぜそもそもTypeScriptを採用しなかったのか 事前に技術選定をした際に、TypeScriptを利用するかどうかの議論はありました。 当時は以下の理由から採用しないという選択に至りました。 JavaScriptの開発に慣れていたため、TypeScript型定義=面倒というイメージが強かった 「スピードが命」と考えており、TypeScriptを使うことで開発効率が下がると思っていた プ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
