【図解解説】仮想DOM完全理解！君だけのオリジナルReactで仕組みを学ぶチュートリアル【初心者OK】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe jin (@Sicut_study)です。 私はReactを初心者を中心に指導してきました。 教えてきた生徒はReactで立派なサービスを開発していますが、実力はあっても仮想DOMや再レンダリングの理解が甘くバグに時間を取られるケースが多々あります。 (深く理解しなくても使えるが魅力でもあります) Reactを開発する上で「仮想DOM」や「再レンダリング」をしっかり理解することは、バグ対応やパフォーマンス向上のためにとても重要です。 今回はReactをJavaScriptのみで0から再実装すること
JavaScriptでルービックキューブGUIを作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 過去の記事で簡易的な3D表現をJavaScriptで実現する方法を紹介しました。理屈の紹介と、単に立方体が回転するだけでは退屈なので拡張してルービックキューブのGUIを作成します。 完成品はこのように動きます。 ルービックキューブGUIを作成する際の課題 ルービックキューブのGUIを作成する際、解決しなければならない課題がいくつかあります。 構成するオブジェクトが多い レンダリングが複雑 パーツの移動の表現が複雑 このくらいでしょうか。それぞれについての解説と、採用した解決方法を紹介します。 構成するオブジェクトが多い ルービ
JavaScript で table の内容を clipboard にコピー｜株式会社Romantist
2018.11.07JavaScript で table の内容を clipboard にコピーby Yuji Arai はじめに あまり需要はないと思いますが描画されているDOM要素のテキストをクリップボードにコピーしたい事象があったので作成しました。 実際の処理 サンプルのソースはこちらから html は以下 <button id="js-button">クリップボードにコピー</button> <table> <thead> <tr> <th>id</th><th>名前</th><th>性別</th><th>年齢</th> </tr> </thead> <tbody id="js-tbody"><!-- 今回はbodyの中身だけをコピーする --> <tr> <td>1</td><td>佐藤</td><td>男</td><td>43</td> </tr> <tr> <td>2</td
Apps Script | Google for Developers
ニュースレターにご登録ください デベロッパー プレビュー プログラムに参加する YouTube チャンネルを見る Google Workspace と連携 Google Developers イベントに参加する Google Workspace アプリ 管理コンソール Cloud Search Gmail Google Calendar Google Chat Google Classroom Google Docs Google Drive Google Forms Google Keep Google Meet Google Sheets Google Sites Google Slides Google ToDo リスト Google Vault 拡張、自動化、共有 アドオン Apps Script チャットアプリ ドライブアプリ マーケットプレイス ツール 管理コンソール Apps
【入門】GASとは？できること＆活用法を解説（サンプルコード付き）
Google Apps Script（GAS）は、Googleが提供するアプリケーション開発プラットフォームです。GASを使うと、HTMLやJavaScriptのような身近なWeb言語を用いて、GmailやGoogleスプレッドシートを始めとしたGoogleサービスを自動化することが可能です。 この記事では、GASとは何か、GASを使ってどのようなことができるのかを分かりやすくご説明した上で、Googleスプレッドシート上で処理を自動化するためのサンプルスクリプトをご紹介します。 GASとはGASでできることGASを利用する上での注意点GASの開発方式【入門】GASのはじめ方【GASサンプルコード】「毎日のタスクをChatworkへ自動通知」簡単な自動化からはじめよう GASとは Google Apps Script（GAS）は、ひとことで言えばGoogleが提供する各種サービスの自動化／
Google App ScriptとGoogleスプレッドシートを連携させる
マーケティングテクノロジーの情報やノウハウ・TIPS、エクスチュア社の情報を発信。【ブログネタ募集】ご興味のある分野を教えてください！ご要望の内容を記事に起こします！メニューの「ブログへの」リクエストよりお送りください。 menu こんにちは。エクスチュアの岩川です。 前回はGASを使ってWebアプリケーションを作成しました。 今回はGoogleスプレッドシートと連携させてみたいと思います。 ①スプレッドシートを開く 今回はスプレッドシートを最初に開きます。 ここを開き、Googleアカウントにログインし【空白】を選択しましょう。 ②GASを開く スプレッドシートが開いたら【拡張機能】タブをクリックし、【Apps Script】を選択します。 ③コードを書く myFunction関数に以下のコードを入れましょう。 // スプレッドシートの読み込み const spreadsheet = S
Google Apps Script 入門
目次 事前準備と確認 Google Apps Script を一通り体験 ほかにどんなことができる？ トリガー 事前準備と確認 (1) Google アカウント Android スマートフォンを使っていたり、Gmail を使っている人はおそらくもう持っています。 学校や職場から発行されている Google Workspace (旧称：G Suite) アカウントでもOKです。 Google アカウントを持っていない人・別に新しく作りたい人は こちら から作成してください。 (2) 公式ドキュメント 公式ドキュメント: Google Apps Script の "Learn Apps Script" (上のメニューバーにあります) 以下にある Guides と Reference は特によく参照します。 Google Apps Script を一通り体験 まずは Google Apps Sc
ブラウザのJavaScriptでShiftJISのcsvを作ってダウンロードさせる - Qiita
JavaScriptでやる必要があるのだろうか…… サーバ側が対応してくれないので、rest apiを駆使してブラウザでcsvを作るとかでしょうか……？ まぁ、それは一旦横に置いておくとして。 utf-8だったらそんなに難しくないんですけれどもね。 その形式だとexcelに優しくないので、ShiftJISの形式にして頑張ってcsvを作ってみようと思います。 実装例とデモ https://github.com/fumihiko-hidaka/create-sjis-csv https://neko-tech-test-storage.storage.googleapis.com/create-sjis-csv/index.html こっちの方が楽だよ！ とかあれば、コメントやprいただければ 動作確認はchromeだけです 使ったライブラリ 日本語の変換用にencoding-japanese
JavaScriptでファイルダウンロード処理を実現する - Qiita
はじめに モダンブラウザならJavaScriptでファイルダウンロード処理を実現することができます。SPA(シングルページアプリケーション)など、クライアント側にデータを持つようなアプリケーションであればサーバアクセスなしにメモリの内容からファイルを生成してダウンロードさせることができます。 実装方法 やり方は リンクのHTML5のdownload属性を使用してダウンロードファイル名を設定 File APIのBlobを使用してデータを作成 window.URL.createObjectURLでBlobからURLを生成しそれをリンク先に設定 とするだけです。これでChromeとFireFoxはいけます(download属性のブラウザ実装状況を見るとを見ると、試せていないですがEdgeとOperaもいけそう)。加えてIEをサポートする場合は、IE10/11であればwindow.navigato
【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法 – webfrontend.ninja
リンクをクリックしてファイルを保存する方法 a 要素のリンクをクリックすることでファイル保存させるのは比較的簡単にできます。ここでは JSON データを生成し、それをファイルとして保存できるようにします。 document.getElementById('dllnk').addEventListener('click', (event) => { // JSON ファイルを表す Blob オブジェクトを生成 const json = JSON.stringify({ a: 1, b: 2, c: 3 }, null, ' '); const blob = new Blob([json], { type: 'application/json' }); // a 要素の href 属性に Object URL を セット event.currentTarget.href = window.UR
JavaScript でタイムゾーン名を取得する方法 - Qiita
JavaScript で Asia/Tokyo や America/Los_Angeles のような IANA Time Zone Database で定義されたタイムゾーン名を取得する方法ですが、 結論 結論から言うと、正確に取得する方法はありません。 JavaScript の Date には、タイムゾーン名を取得する API がないからです。 var date = new Date(); date.toString(); // => "Fri Sep 19 2014 04:49:59 GMT-0700 (Pacific Daylight Time)" date.getTimezoneOffset(); // => 420 Date を文字列化すると夏時間も考慮したタイムゾーンの名前が出力されて惜しい感じですが、仕様が決まっているわけではないのでブラウザ毎に違っていて使えません Date
JavaScript における文字コードの初歩 - 30歳からのプログラミング
この記事では、 JavaScript で文字コードを扱う際に知っておくべき概念である Code Point や Code Unit、サロゲートペア、といったものについて説明していく。 また、具体的にそれらの概念を使ってどのようにコードを書いていくのかについても扱う。 この記事に出てくるコードの動作確認は以下の環境で行った。 Deno 1.26.0 TypeScript 4.8.3 Code Point （符号位置） プログラムで文字を表現する方法は複数あるが、 JavaScript では Unicode という方法を採用している。 Unicode ではあらゆる文字に対して一意の値を割り振ることを目的としており、この値のことを Code Point （符号位置）という。 Code Point は 16 進数の非負整数で、文章中で表記するときは接頭辞としてU+をつける。 例えばAという文字の
ブラウザ用漫画ビューアーライブラリ「ToraViewer」を公開しました - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボのはっとりです。 ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。 www.npmjs.com github.com はじめに この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。 ToraViewerで何ができるのか ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。 デモページから実際の動作を確認することができます。 Tora Viewer デモ ToraViewerデモ 画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。 また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。 ToraViewerの使い方 まずはインストールします。 npm i @toralab/tora-vi
複数の画像を生成してローカルに保存 - Qiita
HTML 要素を画像化した複数のファイルをローカルの専用サーバーに送って保存します。 シリーズの記事です。 dom-to-imageを試す html2canvasを試す 複数の画像を生成してローカルに保存 ← 今回の記事 ライブラリ 前回まで同じ目的の2つのライブラリを比較しました。どちらも Firefox では文字サイズが変わってレイアウトが崩れるため、今回は Chrome を前提に進めます。 テキストだけを含む要素の画像化ではどちらを使ってもほとんど差がありませんでした。XMLHttpRequest でファイルを送るには Blob に変換する必要があるため、その機能をサポートしている dom-to-image を使用します。 HTML 要素を画像化した Blob の生成は簡単にできます。
ブックマークレットで外部ファイルを使う方法
ブックマークレットの長さの制限は508文字だそうです。 複雑なものを作ると超えてしまうかもしれません。 このような場合はJavaScriptの本体を外部のファイルにする方法を使うとよいです。 javascript:(function(){var%20url='http://xxxx/bm.js';var%20d=document;var%20e=d.createElement('script');e.src=url;d.getElementsByTagName('head')[0].appendChild(e);})(); javascript:(function(){ var url='http://xxxx/bm.js'; var d=document; var e=d.createElement('script'); e.src=url; d.getElementsByTagName
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Digest authentication using Javascript XMLHttpRequest
How to slide{move} slider in Selenium WebDriver
GitHub - thevahidal/soul: 🕉 Soul | Automatic SQLite RESTful and realtime API server | Build CRUD APIs in minutes!
GitHub - toranoana/tora-viewer
https://musou.s38.xrea.com/JavaScript/%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88.html