Edge.js reimagines Node: fully sandboxed, engine-agnostic, and built for AI and serverless workloads. Ubiquitous by design.
JavaScriptだけでpdfファイルを出力できるような、オープンソースで公開されているライブラリがいくつかあります。今回のTipsでは、ブラウザ側(HTML+JavaScript)でオープンソースのPDF-LIBを使用してPDFファイルを出力する方法をご紹介します。 PDF-LIBとは PDF-LIBはPDFファイルをJavaScripから出力できるオープンソースのライブラリです。 サーバーサイドのnodejsだけでなく、ブラウザ側(HTML+JavaScript)を使用してPDFを出力することができます。 PDFファイルを作成することもできますし、テンプレートになるPDFファイルを読込み、追記することも可能です。 また、文字列書込みだけでなく、画像を挿入したり、図形を描画することもできる便利なライブラリです。 ■PDF-LIB https://pdf-lib.js.org/ リソース
JetBrains、JavaScript/TypeScriptのためのIDE「WebStorm」と.NETのためのIDE「Rider」、非商用利用ならば無償で利用可能に。RustRoverやAquaに続き IntelliJ IDEAなどの統合開発ツールやKotlin言語の開発などで知られるJetBrainsは、JavaScript/TypeScriptのためのIDE「WebStorm」と.NETおよびゲーム開発のためのIDE「Rider」を、非商用利用ならば無償で利用可能にすることを発表しました。 @WebStormIDE と @JetBrainsRider をご利用の皆様へ嬉しいお知らせです!WebStorm と Rider の非商用利用が無料になりました。 詳しい内容はブログ記事をご覧くださいhttps://t.co/U45rZKvIrm#JavaScript #TypeScript
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC(ガベージコレクション)機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML+JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS(コンテンツ管理システム)の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」(Static Site Generator)と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか?いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった
小ネタです、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では案外面倒なのです。 追記: いくつかの間違いのご指摘がありましたので修正しました(2023-04-19)。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
現在の日時を取得するには、Dateオブジェクトを使用します。 引数に日時を指定することで、指定した日時のインスタンスを返します。 ※ JavaScriptで得られる日時はお使いのパソコンや端末の日時を取得しています。 デモ 構文 var dateInstance = new Date(); var dateInstance = new Date(value); var dateInstance = new Date(date string); var dateInstance = new Date(year, month, day [, hour, minute, second, millisecond]);
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」(Low Latency Runtime)をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services(AWS)は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」(Low Latency Runtime)をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより(Node.jsやDenoや
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
はじめに この記事の内容はhtmx v1の記事です。 最新のhtmx v2に関する解説は以下の本にまとめましたので、そちらを参考にしてください!! HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた!(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのH
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? kintone カスタマイズに関する情報は cybozu developer network にまとまっていますが、たくさんありすぎてどこから始めたら良いのか分かりにくいなと感じたので、基本の情報にしぼって、やりたいことから情報にたどりつけられるようなリンク集を作ってみました。 開発ノウハウ *cybozu develoer network の公式のkintone開発ノウハウ集はこちらにあります。 cybozu developer network 以外の Qiita や他サイトの情報もありますので、リンクをたどる際は自己責任でお願いしま
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
Botpressは、チャットボットの構築と運用が行えるパッケージソフトウェアです。PCやサーバーにインストールすることで、Webブラウザを使ってチャットボットを作って公開することができます。Botpressのコア部分は、オープンソースソフトウェアとして公開されており、無料で利用できます。 Botpressはまた、JavaScript/TypeScriptで自由に拡張できる「チャットボット型アプリの開発フレームワーク」としても利用できます。チャットボットのツールにはPython向けのものが多いなか、多くのWeb開発者に馴染み深いJavaScriptで開発できるため、Webサイト/アプリの開発現場との相性が良いのが特徴です。 書籍『チャットボットの教科書』では、Botpressの仕組みや使い方について、プログラムを書かない方にも分かりやすく、ソフトウェアエンジニアの方には本格的な活用方法まで紹
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそうですね 操作性や機能性は非常にシンプルなものなので凝ったアイソメ図には対応できませんが、学習コストも必要なさそうなのでこれはこれでアリかなぁと思います ライセンスはMITとの事です isocity
Next.js App Router は global のfetch関数に patch をあてており、自動でデータ取得が最適化されるように設計されています。そのうちの一つが、取得したデータをキャッシュし、再利用する最適化です。キャッシュされた取得データは、必要に応じて任意のタイミングで Revalidate(データ再取得・キャッシュ更新)が可能です。本稿はこのfetch関数を経由してキャッシュされる「fetchCache」について、どのように向き合うべきか考察したメモです。 検証留意点 はじめに、筆者が検証にあたり留意した点を書いていきます。本稿を読んでみて「自分でも検証してみたい!」となった方は、参考にしていただければと思います。 【1】取得データがキャッシュされるタイミング タイミングは2通りあります。 ビルド時: next buildで Next.js アプリをビルドした時 リクエス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く