Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
世界がEnumから隠した秘密をひとつひとつ見つけていこうな #TypeScript - 角待ちは対空
qiita.com はてなエンジニア Advent Calendar 2017 5日目の記事です。 前回はid:chris4403によるAmazon Pollyを試してみた - memo logでした。いやぁ社長さすがです！！ さて今日はEnumについての話題です。 TypeScriptは実行時に影響を及ぼすような独自機能は積極的に導入しない傾向にありますが、ぱっと思いつく例外がEnumとNamespace(旧Internal module)です。 今日はそのEnumについての話です。 Enumのコンパイル結果 TypeScriptを書く上でJavaScriptへのコンパイル結果を意識することは少ないと思いますが、Enumについてはコンパイル結果を知っていたほうが理解が早いと思われます。 例えば以下のコードは enum IdolAttr { cute, cool, passion, } 以
How to fix nasty circular dependency issues once and for all in JavaScript & TypeScript
(this blog has a Korean translation here) In the many projects I have maintained so far, sooner or later I always run into the same issue: circular module dependencies. Although there are many strategies and best practices on how to avoid circular dependencies. There is very little on how to fix them in a consistent and predictable way. Usually, people move import statements or blocks of code rand
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
Vue テンプレート内の式の型チェックと解析ができるまで - Katashin .info
2019年4月28日TypeScript,Vetur,VueVue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。 しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。 そしてこの課題は Vetur の最新版で解決されました。 Vetur v0.19.0 #Vetur は Visual Studio Code の拡張機能の一つで、Vue の単一ファイルコンポーネント (.vue ファイル) のための様々な機能を提供し
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
WebAssembly 開発環境構築の本
この文章は Rust を用いた WebAssembly の開発環境を構築する手法を紹介するために作成されました. ハッシュタグ: #WASMの本紹介記事: WebAssembly 開発環境構築の本を公開しました - mizdra's blog# 本書の目的Rust を用いた WebAssembly の開発環境を構築する手法を知ることモジュールバンドラと連携する方法を知ることTypeScript と連携する方法を知ることWebAssembly を利用していて陥りやすい罠を知ることWebAssembly に関する情報を調べる方法を身につけること# 本書でやらないことWebAssembly/Rust/JavaScript の文法や機能の解説が目的ではない Rust からコンパイルして生成された WebAssembly を JavaScript から利用する方法を解説する文法や機能については, W
TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
この記事は2016年に書かれた古い記事です。当時はまだTypeScript2.0も出ていないころで今とは状況がかなり異なっています。参考にする場合注意してください。 はじめに TypeScriptの型システム Declaration space Open-ended ここまでの確認 型定義ファイルを読み書きできるようになるために declare キーワード 既存のオブジェクトの型定義を拡張する グローバルなオブジェクトに対する宣言 module Export Assignments Relative or Non-relative module imports ES2015形式 実際の定義ファイル 既存の定義ファイルを拡張する declare global { } について Typings について おわりに インターン募集中 はじめに こんにちはアプリケーションエンジニアの id:t_k
Node.js製CLIフレームワークoclifを試す - dackdive's blog
はじめに Heroku が oclif という CLI フレームワークをオープンソースとして公開したという記事を読みました。 Heroku CLI や Salesforce DX のベースにもなっているらしい。 どんなもんか触ってみます。 （oclif は (The) Open CLI Framework の略のようです。読み方がわからない。。。） oclif の特徴 手を動かす前に、どういった特徴があるのか公式ドキュメントに目を通してみます。 Features · oclif: The Open CLI Framework Super Speed コマンド実行時のオーバーヘッド（？）がほとんどなく、また依存パッケージもほとんどない 実行されるコマンドだけ require されるので、たくさんのコマンドからなる巨大 CLI でも単一コマンドの CLI と速度が変わらない CLI Gener
Vue のテンプレートの型チェックについて - Katashin .info
2017年11月12日TypeScript,Vue静的型が好きな人と話していると大体テンプレートの型をチェックしたいという話を聞くのですが、Vue には今のところそれをうまく行う方法はありません。 すこし前に Vue のテンプレートの型チェックについて LT したのですが、これは vue-class-component などの Vue 標準の API から離れた書き方を強制するのでちょっと微妙な感じでした。これは、以前は Vue のコンポーネントの this の型を得るためには、クラス構文を使う必要があったためです。 しかし、TypeScript v2.3 に導入された ThisType によって、オブジェクトリテラル内部のメソッドの this の型推論が行えるようになったのと、 Vue v2.5 から、TypeScript の型定義が大きく改善されたことで、Vue 標準の API を使っ
Reactシングルページアプリケーションをサーバサイドレンダリングする - オフトゥン大好き。
どうも、 @nukosuke です。 こちらはQiita Advent Calendar '17 React #1、3日目の記事です。 概要 この記事ではReactで構築したシングルページアプリケーション(SPA)をサーバサイドレンダリング(SSR)する過程をまとめました。 つかったもの Node.js TypeScript React ReactRouter Koa Webpack 成果物 まずは出来上がったものから。こちらのリポジトリをcloneして以下のように起動できます。 $ npm run build:server # サーバjsをビルドします $ npm run build:client # クライアントjsをビルドします $ npm start # localhost:3000で起動します 手順 ざっくりとした手順ですが、今回やったことを要約すると以下のようになります。 Ko
Tree shake Lodash with Webpack, Jest and Typescript
So recently, I’ve started to do payload optimizations within one of our large web apps at work. During that process, I came across very serious issue, well, with lodash while achieving to have everything running smoothly ( tree shaking, jest unit tests and correct type definitions ) I had 3 goals:production bundle with just those lodash functions, that are used ( not the whole library )typescript
VueJS+TypeScript の開発環境を作ってみた - IT探検記
Vue.js を始めました。TypeScript の開発環境を作ってみました。 はじめに これは自力でやる場合のサンプル程度に考えてください。 もうしばらくすると、公式の webpack テンプレートが TypeScript に対応しそうです。 Ref. TypeScript template? · Issue #263 · vuejs/vue-cli セットアップ まっさらから自分で必要なライブラリ−やツールを入れていくこともできますが、Vue ではプロジェクトテンプレートが用意されているので、それを使うことにします。 Ref. CLI - インストール - Vue.js プロジェクトテンプレート： vuejs-templates これからは PWA が良いのかもしれませんが、まだ調べきれていないので、今回は定番の webpack を選びました。 webpack のページの手順に従ってイ
Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜
はじめに Webpack、ES6風味のJavaScript、そして他すべてのモダンなクライアント側開発体験の進歩をまだ試していないなら、Webpacker 3.0は、はじめるのに絶好の機会だ。 —DHH Rails 5.1 で Webpacker が導入され、Railsでもモダンなフロントエンド開発が簡単にできるようになりました。 Webpackerはリリースからどんどん進化しており、 3.0でさらに使いやすくなりました。 本記事には2つの目的があります: RailsのAsset pipeline(Sprockets)をまったく使用しなくてもRails開発が可能であることを実証すること モダンフロントエンド未体験のRailsエンジニアに向けて、実際のコードをまじえつつ、モダンフロントエンド開発の雰囲気を伝えること また、Webpackerの概要を知りたいRailsエンジニアへの機能と使い方
がんばらないTypeScriptのはじめ方 - 角待ちは対空
追記 2019/04/16に以下の記事が公開されました。 employment.en-japan.com gfxさんによる記事です。この記事自体2017年の若干古い記事なので、新しく読む方は最新版である上記の記事を読んだほうがいいでしょう。 このエントリは2017/07/12に行われたHatena Engineer Seminar #8 @ Tokyoの発表内容をブログ向けに書き直したものです。 事前の通知では「CoffeeScript脱出にみるTypeScript2.4時代のベストプラクティス」がタイトルだったのですが、主題を変えたためタイトルも「がんばらないTypeScriptの始め方」に変更させていただきました。CoffeeScript脱出の話は一応出てきます。 社内のTypeScript事情 その後のTypeScript 現在の様子 TypeScriptのがんばらないはじめ方
FlowとTypeScriptをESDocで使用する - maru source
ESDoc v1.0をリリースするために、機能をプラグイン化してコアと周辺機能を分離しています。 https://github.com/esdoc/esdoc-plugins この作業は大体終わり、現在はよりadvancedなプラグインのPoCを作成しています。 そこで、今回はFlowとTypeScriptをESDocで扱うための2つのプラグインを紹介します。 ESDoc v1.0自体ついては正式リリース後に紹介する予定です。 FlowをESDocで使用する esdoc-flow-type-plugin Flowで書かれたコードをESDocで使用可能にするプラグインです。 このプラグインはPoCなので、実現可能性を確かめるためだけの最小実装となっています。 ドキュメントコメントに型情報が書かれていない場合、Flowの型アノテーションから型を取得する 型推論による型情報の取得は未実装 このプ
なぜTypeScript推しなのか - Islands in the byte stream
KibelaのフロントエンドをES2015からTypeScriptに絶賛移行中です。 www.typescriptlang.org で、なぜ flow じゃないくてTSなのかって話です。 flow vs typescriptである理由は、どちらもJSのスーパーセットをうたう静的型付きのaltJSだからです。この時代にあえてaltJSを導入する理由としては静的型があるというのが必須で、かつ学習コストを考えるとJSのスーパーセットであるのが望ましいでしょう。 言語仕様 言語仕様の点から言うと、決定的な差はないと思っています。 メリットもだいたい同じで 生産性: エディタの補完をJSよりも賢くできるので、より少ない脳のワーキングメモリでコードを書ける 堅牢性: コンパイル時に（＝多くのケースではエディタで）typoなどの間違いを検出できるのでバグを減らせる 学習コスト: JSをベースにしており、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<btn open />
とにかく楽してVue.jsでTypeScriptを使いたい
