30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

HTML5

ルーティング機能を自作して学ぶ History API

History API は、HTML5 で導入された API。 これを使うことで、JavaScript で URL の履歴を管理できるようになる。 多くの場合、そういった操作は React Router や Vue Router などのルーティングライブラリを通して行うことになる。そのため、History API …

フロントエンドでバイナリファイルを扱うためのBlobオブジェクトとFileオブジェクト

このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 c…

QUnitでTDDの実践(DOM編)

以前、QUnitを使ってTDD(テスト駆動開発)を実践してみた。 その時に残った課題として、DOMをテストする方法が分からない、というのがあった。 numb86-tech.hatenablog.com その後DOMやイベントをテストする方法を学んだので、ドラッグアンドドロップを題材…

Drag & Drop APIの基本

HTML5には、ブラウザ上でのドラッグアンドドロップを実現するためのDrag & Drop API(以下、DnD API)が用意されている。 draggable属性 まずはHTMLの要素にdraggable属性を設定して、その要素がドラッグ可能かどうかを指定する。 真偽値で設定。 <div id="box1" draggable="true">box1</div> <div id="box2" draggable="false">box2</div>…

QUnitでTDD(テスト駆動開発)を実践してみる

QUnitやTDDの概要は分かったが、まだまだ、テストのためのテストをやっている段階。 どうやって実務に活かせばいいのかは分かっていない。 そこで、このページの内容を読んでみた。 実践TDD! テスト駆動開発入門 : アシアルブログ 非常に分かりやすくて、実…

ブラウザにデータを保存できるHTML5のAPI、Web Storageの基本

HTML5で実装されたAPIの一つである、Web Storageについて。 HTML5について そもそもHTML5とは何か。 現行のHTMLのバージョンのことで、その大きな特徴は、様々なAPIが実装されたこと。 これまでのように文書作成だけに主眼を置くのではなく、ウェブアプリケ…