Posts

まずはAPIで色々配列を取得しました。 そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。 という事象にひどく悩まされた。 例えば、こんなコードを実行してみた。 const array = [1, 2, 3, 4, 5] array.forEach(el => { window.setTimeout(() => { console.log(el) }, 1000) }); console.log('forEach完了') // forEach完了 // 1 // 2 // 3 // 4 // 5 上記のコードを実行すると、コメントアウトのようになる。 いや、違う違う、4が出た後に「forEach完了」が欲しい。 じゃあ、どうするか？ のように実行することでコメントアウトのように、つまり臨んだ結果になった。 const array_2 = [1, 2, 3, 4, 5] var Promises = [] array_2.forEach(el => { Promises.push( new Promise((resolve) => { window.setTimeout(() => { console.log(el) resolve() }, 1000) }) ) }); console.log('forEach完了！') Promise....

いや、本当に今更なんだけれど、JavaScriptの復習をしていて、「即時関数」の便利さ、スマートさに気が付いた。 即時関数を使ってみた 今まで初回実行 & 使い回す場合は const consoleHello = () => { console.log("hello") } consoleHello() のように、書いていた。 が、即時関数を使えば、 const consoleHello = (() => { console.log("hello") })() のように書くことができる。 つまりこれで初回実行 & 関数としての使い回しが可能なのである。 なんで、いままで使ってこなかったのか。 使い回せない と思ったけど、使い回せなかった。 まあ、即時って言ってるし… つまりこういう使い方じゃない。 使い回すことはできなかったけど、中に関数を書くことはできた。 const consoleHello = (() => { console.log("hello") return { consoleGoodbye: () => { console.log('goodbye') } } })() こんな感じで関数を書いて、 <button onclick="consoleHello.consoleGoodbye()">JavaScriptを実行する</button> で、実行できる。 うーん、なるほど。 つまりタイトルでスマートとか書いたけど、思っていたスマート差はなかった…気がする。

Layout header や footer 等 全てのページで使われるパーツ ng g component layouts/componentName Pages ページごとのコンテンツを表示するページ ng g component pages/componentName Parts layout や page で使われるカードなどの UI パーツ ng g component parts/componentName テストをするためには必要だが、無駄なファイルを増やさないために ng generate component componentName --skip-tests でspecファイルを作らずに済む。 コンポーネントを呼び出したい <app-componentName></app-componentName> で、コンポーネントを呼び込む。

Angular Material UIのカラーパレットがどうにもパッとしない。 ということで、カスタムカラーを使用することにした。 カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。 さて、さっそくカスタムカラーを設定していく。 手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。 なので、まずは自作のパレットを作成する。 src/assets/_palette.scssを作成し、そこにカラーを書いていく。 例えばこんな感じに。 $custom-primary: ( 50: #e8f5ff, 100: #c5e5ff, 200: #9fd4ff, 300: #78c2ff, 400: #5bb5ff, 500: #3ea8ff, 600: #38a0ff, 700: #3097ff, 800: #288dff, 900: #1b7dff, A100: #ffffff, A200: #ffffff, A400: #cce0ff, A700: #b3d1ff, contrast: ( 50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ), ); 次に、このパレットを読み込む必要があるので、src/styles....

独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。 AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。 が、そのモジュールなしで使いこなすことは難しい。 その筆頭がmaterial UIである。 material UIとは？ material UIはこちら。 要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。 大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。 とは言え、面倒な処理はやってくれるので、非常に重宝する。 いざ、インストール それでは実際にインストールしてみる。 $ ng add @angular/material 上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。 ℹ Using package manager: npm ✔ Found compatible package version: @angular/material@12.2.13. ✔ Package information loaded. The package @angular/material@12.2.13 will be installed and executed. Would you like to proceed? Yes ✔ Package successfully installed. ? Choose a prebuilt theme name, or "custom" for a custom theme: Custom ? Set up global Angular Material typography styles?...