Web備忘録

プログラミングを中心に技術的な事柄を忘れないように書き残します。

Canvasの縦横比がおかしい

canvasの縦横比がおかしい canvas のサイズを変更して何か描画した際に、サイズの縦横比がおかしくなることがあります。サイズを変更する際に style で変更すると、内部的な描画領域が変更されないため、縦横比が狂います。 canvas のサイズを変更する際には、width属性・height属性で変更する必要があります。 実行結果(縦横比がおかしくなる) <canvas id="canvas1" style="widt ...

続きを読む ⇒

[Javascript] スプレッド演算子(Spread Operator)の使い方

スプレッド演算子とは Javascript(ES6) には スプレッド演算子 (Spread Operator)と呼ばれる演算子があります。これは " ... "(カンマ3つ)で表現され、分割代入(複数値の展開)の為に用いられるものです。検索しにくいですが。 例えば引数を3つ取る関数に配列をスプレッド演算子で展開して渡したりすることができます。具体的には以下のコードを見ます。 複数の引数を持つ関数に配列を展開して渡す 次のコードでは、引数 a, b, ...

続きを読む ⇒

[Webpack] 環境構築入門

Webapackとは Webpack とは、webアプリケーションにおけるリソース(javascript等)の依存関係を解消し、配布用のアセット(bundleファイル)を生成するビルドツールです。javascript以外にもcssやAltjsにも対応できるため非常に便利です。 使うとどうなる? 例えばjavascriptが複数のファイルA,Bから構成される場合、これらをくっつけて1つのファイルを生成できます。AからBをモジュールとして読み込んでいる場合には、その依存 ...

続きを読む ⇒

[Typescript] 開発環境構築入門

Typescriptとは Typescriptとは、マイクロソフト謹製のオープンソースのプログラミング言語です。AltJSと呼ばれる言語の一種で、TypescriptをコンパイルすることでJavascriptのコードに変換できます。Javascriptのスーパーセット(上位互換)であり、既存のJavascriptがそのままTypescriptとして扱えるのはもちろん、静的な型付け機能や、クラス・継承・インターフェースといったオブジェクト指向に由来する機能などが利用可能です。 ...

続きを読む ⇒

[JS] 配列の操作まとめ(要素の追加、削除他)

Javascriptの配列操作方法まとめ Javascriptでの配列に対する操作方法をまとめます。 配列の生成 配列を生成するには Arrayコンストラクタ もしくは 配列リテラル を使います。 コンストラクタによる生成 new Array(n) で要素数nの配列を生成できます。 new Array(item1, item2, ...) で配列の生成と同時に値を初期化します。引数なしの場合、空の配列を生成します。 例: // 要素数10の ...

続きを読む ⇒