クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)

JS

はじめに、今回はJSONにあまり触れていません! WordPress等で日々サーバサイドやデータベースの便利さを感じつつ…そういえばJSとよく似たJSON(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティ…

【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!

JS

前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。その続きになります。 この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われて…

【JS】フォームのinputタグにURLパラメータを渡す方法

JS

URLの後ろにつらつらと続くパラメータ。あれを取得してフォームのinputタグに渡す方法をご紹介。やれることはわかってて前からやってみたいと思っていた内容なので、実際に作ってみました。それでは、どうぞ!

CSS変数でドット絵マリオをルイージにしたった!

CSS

「CSSドット絵マリオ」の続きです。前回は1点ずつチマチマと打っていきましたが、たった一人ではいささか寂しいですね。そうだ、ルイージを呼ぼう。「CSS変数」を使えば一瞬でこのマリオがルイージに変わるはず。たぶん変わると思う。変わるんじゃないかな…

【続・CSSの文字詰め】letter-spacingとfont-feature-settingsとYaku Han JPに両端揃えのtext-align: justifyは効くのか

CSS

昨日の「CSS文字詰め」の続きになります。カーニングで文字詰めをしたテキストに対して、CSSの「両端揃え」設定であるtext-align: justifyを併用すると、果たしてちゃんと両端揃えはかかってくれるのか?いつ調べるか?今で(ry それでは参りましょう。

【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較

CSS

今日、テキストの約物(句読点やカッコなど)を文字詰めしてくれる素敵なWebフォント「Yaku Han JP」を知りました。CSSのデフォルトにある文字詰め機能、letter-spacingとfont-feature-settingsと見え方などを比較してみました。では、どうぞ。

【Three.js】回る箱をいろいろ打ち替えてみる

ブラウザで3Dコンテンツを作るJSライブラリ「Three.js」。前回は回る箱を表示してコードを細かく見ました。今回は実際の動きとしてどこをどう打ち替えたらどう変わるのかを実体験していきたく思います。それでは、どうぞ!

【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した

ブラウザで音を鳴らせるJSライブラリ「tone.js」の続きになります。 前回は一音鍵盤を作りましたが、一音だと少々飽きてくるので1オクターブに拡張しました! 鍵盤を増やしながらコードが冗長になっていくことに気づき、このままではフルキーボードの頃には…

三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!

JSのフレームワークについて調べるとAngular、React、vue.jsの「三大フレームワーク」というのが出てきます。なぜにこの3つが三大?これを使うとどんなことが実現できるのか。SPA?MVC?仮想DOM?データバインディング?調べているうちに混乱してきたけど、…

【JS】newとプロトタイプとクラス

JS

JSに慣れてくるとよく目にすることになるnew演算子。ライブラリやフレームワークのコードでもよく見るので、ここらでちゃんと理解しておきたく思います。 また、かつて「JSはクラスかプロトタイプか」という論争がありましたが、そのどちらもこのnewが登場し…