こんにちは！言動がナルシストっぽいとの事で社内で悪目立ちしている方の山﨑です！ 今回は、Google Chrome 73 で導入された、 logpoint という機能についてご紹介したいと思います。 Chrome 73 が公開されたのが 2019/03/12 との事なので、まだ 3ヶ月ちょい。 リリースノートに毎回目を通す熱心な方でないと見逃してしまいそうですが、こっそり便利そうな機能が追加されてました。 これは何ですか ざっくり、ブレークポイントと同じように Dev Tools からソースコードにマークをつけると、その行に対して 式 を書く事ができ、 その行を通るとその式の結果が Conso...
IntelliJ IDEA で Nuxt.js のデバッグを行う場合、以下の 1 行を nuxt.config.js に追加する必要があります。 build: { extend(config, ctx) { // この 1 行を追加 config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map' } }, 詳しくはこちら。 https://medium.com/@fernalvarez/nuxt-js-debugging-for-webstorm-9b4ef5415a5
Currying Currying（カリー化）のコンセプト自体はとてもシンプルで、複数の引数を一度に一つずつとる関数です。 例えば、2つの実引数の和を返す関数を考えた場合、まず一つの実引数を受け取る関数を返します。返り値となる関数は次の実引数を受け取る関数を返します。 const add = x => y => x + y add関数は一つの引数をとって、closureスコープに固定された部分適用された関数を返すという形になります。カリー化は常に一つの実引数を取る関数(unary function)を返しますが、部分適用の実引数の数は任意です。 const add = x => ...
こんにちは！ 朝家を出るときは寒いなと思っているのに、会社に着く頃にはじわりと額に汗が滲む山﨑です。 ご近所でも、「あの子はよく額に汗が滲んでいる」と評判です。 さて、前回はOpsチームで行った、AWSの環境構築についてでしたが、 今回はDevチームにて、Angular Materialを利用したWebページの作成について研修を行いました。 入社初日に先輩社員から 「研修の中でJavaでMacのコマンド作るんすよ大変スよー」 と言われていたので、日曜から月曜の通勤電車の中まで、みっちりJavaの基礎から勉強していた私。 蓋を開けると 「いやでもそれツマンナイから実際にフロントの開発...
Angular Materialではを使用することでMaterial Iconsを簡単に利用することができます。 Angular Material - Icon Material Icons 利用する際はindex.htmlでスタイルシートを読み込むことを忘れないよう注意してください。 しかしMaterial Iconsは種類が少なく、欲しいアイコンがない場合があります。 そんな時はFont Awesomeが便利です。 Font Awesome かなりの種類のアイコンが揃っており、基本的に無料で利用することができます。 有償のPro版では各アイコンの見た目の違うバージョンが利用できます。 A...
PhantomJS の開発が終了したらしい。 https://github.com/ariya/phantomjs/issues/15344 ということで、CI サーバ上で動作しているヘッドレスブラウザを Chrome にかえるべく以下のサイトにたどり着きました。 https://intoli.com/blog/installing-google-chrome-on-centos/ 以下のコマンドで一発インストール OK。 curl https://intoli.com/install-google-chrome.sh | bash 試した環境は以下の通り。 $ cat /etc/system...
NativeScriptで開発を進めていて、ブレイクポイントを張ってデバッグを行う手法があることを発見したので、紹介します。 ※公式によると、Androidのみしかサポートされていません。 まず、以下のコマンドでエミュレータを立ち上げます。 tns debug android そして、立ち上がる時に、コンソールに以下のようなURLが流れてきます。 # NativeScript Debugger started # To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/in...
TypeScriptで開発をしていて、thisキーワードで引っかかってしまったので、共有したいと思います。 具体的には、JavaScriptとTypeScriptでthisの扱いが異なるために問題が発生しました。 TypeScriptで、関数の定義方法が２つあり、ラムダ式の var lambda = () => { // 処理 } と、function式の var func = function() { // 処理 } があります。 その中でも、２つ目のfunctionを用いたものについては、thisを定義し直す必要があって、ラムダ式を使う前に var _this = thi...
11月の頭にAngularのバージョンアップが行われ、最新のAngular5が発表されました。 それに伴い現行のプロジェクトで、あるエラーに出くわしたので、その解決法を紹介します。 まず、エラーの内容は以下の通りです。 https://github.com/KillerCodeMonkey/ngx-quill/issues/76 しかし、この議論からは解決策が得られなかったので他の方法を探しました。 すると、pachage.jsonを一括で更新するncuコマンドを実行することで解決することができました。 具体的には、 npm install -g npm-check-updates でncuを...
NativeScriptで開発していく上で、RxJSの知識が必要になってきたので、勉強しました。 今日は、RxJSとはどういったもので、どういう時に使えるのかサンプルを示しながら軽く説明したいと思います。 まずはRxJSに入る前に、Reactiveというのがどういうものなのかわかっていないといけないので、そこについて押さえておきます。 このスライドがわかりやすかったのですが、「Reactive」とつくものは全て プログラミングモデル ランタイム アーキテクチャ の３つの要素からなります。 そして、それぞれ Reactive Programming Reactive Streams Reacti...
