【Node.js/Next.js】環境変数（.env）のチートシート｜2022年1月版
概要 本記事では、Next.jsにおける環境変数について解説しています。環境変数の基礎だけでなく、本番環境とステージング環境で異なる環境変数を読み込ませたい場合の対処方法も掲載していますので、ぜひ参考にしてもらえればと思います。（需要があるかは諸説） Next.jsの環境変数周りは少し複雑で公式ドキュメントを読んでも理解しきれないこともあると思います。この記事ではできる限り、初見さんでも理解できるぐらいに噛み砕いて書いていこうと思います。 本題の前に 前回の記事が初投稿でしたが、予想より多くのいいねをいただき、驚きを隠せてないです。（本当にありがとうございます🙏） 今後も定期的に投稿できるように頑張っていこうと思っています。しばらくはNext.jsの記事が多いと思いますが、その後はNest.jsやFastAPIの記事を書いていければと考えています。 Next.jsにおける環境変数 Nex
バックエンド開発にお勧めしたいNode.jsフレームワークまとめ
Node.js フレームワーク一覧テーブル Express.js # Express.js は、2010 年にリリースされてから、 MIT ライセンス の下で開発が続けられている、 Node.js の デファクトスタンダード です。 サーバーサイドで Web アプリケーションを開発するために必要な機能を提供します。 MVC アーキテクチャ が採用されており、この フレームワーク だけでアプリケーションを作成することができます。 また MVC アーキテクチャ だけではなく、REST API フレームワークとしての側面もあり、プロジェクトによって切り分けて使用できます。 非常に多機能で拡張性があり、多くのパッケージが開発されています。それらを組み合わせることで、より複雑なアプリケーションを開発することもできます。 メリット 単純で軽量 必要最小限の機能しか持ちません。 そのため非常に軽快に動作
OpenCVの新しい顔検出をブラウザでも試してみる
この記事はOpenCV Advent Calendar 2021の 23 日目の記事です。 はじめに 3 日目の記事で紹介されているように、OpenCV 4.5.4 では新しく顔検出/顔認識の API が実装されました。この記事ではこの顔検出 API をブラウザから呼んでみることにします。ブラウザから呼び出すにあたって、先にきちんとパフォーマンスを確認して使用する解像度を決めます。更に高速化のために SIMD とマルチスレッドを使った OpenCV の Wasm バイナリを作ります。その後、実用的な環境を想定して React のフロントエンドから呼び出すようにしてみます。ついでに WebRTC で実際に加工した画像が送信できることのデモまで行います。 OpenCV.js での新機能の扱い OpenCV.js で JavaScript から呼び出せる機能はホワイトリスト形式になっており、ビル
TypeScriptコンパイラの読み方
TypeScriptコンパイラリーディングをする上で、目当てのコードに辿りつくまでの手間を短縮するためのメモ書きです。コードリーディングの一般論や、TypeScriptコンパイラから読み取れる個別事象については極力省略しています。 TypeScriptの主要な処理系 多くのJavaScriptパーサーが拡張としてTypeScriptを読めるようになっています。また抽象構文木のフォーマットに事実上の標準があり、各パーサーはそれに従っています。AST Explorerでこれらのパーサーの出力を調べることができます。特に重要なのが以下の2つの処理系です。 TypeScript TypeScriptの型推論・リント・トランスパイル・モジュールバンドリング等ができる。 Babel TypeScriptのトランスパイルができる。 TypeScriptコンパイラの構成 libに標準ライブラリ (型定義フ
GitHub - kysely-org/kysely: A type-safe typescript SQL query builder
Kysely (pronounce “Key-Seh-Lee”) is a type-safe and autocompletion-friendly TypeScript SQL query builder. Inspired by Knex.js. Mainly developed for Node.js but also runs on all other JavaScript environments like Deno, Bun, Cloudflare Workers and web browsers. Kysely makes sure you only refer to tables and columns that are visible to the part of the query you're writing. The result type only has th
Announcing TypeScript 4.5 - TypeScript
Today we’re excited to announce the release of TypeScript 4.5! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding statically checked types. When you use static types, you can run the TypeScript compiler to check for bugs like typos and mismatches in the shapes of your data, and get handy suggestions. These types don’t change your program, and you can re
React with TypeScript Cheatsheet
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
The Vite Ecosystem
The Vite Ecosystem One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks (common web patterns, glob imports, HMR API, SSR primitives, build optimizations), freeing other maintainers from reinventing the wheel each time by offering a common ground where to collaborate, fostering a lot of explorations in the space. Maintainers from several popula
TinyBase
Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. import {createStore} from 'tinybase'; const store = createStore() .setValues({employees: 3}) .setValue('open',
How to Create Sitemaps with NextJS
A Sitemap is an important part of SEO for any public-facing website. This is a list of URLs you want crawled by google bots for indexing. Ideally, if you structure your website properly, your websites should be crawled and indexed by the google bots automatically without any sitemap. But there is no point in making google bots' life easier. NextJS makes it easy for us to achieve this. So let’s see
Next.js入門: 初心者向けの簡単なセットアップとルーティングシステムの作成方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Next.jsとは プロジェクト作成 フォルダ構成 ルーティングシステム・別ページ作成 最後に ReactのフレームワークであるNext.jsの入門を初心者の方に向けて解説します。 本日の記事と合わせて、静的サイトについても触れています。 こちらの記事も参考にしてみてください：dev-k.hatenablog.com 必要な条件 ・ JavaScriptに精通していることや豊富な経験があることが求められます。 クラス、スプレッド演算子、Promiseなどの概念の知識は必須です。 ・ ローカルの開発環境にNode.jsがインストールされていること。 Node.jsのインストールは、Download | Node.jsから行ってください。 ・ React.jsの基礎知識をある程度持っていること。 ※ なお、この記事はNext.js 13以前に投稿された記事となっておりますのでご了承下さい。 N
Dada | Dada
Welcome to Dada, an experimental new programming language!Care to try our live tutorial?Wondering what the heck Dada is all about?Jump to the web playground?
Deno by Example
Deno by ExampleA collection of annotated Deno examples, to be used as a reference for how to build with Deno, or as a guide to learn about many of Deno's features. BasicsHello WorldDependency ManagementBuilt-in TypeScript supportLogging with colorsUse Node.js built-in modulesImporting & ExportingTimeouts & IntervalsImport modules from npmManipulating & Parsing URLsEncodingParsing and serializing T
An update from the Faker team | Faker
An update from the Faker team January 14th, 2022 👋 We're pretty excited to give new life to this project. We want the project to have a fresh start and become even cooler. What is Faker? Faker is a library that generates fake (but reasonable) data for you. Mock data. Data for testing, development, and the like. Faker was first implemented in Perl in 2004 by Jason Kohles (he reached out to us in
Remix vs Next.js
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
軽量なWebフレームワークtsoaを使って、OpenAPIとexpressルーティングを自動生成する
最近、TypeScript + tsoa + express + TypeORM というような技術スタックでバックエンドの Web API 開発しています。 tsoa という軽量な Web フレームワークを使っているんですが、OpenAPI の自動生成をしてくれるので、実装と API 仕様書の齟齬がなく快適に開発ができています。この記事では、TypeScript + tsoa + express + TypeORM を使って簡単な Web API を作成してみたいと思います。 tsoa とは tsoa とは、TypeScript のコードから OpenAPI 定義の自動生成と express、koa、hapi と統合できる Web フレームワークです。TypeScript のデコレータを使ってコントローラークラスに付与して開発します。なんらかの MVC フレームワークを使ったことがある方は
UI Testing Handbook
OverviewUI testing is integral to delivering high-quality experiences. But there are so many ways to test that it can be overwhelming to figure out what's right for your project. This guide distills learnings from leading teams such as Target, Adobe, O'Reilly and Shopify into a pragmatic testing strategy that offers comprehensive coverage, easy setup, and low maintenance. We'll walk through the pr
TypeScript Cheat Sheets
Popular Documentation PagesEveryday TypesAll of the common types in TypeScript Creating Types from TypesTechniques to make more elegant types More on FunctionsHow to provide types to functions in JavaScript More on ObjectsHow to provide a type shape to JavaScript objects NarrowingHow TypeScript infers types based on runtime behavior Variable DeclarationsHow to create and type JavaScript variables
Flutterの勉強に役立ちそうなリンク集
初学者目線です。 公式 Flutter公式サイト 言わずもがな。チュートリアル、Codelab、ウィジェットカタログ、レシピ集などもある。 Flutter YouTubeチャンネル 公式が出してる、FlutterやDartに関する動画たち。 Flutter Widget of the Week 数分でウィジェットやパッケージについて学べる。 Flutter Gallery Flutterでよく使うWidgetを、Web上で触りながら確認できる。 Flutter samples Flutterで作られたサンプルアプリがまとまっている。 pub.dev パッケージの公式サイト。 Flutter Community Plus Plugins プラスプラグインの公式サイト。 動画 The Complete 2021 Flutter Development Bootcamp with Dart Ud
【Chaliceに入門してみた】LambdaとAPI Gatewayを手動で構築して消耗していた過去の私へ | DevelopersIO
こんにちは。AWS Loftが大好きな佐伯、改めKyoです。(まさか社内に佐伯さんが3名もいるとは…) AWS Loftでのハンズオンに参加してきたのでレポします。 AWS Amplify & Chalice ハンズオン 〜怠惰なプログラマ向けお手軽アプリ開発手法〜 Chaliceとは？ ChaliceはAWS Lambdaを使ったサーバレスアプリケーションを、Pythonで構築するためのマイクロフレームワークで、以下が可能です。 コマンドラインによるアプリの構築、デプロイおよび管理 API Gatewayをはじめ、S3, SNS, SQSといったAWSサービスとのインテグレーション IAM ポリシーの自動生成 Python Serverless Microframework for AWS ちなみにChaliceとは聖杯のことです。ChaliceはPythonのマイクロウェブフレームワー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Agora Real-Time Voice and Video Engagement
Phaser.js + TypeScript + Viteでゲーム開発 | DevelopersIO
Vitest はどれくらい早いのか ~ Jest と比較 ~
数学×Pythonプログラミング入門