JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
GitHub、JavaScriptパッケージ管理のnpmを買収
米Microsoft傘下のGitHubは3月16日（現地時間）、JavaScriptのパッケージ管理システム「npm」をオープンソースで提供する米npm, Inc.を買収することで合意に達したと発表した。買収総額などの詳細は公表されていない。買収完了後もnpmのパブリックレジストリは無料で提供を続ける。 npm, Inc.は、エンジニアのアイザック・シュリューター氏が2009年にオープンソースで公開したnpmを持続させるために2014年に立ち上げた非公開企業。 npmは、サーバ側で動作するJavaScript「Node.js」を使うパッケージを管理するツール。パブリックレジストリは現在、1カ月に750億回ダウンロードされており、約1200万人の開発者が130万以上のパッケージを利用している。この他、有料のレジストリも提供している。 GitHubは公式ブログで、この買収により、npmの高速性
JavaScriptのイベントをたくさん見られるサイトを作る
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
YubinBango
YubinBangoは、Webフォームにて郵便番号を入力すると自動的に住所が自動入力されるライブラリ（ajaxzip3の開発者による正式な後継）です。 郵便事業株式会社（旧郵政省）提供のデータを利用しています。 郵便番号データの更新はCIで自動化しております。 詳しくはGithub内のYubinBangoのレポジトリに記載のガイドをご覧ください。 ＃お気に召しましたら任意で結構ですのでNPO法人Family1st宛にご寄付をお願いいたします。（お振込先はこちらです） 〒 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <form class="h-adr"> <span class="p-country-name" style="display:non
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
Kuker - React/Angular/Vue開発用デバッガー MOONGIFT
最近のフロントエンド界隈でのトレンドはVirtualDOMです。これまで苦労してきたDOMのステータス変更を気にすることなく、サーバサイドのようにレンダリングできるようになる技術です。しかし、その結果として通常のJavaScriptよりもデバッグしづらくなっています。 そこで使ってみて欲しいのがKukerです。各種VirtualDOMライブラリに対応したデバッグツールです。 Kukerの使い方 KukerはGoogle Chrome機能拡張としてインストールします。React/Angular/Vueなど各種ライブラリに対応しています。 表示が変化した時にはKuker側のコンポーネントも変化します。 データの内容を見ることもできます。 propsやstateも追えるのでデバッグしやすくなるでしょう。 KukerはReact/Angular/Vueの他、関連するVueX、Redux、redux
Lite Editor - とてもシンプルなWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でユーザにコンテンツを作ってもらう場合に便利なのがWYSIWYGエディタですが、あまり多機能なものはユーザを混乱させてしまうだけです。本当に必要なものだけに絞り込むのがいいでしょう。 今回紹介するLite Editorは、本当にごく簡単な機能だけに絞り込んだWYSIWYGエディタになります。 Lite Editorの使い方 エディタです。undo/redo/リンク/太字/イタリック/下線といった機能しかありません。 文字を選んでボタンを押せば装飾されます。 HTML表示に切り替えもできます。 リンクはモーダルで入力します。 リンク表示になりました。 Lite Editorはあまりにもシンプルですが、これで十分というケースも少なくないでしょう。最低限、undo/redoがあり
TOAST UI Editor - WYSIWYGとMarkdown両方をサポートしたWebエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者にとってMarkdownは便利な記法ですが、それ以外の人たちにとってはルールを覚えなければならず、面倒に感じられてしまいます。かといってWYSIWYGなツールバーを設けると開発者が邪魔に感じてしまうでしょう。 そこで使ってみたいのがTOAST UI Editorです。MarkdownとWYSIWYGを切り替えられるエディタです。 TOAST UI Editorの使い方 エディタです。上部にツールバーがついています。 日本語も問題なく入力できます。 テーブルをセル数をグラフィカルに決められるのは便利です。 Markdownの表示に切り替えることもできます。 プレビューの表示もできます。 反映はリアルタイムに行われます。 機能拡張によってグラフを追加したりできます。 TOAST
UIのイケているdatepickerライブラリpickadate.jsが最高だった（demo有） - Qiita
datepickerって何がいい？？ 昨年末からWebアプリケーションを作成していて、dateapickerの機能が必要になり、どのライブラリを使おうかと、色々と調べていたところ、pickadate.jsのdatepickerが最高だったので、概要と簡単な使い方を共有したいと思います。 datepickerライブラリのまとめ [結局、どのdatepickerが一番使い勝手がよいのか] (https://qiita.com/knt45/items/6d74f6785cd4547ae53b) - @knt45 さん ※参考にさせてもらいました pickadate.jsの概要 【実装できるdatepicker】 インストール pickadate.js インストールを実行すると以下のファイル群がインストールされ、その中から以下のjsファイルと、cssファイルを読み込ませます。 pickadate.
更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F
Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ MOONGIFT
Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。 そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。 Slyの使い方 横向きのスクロール例です。数字を選んだり、下にあるナビゲーションで移動ができます。 縦型もできます。 リストだけでなく文章などでも利用できます。 コンテンツを動的に追加する無限スクロールもサポートしています。 Slyを使えば上下または左右のスクロールに多数の機能が持たせられます。目次とその見出しへの移動に使ったり、カルーセルのような使い方も考えられるでしょう。アイディア次第で面白い使い方ができそうです。 SlyはJavaScript製のオープンソース・ソフトウェア（MIT
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
黒魔術（JavaScript）まとめ - Qiita
まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Speed Hackathon Online 出題のねらいと解説
OrgChart/README.md at master · dabeng/OrgChart
301 Moved Permanently