Tagbangers Blog

Frontend

【Google Chrome】リクエストの Replay XHR と Copy as cURL 機能を使ってデバッグする

こんにちは!夜空に浮かぶお月さまがいつもより大きく見えてキレイダナーと思い目を凝らしてよく見たらどうやら乱視が進行しているっぽい事に気がついてあわあわしています。山﨑です。 みなさん Google Chrome、使ってますか? 今日はフロントからのリクエストに関する2つのデバッグてくにっくを書いてみようと思います。 Replay XHR フロントからXHRを使って POST でバックエンドにデータを登録しにいく処理、よくありますよね。 大概フォームの入力を伴うので、名前住所生年月日会社名備考欄 etc.... といちいち入力しなきゃならなかったりするので、 何度もテストを行う内に入力するのがだ...

JavaScriptの新機能たち

JavaScriptの仕様標準であるECMAScriptはTC39という団体により使用が策定されています。 ProposalはGithubのレポジトリにまとめられています。 Proposalにはstageというものがあり、stage 0から順にstage 4へ上がっていくというプロセスを経て最終的にECMAScriptに採用されます。 Stage 0 - Strawman(たたき台) アイデア段階 Stage 1 - Proposal(提案) 必要性や解決方法についての説明がある 実際にPolyfillやデモが実装される Stage 2 - Draft(下書き) 仕様書の初期案 具体的な構文に...

Doczでドキュメント

主にフロントエンド側で使用するドキュメンテーションツールを探していて、 markdown で書く普通のドキュメントも MDX で React コンポーネントのショーケースとしても ということで docz を使ってみることにしました。 インストール v2 から Gatsby がベースになるようなので、 docz@next を使うことにします。 % npm i -D docz@next ドキュメントの mdx ファイルを置いておく docs と 設定ファイルとなる doczrc.js をプロジェクトルートに作ります。 % mkdir docs % touch doczrc.js ドキュメントに含...

Chromeでソースを汚さずにログを出力する

こんにちは!言動がナルシストっぽいとの事で社内で悪目立ちしている方の山﨑です! 今回は、Google Chrome 73 で導入された、 logpoint という機能についてご紹介したいと思います。 Chrome 73 が公開されたのが 2019/03/12 との事なので、まだ 3ヶ月ちょい。 リリースノートに毎回目を通す熱心な方でないと見逃してしまいそうですが、こっそり便利そうな機能が追加されてました。 これは何ですか ざっくり、ブレークポイントと同じように Dev Tools からソースコードにマークをつけると、その行に対して 式 を書く事ができ、 その行を通るとその式の結果が Conso...

IntelliJ IDEA で Nuxt.js のデバッグ

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とFunctional Composition in JavaScript

Currying Currying(カリー化)のコンセプト自体はとてもシンプルで、複数の引数を一度に一つずつとる関数です。 例えば、2つの実引数の和を返す関数を考えた場合、まず一つの実引数を受け取る関数を返します。返り値となる関数は次の実引数を受け取る関数を返します。 const add = x => y => x + y add関数は一つの引数をとって、closureスコープに固定された部分適用された関数を返すという形になります。カリー化は常に一つの実引数を取る関数(unary function)を返しますが、部分適用の実引数の数は任意です。 const add =     x =>  ...

Devチーム研修 Angular (Material)について

こんにちは! 朝家を出るときは寒いなと思っているのに、会社に着く頃にはじわりと額に汗が滲む山﨑です。 ご近所でも、「あの子はよく額に汗が滲んでいる」と評判です。   さて、前回はOpsチームで行った、AWSの環境構築についてでしたが、 今回はDevチームにて、Angular Materialを利用したWebページの作成について研修を行いました。   入社初日に先輩社員から 「研修の中でJavaでMacのコマンド作るんすよ大変スよー」 と言われていたので、日曜から月曜の通勤電車の中まで、みっちりJavaの基礎から勉強していた私。   蓋を開けると 「いやでもそれツマンナイから実際にフロントの開発...

Angular Material 6でFont Awesomeを利用してアイコンを表示する

Angular Materialではを使用することでMaterial Iconsを簡単に利用することができます。 Angular Material - Icon Material Icons 利用する際はindex.htmlでスタイルシートを読み込むことを忘れないよう注意してください。 しかしMaterial Iconsは種類が少なく、欲しいアイコンがない場合があります。 そんな時はFont Awesomeが便利です。 Font Awesome かなりの種類のアイコンが揃っており、基本的に無料で利用することができます。 有償のPro版では各アイコンの見た目の違うバージョンが利用できます。 A...

Amazon Linux に Google Chrome をインストールする

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】ブレイクポイントを用いたデバッグ

NativeScriptで開発を進めていて、ブレイクポイントを張ってデバッグを行う手法があることを発見したので、紹介します。 ※公式によると、Androidのみしかサポートされていません。 まず、以下のコマンドでエミュレータを立ち上げます。 tns debug android そして、立ち上がる時に、コンソールに以下のようなURLが流れてきます。 # NativeScript Debugger started # To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/in...