I encountered an error when I use clasp command as below. $ yarn clasp create clasp-project --rootDir ./src yarn run v1.7.0 Error retrieving access token: TypeError: Cannot read property 'expiry_date' of undefined error Command failed with…

特定のリポジトリで、特定のラベルが貼られたらそれを検知してSlackに投稿するBOTをGASで書いた。 github.com こんな感じにissueに特定のラベルが貼られたら通知を送る やりたかったこと リポジトリを跨ったアプリケーション構成の場合、Aリポジトリの変更が…

web componentsとは何か Webコンポーネントは、カスタム/再利用可能でカプセル化されたHTMLタグを作成できるWebプラットフォームAPIのセットである。 以下、4つの主要な仕様を持つ。 Custom Elements Custom Elements Custom Elementsは、DOM要素を独自に構…

インストールするモジュール stylelint stylelint.io standard ルールセット github.com .vueファイル内の<style></style>をパースするために導入する github.com インストール $ yarn add -D stylelint stylelint-config-standard @mapbox/stylelint-processor-arbitrary-t…

数ヶ月Atomic Designを採用したNuxt(Vuexパターン)アプリケーション開発を行ってみて、思ったことのメモ。 Atomic Designとは bradfrost.com 概要だけ知りたい人に説明すると、基底となるコンポーネント(原子)を作り、その原子を組み合わせて分子コンポーネ…

サーバサイドレンダリング (SSR) とは何か? Vue SSR ガイド | Vue.js サーバサイドレンダリングガイド 通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバ上の HTML 文字列に描画し、ブラウザ…

O記法は、コンピュータサイエンスにおいてアルゴリズムの複雑さを表すために使用される。 優秀なアルゴリズムは高速に結果を返し、かつ複雑度は低いと言える。 アルゴリズムは常に同じ結果にはならず、与えられるデータによって異なる結果になる場合がある。…

仮想DOMとは 仮想DOM(virtual DOM)は、DOMをJavaScriptオブジェクトの形式で表現したもの。 これらのオブジェクトには、ノード名/属性/子ノードなど、実際に表示されるDOMノードを記述するプロパティがある。 <div class="counter"> <h1>0</h1> <button>-</button> <button>+</button> </div> 上記マークアップの仮想DOMは、次のよう…

0.1 + 0.2 === 0.3 // false 一見trueになるように見えるが結果はfalseになる。 これはJavaScriptがIEEE 754*1を採用し、64ビット浮動小数点数を使用するためである。 要するに、コンピュータは2進数ベースで動いているため10進数の少数を計算する場合、正し…

純粋関数とは何か？ 純粋関数(pure function)とは、これら２つの条件を満たす関数を指す。 同じ入力が与えられると、その関数は同じ出力を返す。 関数は、その関数のスコープにおいて副作用を起こさない。 純粋関数は、上記の2つの条件を満たす限り、関数内…

以下の挙動をする pipe関数を作成する const square = v => v * v const double = v => v * 2 const addOne = v => v + 1 const res = pipe(square, double, addOne) res(3) // 19; addOne(double(square(3))) 与えられた全ての関数をスプレッド演算子...を…

How do you clone an object in JavaScript? スプレッド構文...を使うと、オブジェクト自身の列挙可能なプロパティを新しいオブジェクトにコピーできる。オブジェクトの浅いクローン(shallow clone)が作成される。 const obj = { a: 1, b: 2 } const shallow…

What is CSS BEM? BEMとは、スコープ問題を解決するために名前空間を定義することでよりCSSをメンテナンスしやすくするCSSクラスの命名規則。 BEMはblock, element, modifier の略。blockはプロジェクトを通して再利用可能なスタンドアロンなコンポーネント…

HTML5 Web Storageとは何か HTML5では、ウェブサイトはブラウザのローカルにデータを保存できる。データはname-valueペアで格納され、ウェブページは自身で格納したデータにのみアクセスができる。 localStorageとsessionStorage ライフタイムの違い localSt…

30secondsofinterviews.org 30 seconds of interviewsを一通り読んで面白かったので紹介していきたい What are defer and async attributes on a <script> tag? <script src="myscript.js"></script> <script src="myscript.js" defer></script> <script src="myscript.js" async></script> いずれの属性も指定しない場合、スクリプトは同期的にダウンロード・実行…

