静的ホスティングサービスの仕組みと使いどころ。そのメリットや使用の注意点も解説
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
JavaScriptでNヶ月後やNヶ月前を取得しよう(月末の処理に注意！！) - Qiita
はじめに 少し前に業務で入力日付の1ヶ月後を取得する処理を作ったが、予想以上に苦戦してしまったため記事にしました。特にJavaScriptの日付の初期化については、他の記事でもかなり見落としがあったため注意して欲しいです。 概要 一か月後の定義は民法第143条第2項（暦による期間の計算）を参照する。 具体例を示すと 2020年1月13日の一ヶ月後→2020年2月12日 2020年1月31日の1ヶ月後→2020年2月29日 2020年1月1日の1ヶ月後→2020年1月31日 となる。 一ヶ月前はこの矢印を逆にすればよい(なお2月29日の一ヶ月前は1月30日である事には注意)。 画面は以下の記事を参考にして作成した。 UIのイケているdatepickerライブラリpickadate.jsが最高だった（demo有） 主な実装方法 画面イメージは実際に作ったデモページを参考にして下さい。 デモペー
静的サイトジェネレーターの人気ランキング「StaticGen」 - JavaScript勉強会
Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ＝早い：Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ＝遅い：アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理するCMS（コンテンツ管理システム）の中で、静的ページを作れるソフトは、「静的サイトジェネレーター」（Static Site Generator）と呼ばれています。 WordPressにも静的ページ作成のプラグインを入れたら、静的サイトジェネレーターとして使えますね。 jsstudy.hatenablog.com StaticGen 今どきの静的サイトジェネレーターにはいろいろあって、どれがいいのか？いまいちよく分かりませんでした。 とりあえずの検討材料として、「StaticGen」という静的サイトジェネレーターの人気ランキングがあった
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
ホームページ- EY-Office
小ネタです、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
現在の日時を取得（ローカル時間） | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
現在の日時を取得するには、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での利用にフォーカス
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の情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
kintone 逆引き JavaScript カスタマイズ - Qiita
kintone カスタマイズに関する情報は cybozu developer network にまとまっていますが、たくさんありすぎてどこから始めたら良いのか分かりにくいなと感じたので、基本の情報にしぼって、やりたいことから情報にたどりつけられるようなリンク集を作ってみました。 開発ノウハウ *cybozu develoer network の公式のkintone開発ノウハウ集はこちらにあります。 cybozu developer network 以外の Qiita や他サイトの情報もありますので、リンクをたどる際は自己責任でお願いします。 リンクは気がついたときに、追加・更新していきます。 また、古い情報もありますが、歴史的な経緯もありますのであえて載せています。 重要 セキュアコーディング ガイドラインが改訂されています。(2020-08-12) プログラム内部に認証情報を直接書く場合
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
Botpress - チャットボット開発プラットフォーム
Botpressは、チャットボットの構築と運用が行えるパッケージソフトウェアです。PCやサーバーにインストールすることで、Webブラウザを使ってチャットボットを作って公開することができます。Botpressのコア部分は、オープンソースソフトウェアとして公開されており、無料で利用できます。 Botpressはまた、JavaScript/TypeScriptで自由に拡張できる「チャットボット型アプリの開発フレームワーク」としても利用できます。チャットボットのツールにはPython向けのものが多いなか、多くのWeb開発者に馴染み深いJavaScriptで開発できるため、Webサイト/アプリの開発現場との相性が良いのが特徴です。 書籍『チャットボットの教科書』では、Botpressの仕組みや使い方について、プログラムを書かない方にも分かりやすく、ソフトウェアエンジニアの方には本格的な活用方法まで紹
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「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などのさまざまなフレームワークやライ
アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」
isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそうですね 操作性や機能性は非常にシンプルなものなので凝ったアイソメ図には対応できませんが、学習コストも必要なさそうなのでこれはこれでアリかなぁと思います ライセンスはMITとの事です isocity
Next.js の fetchCache を考える
Next.js App Router は global のfetch関数に patch をあてており、自動でデータ取得が最適化されるように設計されています。そのうちの一つが、取得したデータをキャッシュし、再利用する最適化です。キャッシュされた取得データは、必要に応じて任意のタイミングで Revalidate（データ再取得・キャッシュ更新）が可能です。本稿はこのfetch関数を経由してキャッシュされる「fetchCache」について、どのように向き合うべきか考察したメモです。 検証留意点 はじめに、筆者が検証にあたり留意した点を書いていきます。本稿を読んでみて「自分でも検証してみたい！」となった方は、参考にしていただければと思います。 【1】取得データがキャッシュされるタイミング タイミングは２通りあります。 ビルド時: next buildで Next.js アプリをビルドした時 リクエス
初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ
TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
TypeScriptのイカれたメンバー (主要技術) 達を紹介していくぜ！！
はじめに TypeScriptを勉強していて、使用する技術とそのサンプルのコードの一覧があれば便利だなぁ と思ったので投稿することにしました。 対象読者 TypeScript初心者 TSをインストールしたけど挫折した人 前提条件 そもそもTypeScriptとはなにか？ TypeScriptとは、JavaScriptがベースとなっていて変数や引数なんかに対して型というものを付けることができる言語です。 型っていうのは、この変数には文字しか代入できないですよ～！！なんてな感じでデータの出入りを制限できるものになります。 変数や関数の後に「：」を付け、その後に任意の型を書けば完了です。これを書くだけで晴れてあなたもTypeScripterの一員です。
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Val Town