Honoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog

2024/12/17 109 users hono stin's blog Next.js 捉え方

HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => c.json({ message: "Hello, Hono!" })); export default app; HonoはWeb標準準拠を謳っているフレームワークです。それを聞くとな... 続きを読む

import / exportの記法だけではない、CommonJS modulesとES modulesの違い

2024/12/04 11 users export ESM require ES Modules

本記事はsyumai Advent Calendar 2024 4日目の記事です。 内容としては、主にWeb Developer Conference 2024の休憩中に@NozomuIkutaさんと行った雑談を記事化したものです。 内容に何か問題があれば、本記事のコメント欄や、Xなどでご連絡ください。 require(esm)の登場 2024年、ついにNode.jsのCommonJS modulesから、E... 続きを読む

TypeScriptにおける日付フォーマットの個人的ベストプラクティス

2024/11/11 8 users TypeScript ベストプラクティス text フォ 関数

import { formatDate } from './dateUtil.ts' const text = formatDate(new Date(), 'YYYY年M月D日(曜)'); console.log(text); // 2024年11月9日(土) 日付フォーマットはJavaScript標準のtoLocaleDateStringを使っています。 関数のオーバーロードを使うことで、フォーマットごとの説明をIDE上で表示させています。 フォ... 続きを読む

Terraformで不要になったmoved/import/removedブロックを楽に削除する

2024/08/31 25 users github.com 制約 Terraform https

Terraformのmovedブロックやimportブロック、removedブロックは便利です。しかし、applyした後に削除するのが面倒です。面倒といっても何か制約がある訳ではなく、単に削除するPRを出すのが面倒という話です。そこまで頻繁にこれらのブロックを使うわけではないのですが、削除を楽にするために https://github.com/takai... 続きを読む

JavaScript｜importの書き方が多いのでまとめてみた - Qiita

2024/08/24 63 users Qiita エンジニア みなさま 学習 感謝

はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 記事は約3分程度で読めるので最後まで読んでもらえると幸いです。 さっと見たい人向け importの書き方パターン 説明 続きを読む

Promise や Context から値を読み取る use React フック

2024/04/07 28 users CONTEXT Promise Canary async 以下

