return ['pig', 'fox', 'bird', 'fish', 'mouse'][3]; // fish
上記の文を見たとき一瞬意味がわからなかったんですが、単純に定義した配列に添字の3を指定して値を呼び出しているだけですね。 かっこいい書き方だと思ったので、今後自分のコードにも積極的に使っていく所存です。
// m以上n以下のランダムな数値を返す function getRandom(m, n) { return m + Math.floor((n - m + 1) * Math.random()); } // いずれかの動物を表す文字列をランダムに返す function getRandomAnimal() { return ['pig', 'fox', 'bird', 'fish', 'mouse'][getRandom(0, 4)]; } console.log(getRandomAnimal()); // ex. pig
知りませんでした。まあ、初めの文字が数値以外だった場合は、NaNになってしまうんですが。
const weight = '60kg'; const height = '172.5cm'; console.log(parseInt(weight, 10)); // 60 console.log(parseFloat(height, 10)); // 172.5
ブラウザの開発者ツールによるAndroid/iOSモバイルアプリのデバッグ方法について書きます。
4.Remote devicesタブから、デバッグしたいアプリを選択
モバイル端末をPCに接続したのに、デバッグ対象のアプリが認識されない！みたいな事が起きた場合は、下記のケースを疑ってみてください。
モバイル端末側の設定ができていない。例えばiPhoneだと、[設定] -> [Safari] -> [詳細] -> [Webインスペクタ]まだ進んで設定をONにする必要がある
モバイルアプリでも、パッケージング（アーカイブ）されたものについては、デバッグができない。iOSのケースでいうと、In Houseビルドされたものについては、端末を繋いでもアプリが認識されない
Safariの開発メニューがそもそも表示されない
JavaScriptのコードを見ていて、この書き方どういう意味かわからないけど、なんてキーワードで検索していいかわからない...みたいなことがあったので、検索しづらいと思ったイディオムをまとめた。
a || bでaが真であれば、bの評価がスキップされるという特性があるため、下記の例のような簡略化した値の代入を実施できる。
let fuga; let hoge = fuga || 45; // ショートサーキット。fugaがfalseであれば、45が代入される console.log(hoge); // fugaがundefinedなので45が表示される fuga = 5; hoge = fuga || 45; // ショートサーキット。fugaがfalseであれば、45が代入される console.log(hoge); // fugaに値が代入されていたため、今度は5が表示される
スプレッド構文を使うと、1つの配列を複数に展開することができるため、ループを使用せずに、ある配列を他の配列に含めるといった処理が可能になる。
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; arr2.push(...arr1); // スプレッド構文。配列arr1の全要素を配列arr2の末尾に追加する console.log(arr2); // [ 4, 5, 6, 1, 2, 3 ]と出力される
Angularプロジェクトをブラウザでデバッグする際に、TypescriptファイルにBreakPointを設定する方法がわからなかったので調べた。
ng serveコマンドで開発ビルド&実行する
webpack://配下にTypescriptファイルが配置されているのでBreakPointを設定することができる。
画像の例では、src/app/app.component.ts ファイルにBreakPointを設定している。
Angularプロジェクトの雛形作成に、generator-angular2-typescriptを使っていたのですが、最近Angular CLIに移行しました。
Angular CLIでは、ng new [プロジェクト名]コマンドでプロジェクトの雛形をカレントディレクトリに作成してくれるんですが、なぜかカレントディレクトリではなくホームディレクトリにしかプロジェクトを作成してくれない！という事態が発生しました。
ググって出てきた下記stackoverflowの記事のおかげで解決しました。
Do you have a package.json file in your home/user directory? I experienced this issue, then I removed package.json and that stopped it.
ホームディレクトリに置いてあるpackage.jsonが原因じゃない？package.jsonを削除すれば、カレントディレクトリにプロジェクトが作成されると思うよ〜みたいなことを言っていますね。
案の定ホームディレクトリにいつ作ったか覚えてないpackage.jsonが置いてあったので、削除したら無事カレントディレクトリにプロジェクトが作成されるようになりました。
数あるCSSセレクタのうち、意味がごっちゃになりやすいものをメモした。
次の例では、タイプセレクタのliとclassセレクタの.itemを続けて記述している(間に半角スペースを含めてはいけない)。<li>タグのclass="item"の要素のみにスタイルが適用される。
li.item { font-weight: bold; }
<p class="item">更新のお知らせ</p> <ul> <li>おまけ</li> <!--下記要素のみにスタイルが適用される--> <li class="item">ハッピーセット</li> </ul>
複数のセレクタを組み合わせて、ある要素の子要素または孫要素を選択するのが子孫コンピネータ。
次の例では、<ul>に含まれる<li>にだけマッチしてスタイルが適用される。
ul li { font-weight: bold; }
<ul> <!--style適用範囲 start--> <li>ハッピーセット</li> <li>ラッキーセット</li> <!--style適用 end--> </ul> <ol> <li>妖怪ミニカー</li> <li>妖怪グラス</li> </ol>
複数のセレクタを組み合わせて、ある要素の子要素のみを選択するのが子孫コンピネータ。
次の例では、<ul>に含まれる<li>にだけマッチしてスタイルが適用される。
ul > li { font-weight: bold; }
<ul> <!--style適用範囲 start--> <li>ハッピーセット</li> <li>ラッキーセット</li> <!--style適用 end--> </ul> <ol> <li>妖怪ミニカー</li> <li>妖怪グラス</li> </ol>
セレクタをグループ化すると、1つのスタイル宣言に対して複数のセレクタを割り当てることができる。次の例では、<p>と<li>の両方にマッチしてスタイルが適用される。
p, li { font-weight: bold; }
<!--style適用範囲 start--> <p>お知らせ</p> <!--style適用 end--> <ul> <!--style適用範囲 start--> <li>妖怪ミニカー</li> <li>妖怪グラス</li> <!--style適用 end--> </ul>
下記の本を参考にした。
