Svelte + TypeScriptで
chrome拡張を作る
Transcript Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito ࣗݾհ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ΞδΣϯμ • Svelteͱʁ • ࡞Δͷ • ڥߏங • manifestΛ࣮Λ͢Δ • svelteͰ࣮Λ͢Δ • ·ͱΊ Svelteͱʁ Svelteͱ? • React,Vue,AngularͷΑ͏ʹએݴతʹUIΛॻ͚Δ • গͳ͍ίʔυͰ࣮͕Ͱ͖Δ • https://svelte.dev/blog/write-less-code • ԾDOMͳͲΛ༻ͤͣɺϏϧυ࣌ʹ࠷దͳόχϥJSʹม͢Δ • ͦͷ্ύϑΥʔϚϯε༏Ε͍ͯΔ • TypeScriptͷରԠ͞Εͨ • https://svelte.de
Next.js + microCMS + VercelでJamstackなブログ付き個人サイトを作る - あなたとあなたの話がしたい
妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。 Jamstack これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。 Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。 CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。 静的サイトジェネレーター Next.js, Nuxt.js, Gats
Next.js の InferGetStaticPropsType が便利
Next.jsのサンプルリポジトリを眺めていたらInferGetStaticPropsTypeというものを見つけました。これを使うと、getStaticPropsでreturnされた値をもとに、Pageに渡されるPropsの型を類推してくれます。 ↓ ドキュメントはこちら これまではこんな感じで書いていた これまではPropsの型宣言を自分で書いていました。 import { GetStaticProps } from 'next'; // 👇 type Props = { posts: Post[] }; export const getStaticProps: GetStaticProps<Props> = async () => { const { posts } = await getPosts(); return { props: { posts, }, revalidate:
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
TypeScriptのTips集
この記事は TypeScript Advent Calendar 2020 の 17 日目です。 今回は TypeScript のTipsをいくつかあげていきたいと思います！ 割と基本的なものが多いので、普段から TypeScript をがっつり書いている方に取ってはすでに知っているものが多いかもしれません。ただ、意識しないとあまり使わなかったり、TypeScript の経験がない方に取っては新鮮なものもあるのでは？と思ったので書いてみました。 keyof オブジェクトのキーを union 型に type Post = { id: number; title: string; content: string; }; type PostKey = keyof Post; // type PostKey = "id" | "title" | "content" const sortBy = <
2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した
この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R
Typescript特有の組み込み型関数 | log.pocka.io
TypeScript には Promise や Symbol といった Javascript 特有のグローバルオブジェクト以外に、型を扱う上で便利になるような組み込みのジェネリックな型関数※1が存在します。これらは非常に便利で様々なプロジェクトで使われているので~すが、公式にリストもなく、説明も主にリリースノート等にしかないため、~使い方等を交えて説明を書いていきたいと思います。 なお、各定義はMicrosoft/TypeScript のsrc/lib/es5.d.tsにあります。 ※1 ... 型を受け取って新しい型を返す型。多分正しい呼び名ではない。 Partial 利用可能バージョン: TypeScript2.1~リリースノート: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.htm
Prisma | Simplify working and interacting with databases
trusted by K active monthly developersBuild data-driven applications — with a great DX Prisma provides the best experience for your team to work and interact with databases. Even complex things like connection pooling, caching, real-time database subscriptions are a breeze with our products. Build your application, fortify to make everything run smoothly, and grow with your users and requirements.
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
TypeScript + React: Component patterns
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
tsconfig.jsonを設定する - サバイバルTypeScript-TypeScript入門
Node.jsはそれ自身ではTypeScriptをサポートしているわけではないため、TypeScriptの導入をする時はTypeScriptの設定ファイルであるtsconfig.jsonが必要です。
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定 - Qiita
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定TypeScriptDockerESLintNext.jsprettier 最近Next.jsを書くようになって、自分なりのコーディングスタイルが固まってきたので今後パパっとセットアップができるようにメモっておきます。 この記事では以下のことができるようになります。 Next.jsをTypeScript / TSX で書く ESLintとPrettierとVSCodeを組み合わせ、保存時自動フォーマット importを相対パスではなく絶対パスで書く ServerをExpressで動かす 開発時は.envで、本番は環境変数によるアプリケーション設定値を扱う 【発展編】Kubernetesを見据えてDockerで動かす Next.jsをTypeScri
ESLint と Prettier の共存設定とその根拠について
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
typeRootsの誤解 -- TypeScriptで、npmからインストールしたパッケージに型定義ファイル (*.d.ts) が存在しない場合の正しい対処方法 - Qiita
typeRootsの誤解 -- TypeScriptで、npmからインストールしたパッケージに型定義ファイル (*.d.ts) が存在しない場合の正しい対処方法TypeScripttsconfig 要約 npmからインストールしたパッケージに型定義ファイル (*.d.ts) が存在しない場合、独自の型定義ファイルを作り、下記1, 2のどちらかの設定を行う事で、import時に型定義の内容を適用させることができます。 TypeScriptオプションのbaseUrlとpathsの組み合わせで型定義ファイルのパスを指定する 型定義ファイルの中で、declare module "xxx" { ... } で外部モジュールのアンビエント宣言を行う TypeScriptオプションのtypeRootsでもこれを実現できると紹介されている場合がありますが、typeRootsはimport時には効かないため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The React Bootcamp
VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
GitHub - frouriojs/frourio: Fast and type-safe full stack framework, for TypeScript
DefinitelyTyped/types/gtag.js at master · DefinitelyTyped/DefinitelyTyped
GitHub - future-architect/typescript-guide: ゼロから学ぶTypeScriptガイド