use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { c... 続きを読む

【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】

2024/03/07 9 users Vue マクロ script ref div

<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ... 続きを読む

Goで関数の引数に、union型っぽくstruct Aもしくはstruct Bのどちらかを受け取れるようにしたい - $shibayu36->blog;

2024/02/26 18 users 引数 関数 $shibayu36 Blog generics

Goで関数の引数に、struct Aという型もしくはstruct Bのどちらかを受け取るということをしたかった。interfaceをちゃんと切ってそれに必要なメソッドをAとBに実装することで実現できることを知った上で、あまり丁寧にそういうことをせずにやりたい。 色々調べると、genericsを使うとできるようだ。 package main import ... 続きを読む

GPT-3.5-Turbo / GPT-4-Turbo 1106のJSONモードの使い方｜shi3z

2023/11/06 248 users GPT-4-Turbo gpt-3.5-turbo 使い方

日本時間未明(午前三時)ものすごいスピードで語られたOpenAI初の開発者向けイベントDevDayで発表されたGPT-4-TurboとGPT-3.5-TurboによるJSONモード。 これはものすごく強力なんだけど、Python APIによる使い方がどこにも描いてないので試行錯誤の末見つけましたので共有いたします。 from openai import OpenAI import ... 続きを読む

Pythonにおけるimportの危険性とは　全ての運用関係者が知っておくべきPython特有のセキュリティリスク

2023/08/12 13 users セキュリティリスク Python 悪用 解決策 危険性

Pythonにおけるimportの危険性とは　全ての運用関係者が知っておくべきPython特有のセキュリティリスク：便利だが攻撃者による悪用の可能性も Pythonのimportステートメントには、開発者や企業が注意する必要があるセキュリティリスクが伴う。これがどのように機能するのか、そしてなぜ簡単な解決策がないのかを解説する... 続きを読む

アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog

2023/07/10 7 users アセット Components header TSX src

Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/a... 続きを読む

Denoのフロントエンド開発の動向【2023年夏】

2023/07/02 10 users deno Deno本体 動向 半年程 フロントエンド開発

半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート node:URLのサポート Deno v1.30でNode.js組み込みパッケージのimportがサポートされています。 import { EventEmi... 続きを読む

Terraform 1.5 で追加される import ブロックの使い方

2023/05/22 16 users 使い方 Terraform リソース 既存 管理下

先日 Terraform v1.5.0-beta1 がリリースされました。 NEW FEATURES を眺めてみると、どうやら import ブロックというものが追加されているみたいです。 今までは既存のリソースを Terraform の管理下に追加するためには terraform import コマンドを使用して 1 つ 1 つ import する必要がありました。 import ブロック... 続きを読む

ゼロランタイムで fetch に型をつけたい

2023/05/18 49 users fetch from フルパス ライブラリ化 型情報

まだライブラリ化してないのと、フルパス対応してないけど、いじれば使えると思う。 これは何 こういう感じに fetch に型がついて動く import { type TypedFetch, JSON$StringifyT, JSON$ParseT } from "./typed-fetch"; const stringifyT = JSON.stringify as JSON$stringifyT; // こんな感じの記法で型情報を与える co... 続きを読む

JavaScriptで本日の日付をYYYY-MM-DD形式で得る短いコード - EY-Office

2023/04/18 328 users EY-Office strftime 日付 短いコード 本日

小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なので... 続きを読む

ChatGPTをWebフレームワークにしたら、未来が見えた

2023/03/20 178 users chatgpt hono Webフレームワーク Cache

ChatGPTを文字通りWebフレームワークにしてみました。 何を言っているかわからないと思うので、次のコードを見てください。 import { initChatGptGenerator } from "gpt-as-api"; import { Hono } from "hono"; import { cache } from "hono/cache"; const gpt = initChatGptGenerator( "これからTODOアプリとしてふるま... 続きを読む

const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた

2023/02/22 184 users satoko Props React return リズミカル

VTeacher所属のSatokoです。 QAエンジニアとフロントエンドエンジニアを兼任しています。 1.久しぶりにReactのプロジェクトに参加 リズミカルにキーボードを　タタンッ！　として、 import { FC } from "react" type Props = {} const Hoge: FC<Props> = () => { return ( <> </> ) } export default Hoge って、得意気... 続きを読む

ChatGPTで自然言語処理のData Augmentationやってみた。｜tdual｜note

2023/02/07 28 users OpenAI tdual chatgpt gpt-3 返答

※ChatGPTと言っていますが、正確にはOpenAIの「code-davinci-003」というGPT-3のモデルを使っています。 ChatGPT、すごいですよね！ 質問すれば、ある程度のことはいい感じの返答をしてくれますね。 例えば「〜と似た文章を作って。」メッセージをChatGPTに投げることで、似たような文章を生成できます。 入力： import ... 続きを読む

ブラウザからもNode.jsからも import できるWebAssemblyライブラリを作る

2022/09/11 9 users WebAssembly wasm node.js ブラウザ

WebAssembly というやつは便利で一度コンパイルしてしまえばブラウザでも Node.js でも実行できる。 でも .wasm のファイルをどうやって読み込むのか、というのがブラウザと Node.js では違う。 色々やり方はあると思うけど、一番素直なやり方を考えてみる。 まずブラウザの場合は main.wasm みたいなファイルを適当な場... 続きを読む

PreactにSignalsがきた - console.lealog();

2022/09/07 15 users Signals SIGNAL SOLID Preact ＡＤＤ

Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・！ まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.... 続きを読む

Webアプリケーション自動デバッグ構成機能搭載のVS Code用「Python」2022年8月版

2022/08/07 6 users Python Pylance VS Code用 拡張機能 改善

Microsoftは現地時間2022年8月4日、Visual Studio Code用拡張機能「Python」の2022年8月版をリリースした旨を公式ブログで報告した。本バージョンでは、Webアプリケーションの自動デバッグ構成機能の追加やチュートリアルの改善が加わっている。また、拡張機能「Pylance」で未使用のimportを削除する機能を、拡張機能「J... 続きを読む

golangではスタックとヒープを気にする必要が無い

2022/06/24 88 users ビーフ golang fmt スタック ＡＮＩＭＡＬ

調べようと思ったきっかけは、golang では以下のように ローカル変数のアドレスを戻り値としても問題ないということ。 package main import ( "fmt" ) type Animal struct { Name string Age int } func main() { animal := allocAnimal() fmt.Printf("allocate animal structure %p", animal) } func allocAnimal() *An... 続きを読む

import * as 構文とパフォーマンス最適化 - Qiita

2022/05/28 87 users Qiita パフォーマンス最適化

/******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ([ /* 0 */, /* 1 */ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "R": () => (/*... 続きを読む

ReproのImport/Exportを支えるサーバーレスアーキテクチャ

2022/04/22 17 users Repro export サーバーレスアーキテクチャ

Architect New World On AWS 2022 というオンラインイベントで登壇した際の発表資料です。 cf. https://www.sbbit.jp/eventinfo/69957/ AWSのLambda, Fargate, Step Functionsを組み合わせてサーバーレスでスケーラブルなデータインポートプラットフォームを構築したノウハウについて解説する内容になります。 続きを読む

ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った

2022/03/24 8 users バンドルサイズ package.json dist npm

bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバン... 続きを読む