Honoを使ってAWS Lambda + API Gateway環境でAPI開発に使ってみた
ちょうど、T&Tでシステム連携のためのRESTful APIを実装する機会があったのですが、新規かつ、小さなものだったので、たまには使ったことがないものを使ってみようかなと思い、軽いと評判のHonoを使ってみることにしました。 Hono AWS Lambda + API Gateway REST API(v1) v2じゃないのはAPIキーの仕組みを使いたかったため @hono/zod-openapiでOpen API DocとSwagger UIを出力 Honoとは、高速、軽量(zero dependencies)、マルチプラットフォーム(Cloudflare, Fastly, Deno, Bun, AWS Lambda, Node.jsなどで動作)、強力なTypeScriptサポートが特徴のモダンなウェブフレームワークです。 どのようなシステムで利用したか 今回、MEGURU CLUBと
useEffect: 基礎から使用すべきでない例まで
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
私がthrowを使わない理由
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
Node.js — Node v20.6.0 (Current)
Notable changes built-in .env file support Starting from Node.js v20.6.0, Node.js supports .env files for configuring environment variables. Your configuration file should follow the INI file format, with each line containing a key-value pair for an environment variable. To initialize your Node.js application with predefined configurations, use the following CLI command: node --env-file=config.env
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Reactivity with Modern Vanilla JavaScript August 21, 2023 “Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web DevelopmentWe handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We mus
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
末尾呼び出し最適化とJavaScript
著者情報 : kota-yata.com プレゼン動画 : https://www.youtube.com/watch?v=BcaPCnWZuvY
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
GitBookをForkしてHonKitを作りました
GitBookはMarkdownからドキュメントページや書籍を作成するツールですが、 以前OSSで公開されていたGitBook(legacy)はDeprecatedとなって開発は止まっています。 ⚠️ Deprecation warning: As the efforts of the GitBook team are focused on the GitBook.com platform, the CLI is no longer under active development. All content supported by the CLI are mostly supported by our GitBook.com / GitHub integration. Content hosted on the legacy.gitbook.com will continue worki
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では
マイクロソフト、「TypeScript 2.3」をリリース。コメント付きJavaScriptをTypeScriptで型チェック可能に
マイクロソフト、「TypeScript 2.3」をリリース。コメント付きJavaScriptをTypeScriptで型チェック可能に マイクロソフトは「TypeScript 2.3」のリリースを発表しました。 TypeScript 2.3では、JavaScriptファイルにコメントを記述することでTypeScriptによる型チェックなどを行える機能が追加されました。これにより、明示的にTypeScriptのファイルを記述しなくともTypeScriptの利点をすぐに得られるようになったとマイクロソフトは説明しています。 具体的には、JavaScriptの先頭にコメントとして「@ts-check」と記入し、TypeScriptによるチェックを受け入れる旨を宣言。さらにJSDocの形式のコメントを記述することで型を宣言します。 // @ts-check /** * @param {string}
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
React Native と Android Studio を使い比べてみる - 株式会社Rmake Blogs
黒田 大介(Dycoon)です。仕事では少し入り組んだwebアプリのフロントエンドをJavaScriptで書いたり、Unityを触ったりしています。 今回は Smartphone でプラットフォームが用意している UI の機能を使うようなアプリ開発について調べてみます。Smartphoneのアプリ開発ではプラットフォームが用意している開発環境と、それらを間接的に扱う代替的な開発環境のどちらを使うかという選択肢があります。 基本的にはSmartphoneアプリ開発はOSのプラットフォームが用意している開発環境を利用すればおこなうことができます。 Android Studio + Android SDK + Java (あるいはKotlin等JVMを出力できる言語) XCode + iOS SDK + (Objective-C or Swift) これらを使う場合、プラットフォームが提供するA
TwitterはScalaを捨ててません（少なくとも現在は） - kmizuの日記
なんだかTwitterの一部で www.utali.io の記事が話題になってるようですが、はっきり言って誤情報です（というか、何故そんな誤解をしたのか知りたいくらい）。根拠はいくつかありますが Twitterは最近（ここ数ヶ月）にScala CenterのAdvisory Boardにjoinしている 置換えたとされるFinagleのコミットが最近でも活発である そもそも引用元ツイートで一言も、Scalaを捨てたに相当する表現が見られない 1についてですが、Scala作者のMartin Odersky先生が Odersky先生も参戦してる。"For what it's worth Twitter just joined the Scala Center advisory board as a full member. Don't believe the FUD."— 水島宏太（ゆる糖質制
EmscriptenやWebAssemblyを使ったWebゲーム開発 | 公式サイト | CEDEC 2016 | Computer Entertainment Developers Conference
WebブラウザでCやC++などのバイナリコードが実行される時の技術の仕組み。 Emscriptenやasm.js、WebAssemblyの概要。 セッションの内容 近年はスマートフォンアプリが流行っているのであまり注目されておりませんが、ここ数年でブラウザの性能は大きく向上しました。UnityなどのゲームエンジンではWeb出力への対応も始めており、ブラウザの中で表現出来る可能性は現在進行形で大きく広がっています。 このセッションでは、そういったゲームエンジンの裏側で使われている技術に焦点を当ててご紹介します。本来JavaScriptしか動かない（と思われている）ブラウザの中で、どのようにCやC++のプログラムが動いているのか、といったEmscriptenやasm.jsの基本的な解説から、言語機能はどの程度サポートされているのか、パフォーマンスはどの程度か、といった実際のゲーム制作で重要にな
JetBrains IDEでeslintとjscsを設定してみた
仕事でeslintとJSCSを使っているのですが、gulpで回しているだけだとlintエラーに素早く対処しにくいので、IDEでも設定してみることにしました。（私が主に使っているのはRubyMineです。） !!!インストール {{{code // JSCSとeslintのインストール npm install jscs -g npm install eslint -g // babelパーサとreact向けプラグインのインストール npm install babel-eslint -g npm install eslint-plugin-react -g }}} !!!IDEの設定 以下のページを参考に設定を行いました。.eslintrcや.jscsrcを見に行くようにしているので、gulpでビルドするときにかかるチェックと同じものがかかります。 -[link https://www.jet
AltJSの選び方フローチャート - Qiita
JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言
米Yahoo!がYUI新規開発中止を発表。その背景となったJavaScriptの現状解説
米Yahoo!のエンジニアリングチームは、同社がこれまでJavaScriptライブラリとして開発してきたYahoo User Interface library（YUI）の新規開発を中止すると発表しました。 YUIは、JavaScriptでインタラクティブなWebサイトを構築する技術「Ajax」への注目が高まっていた2009年に登場したライブラリです。さまざまなメニュー、カレンダーやカラーピッカー、タブ、リッチテキストエディタなどのコンポーネントが揃っているだけでなく、DOM操作やイベントハンドリング、テスト用ライブラリやJavaScript圧縮ツールなど、幅広くJavaScriptを強化するための機能を備えています。 しかしその後登場したjQueryなどのさまざまなライブラリやツールに人気を奪われ、ここ数年はYUIへの注目度も低下。コミュニティからのリクエストも少数になり、多くのモジュー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The State of JavaScript 2019: Front End Frameworks
