TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
Before Gutenberg - WPerが知っておくべきES6とReactのこと - Capital P
この連載ではGutenbergがリリースされる前にやっておくべきことをまとめているのだが、Gutenbergがもたらしたもっとも大きな変更点として、Reactの導入がある。これにより、次の新しい要素が導入される。 ES6/ES Next React + JSX さて、以上の概念について慣れ親しんでいる人は特に驚きはないだろうが、これまでjQueryぐらいでしかJavaScriptを学んでこなかった方は本稿を読んで今後の参考にしてほしい。 TL;DR ES6とは、新しいJavaScriptだが、ブラウザ互換性のために色々工夫する必要がある。 WordPressではES5による記法を提供しているが、ES6(ESNext)で書くべきである。 挫折した人はツール類の登場を待つか、Webアセンブラーに転職しよう。 ちなみに、TL;DRとは、”Too Long, Don’t Read”の略で、長文ブロ
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts（GAS）です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう？ と思ったあなた！ このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
jqueryのattrとprop（とdataとvalとhtmlとかつまり属性とかの取得）の使い分け一覧 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最初に attrとpropの使い分けがわからないと言われたので、誰でも使い分けができるようになる一覧を作りました。 基本的にはpropで取得できるものはpropで、そうじゃないものはattrで、と思っていたのですが、data-*やvalueまでそれで取得していたので、思ったよりもが根が深いなと思った次第です。 #（追記）data属性に対する扱いについて data-*属性には、用途が2種類あります。 HTML5としてのカスタム属性（とそれを利用した関連技術） jQueryのdata()メソッドのための初期値 前者はそれを利用した有名どころ
サブミット時に display none になっている入力欄に disabled 属性をつける jQuery プラグインを作った - わからん
フォームをサブミットするときに、display none になっている input 要素に disabled 属性をつける JavaScript を書いたので、jQuery プラグインにしてとっておくことにしました。サブミット時に DOM のトラバースコストを払うことで、サーバサイドでは、より本質的な仕事に集中できます。フォーム部品の hide()/show() 類を多用する巨大なフォームでの利用を想定しています。 仕様 hidden 属性を持つ input 要素は対象としません input 要素自体が display none ならサブミット時に disabled 属性を付与します input 要素の親要素のどれかが display none なら、サブミット時に input 要素に disabled 属性を付与します 実装 (function($) { var is_none = fu
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
bootstrap-input-spinner
A Bootstrap / jQuery plugin to create input spinner elements for number input, by shaack.com engineering. For now it needs jQuery, but I am working on it. This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch bootstrap4-compatible. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible. License: MIT Features The Bootst
Vim を WebAssembly に移植した - はやくプログラムになりたい
久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこちら（下記の注意事項を先にお読みください） 注意 デスクトップ版の Chrome か Firefox か Safari か Edge を使ってください．どうやら macOS では Safari が一番動きが良いです． デモページは全部で1MBほどのリソースを fetch します．モバイルネットワークなどからアクセスする場合はお気をつけください． keydown でキー入力を取っているので，キー入力を横取りするブラウザ拡張などが有効になっていると
フロントエンドの「想定外」に対応する考え方とTipsいくつか
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。 しかし実際は、悪い意味で期待を裏切られることになりました。 Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。 全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。 フロントエンドの想定外 ウェブサイト
Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
2018年のJavaScriptのコードフォーマッター事情 - Qiita
2020/01/23追記: これはすでに古い情報です。ESLintとPrettierは同時に使わないのが今の推奨設定です。最新の情報は以下のところにあります。 https://future-architect.github.io/typescript-guide/baseenv.html 以下は過去の情報です PySpa統合思念体です。 go fmt便利ですよね。設定なしで言語が定めるルールで一発でやってくれるので良いですね。で、JavaScriptでは歴史的経緯もあって、フォーマットの流派はいろいろあります。 インデントはスペース2/4、ハードタブ 文字列にはシングルクオート使う派（英語キーボードだとシフトキー押さなくていい） 末尾のセミコロンは必須・省略 そのためカスタマイズ可能なフォーマッターが必要となります。カスタマイズの柔軟性や歴史的経緯や新しい文法への対応などで、いくつかのツー
1行のコードでモバイルブラウザに開発者ツールを搭載できるJavaScriptライブラリ「Eruda」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、スマホのモバイルブラウザに本格的な開発者ツールを組み込むことができるJavaScriptライブラリをご紹介します！ 「コンソール」機能を使ったデバッグやエラーログの確認、「ネットワーク」機能で通信状態を確認したり、「リソース」機能でCookieデータを確認するなどなど…、開発する上で便利な機能が満載です。 スマホ1つあれば開発者ツールが利用できるので、ぜひみなさんも試してみて下さい！ 【 Eruda 】 ■「Eruda」の使い方 それでは、「Eruda」を利用して開発者ツールを使うための準備作業から始めましょう！ 準備といってもやることは簡単で、「Eruda」のライブラリファイルをインストールするだけです。 Node.jsの開発環境を持っている人であれば、npmから以下のようにインストールできます。 npm install eruda
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
WinampをHTML5とJavaScriptで再現した「Winamp2-js」
往年のMP3プレイヤーソフトウェア「Winamp」のバージョン2.9をHTML5とJavaScriptを用いて再現し、ブラウザ上で音楽を再生可能な「Winamp2-js」が公開されています。 Winamp2-js https://jordaneldredge.com/projects/winamp2-js/ GitHub - captbaritone/winamp2-js: A reimplementation of Winamp 2.9 in HTML5 and Javascript https://github.com/captbaritone/winamp2-js Winamp2-jsが動作するのはEdge、Firefox、Safari、Chromeで、Internet Explorerはサポート外。 「プレイヤー部分にファイルをドラッグ&ドロップ」「イジェクトアイコンを押してファイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive HTML5 Video Popup Plugin With jQuery - videopopup.js | Free jQuery Plugins
jQuery Image and Video LightBox Plugin
jQuery DataTables Checkboxes | Gyrocode.com
何っ！ PWAがデスクトップでも動くだと？ しかも最高だと？【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応@追記あり6/12 - Qiita