inputの基底コンポーネントを作る。 親コンポーネントから初期値を受け取りたい 親コンポーネントに入力を動的に伝えたい v-modelは使わずに、@inputでそのまま親に変更されたvalueをemitする。 # input基底コンポーネント Vue.component('baseInput', { pro…

https://vuejs.org/v2/api/#inheritAttrs v2.4から inheritAttrsが使えるようになった。 By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property (also new in 2.4) and…

初学のために、GCPでインスタンスを立ち上げたり消したりしていたところ、思わぬ請求が来てしまった。 事実としては、App Engine Flex を3バージョン作成し、それぞれ2インスタンス、そのインスタンスには2つのvCPUと2GB RAMを割り当てたものを一ヶ月以上放…

Rails, React/Redux構成で習作として何かWebアプリケーションを作ろうと思い、GW終わりから3日ぐらいでWebアプリケーションを作った。 こちら: https://tic40-emperor.herokuapp.com *HerokuのFreeプランなので、サーバがsleep中だと表示にかなり時間がかか…

Herokuのアカウント作成 Heroku 適当なRailsアプリケーションをGitHubに作成 GitHubに適当なリポジトリを作成してclone $ git clone git@github.com:{account}/{repository}.git railsアプリケーションを作成する $ cd {repository} $ rails new . $ vi app/…

基礎中の基礎。いつでも体系的に口頭で説明できるように自戒を込めて。 HTTPってなに？ Hypertext Transfer Protocol.RFC2616で規定された、TCP/IPをベースとしたネットワークプロトコル。 TCP/IPってなに？ ネットワークプロトコル。以下のように4層の階層…

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで作者: 市谷聡啓,新井剛出版社/メーカー: 翔泳社発売日: 2018/02/15メディア: Kindle版この商品を含むブログを見る 読みました。以下は自分用のまとめ。 状況の見える化 タスクマ…

準備 curl、jqが必要なので未インストールならインストールをする macOSでbrew経由の場合 $ brew install jq curl 実行方法 リポジトリのクローンを保存するディレクトリへ移動し、以下のコマンドを叩く。 個人アカウントの場合 $ curl https://api.github.c…

構成 |- docker-compose.yml |- Dockerfile docker-compose.yml version: '3' services: web: build: . ports: - "8080:8080" volumes: - .:/repo depends_on: - db tty: true privileged: true db: image: mysql:5.7 command: mysqld --character-set-serve…

ちょっとした勉強会用に書いたやつ 太古のコード See the Pen jzNaoa by tic40 (@ccpzjoh) on CodePen. 特徴 DOMの状態管理がない DOMを手作業で直接更新 DOMの状態を毎回把握しないといけない データバインディング See the Pen dmbJPy by tic40 (@ccpzjoh)…

config.toml に以下を追加 googleAnalytics = "{your tracking code}" Hugoはgoogle analytics用のテンプレートをすでに用意している。 テンプレートファイルに以下の一行を追加だけで良い。 {{ template "_internal/google_analytics_async.html" . }} これ…

適当にdocker コンテナを走らせる。-p で8080ポートを指定。 $ docker run -it --name {container-name} -d -p 8080:8080 {image-name} docker コンテナ内でphpファイルを作成し、php ビルトインサーバを以下のように動かした。 $ echo " index.php $ php -S…

経歴書、毎回pdf出力して送ったりするの本当にだるいので、もうgithubにあげとこう— tic40 (@tic40) 2018年2月24日 github pagesを使って自身の経歴を公開するポートフォリオサイトを作ろうと思い立った。 今回、Hugoという静的サイトジェネレータを使って構…

3年ぶりにmacを買い替えた。 macbook air 11inch(2014) -> macbook pro 13inch(2017) 13インチなのにサイズがほとんど11インチairと同じだ。ディスプレイもきれいになって、最高という感じ。 せっかくなので、今まであまり使ったことがなかったHomebrewを使…

概要 Slackをちゃんと業務で使うために、基本機能まとめる。 get.slack.help 基本 メンバー種別/権限 大きく4つの種別が存在する。 オーナー 管理者 メンバー ゲスト 詳細はこちら Slack メンバーの種別と権限 – Slack チームとワークスペース チームとは、S…