azukiazusa のテックブログ2
Vue.js Composition APIでTODOアプリ作成
Vue3 Composition APIを使って、ハンズオン形式でTODOアプリを作成していきます。
すべて
azukiazusa のテックブログ2
イマドキのJavaScriptの書き方
JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。 このように、JavaScriptという言語は日々
blog.jxck.io
CSS Layout API で Masonry Layout
Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。上
azukiazusa のテックブログ2
すぐに使える！JavaScriptの華麗な配列操作
JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。 組み込みの配列メソッドはたくさんあ
blog.jxck.io
Web 技術の調査方法
「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなもので
azukiazusa のテックブログ2
Go言語 テスト
Go言語の提供するテストはシンプルです。テストのために覚えることは多くはありません。 Go言語の単体テスト用の機能は`testing`という標準パッケージとして提供されています。ベンチマークやカバレッジ、標準出力のテストなどをカバーしていま
azukiazusa のテックブログ2
Go 言語 標準パッケージでHTTPサーバー
Go言語は、標準パッケージでHTTPサーバーと基本的なHTTPクライアントを提供します。 使用するのは、net/httpというパッケージです。
azukiazusa のテックブログ2
Go言語 ポインター
Go言語には、ポインタがあります。 ポインタとは、メモリのアドレスのことです。アドレスは`0xc0000b4008`のような16進数で表されます。
azukiazusa のテックブログ2
Go言語 構造体・インターフェース
構造体(Struct)とは、フィールドの集まりです。JavaScriptのオブジェクトよく似ており、データをまとめて1つの集まりの値として表現します。 例えば、座標を表すには緯度と経度がフィールドとして必要になるでしょう。緯度と経度をそれ
azukiazusa のテックブログ2
Go言語 コレクション（配列・スライス・マップ）
配列は決まった長さを持つ要素を並べた順序のあるコレクションです。 Go言語の配列は固定長になっており、宣言時に長さと要素型を指定します。 長さは後から変更することはできません。 Go言語の配列は柔軟性に欠けるため、実際にはあまり使用されませ
azukiazusa のテックブログ2
Go言語 型・関数・メソッド
Go言語は静的型付け言語であり、全ての変数は何らかの型に属し、異なる型同士の演算といった問題点の多くはコンパイル時に検出されます。 関数の宣言にはfuncキーワードを使用します。関数の引数と戻り値には型を指定します。戻り値を複数持たせられる
azukiazusa のテックブログ2
Go言語基礎文法
Go言語(Golang）は、2009年にGoogleによって開発されたオープンソースの静的型付け、コンパイルされるプログラミング言語です。Go言語はコンパイルされるプログラミング言語です。 Go言語はシンプルで、信頼性が高く、効果的なソフト
azukiazusa のテックブログ2
CSSの設計
今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコー
blog.jxck.io
Puppeteer で静的サイトの Font Subsetting
Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。
blog.jxck.io
WebCodecs と WebTransport でビデオチャット
ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。これにより、映像や音声の変換などといったユースケースへの応用も可能だ。本来なら WebCodecs 単体
blog.jxck.io
img の srcset 指定時に選択される画像
<img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動が
blog.jxck.io
Webbundle によるサブリソース取得の最適化
WebBundle を用いてサブリソースのみを Bundle する、Subresource Bundle の策定と実装が進んでいる。これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、RTT を減らしつつも個別に取
blog.jxck.io
ローカル開発環境の https 化
Web の https 化が進み、それに伴って https を前提とする API も増えてきた。そうした API を用いた開発をローカルで行う場合、localhost という特別なホストを用いることもできるが、それだけでは間に合わないケース
azukiazusa のテックブログ2
Express + TypeScript + MondoDBでやる
Expressは、Node.jsのWebアプリケーションでもっとも利用されているフレームワークです。Expressは、HTTPによるWeb上の相互作用とNOde.jsプラットフォームの中間に位置するので、ある種のミドルウェアと言えます。 E
blog.jxck.io
QuicTransport によるアプリケーションレイヤでの QUIC 活用
WebTransport の Quic 実装である QuicTransport の開発が Chrome で行われている。Chrome で Origin Trials が開始されたので仕様と実装を解説する。