以下の挙動をする 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…

Webアプリケーションエンジニア目線で確認しておくべきことのチェックリスト。忘れがちなので書き出してみた。 チェックリスト 会社のメインプロダクトは？ 開発手法は？ プロジェクトマネジメントツールは？ ソースコード管理は？ CI/CDにはどう行っている…

現状 Dockerは聞いたことあるけど実際に使ったことはない。 ゴール チュートリアルを通してDockerでweb serverを立ち上げてみる Dockerとは Docker - Wikipedia コンテナ型の仮想化環境を提供するオープンソースソフトウェアである[3]。VMware製品などの完全…

Go を動かす必要があったのでインストールした際の覚書 環境 CentOS release 6.5 (Final) 32bit ダウンロード 以下から32bit linuxの最新版を探す Downloads - The Go Programming Language 1.9.2 が最新版だったので、これをダウンロードする。 $ wget http…

やりたいこと Vue.jsで、ボタンクリックイベントのトラッキングをしたい。 方法 vue-analytics を使うと簡単にいけた github.com 実装方法は公式に書いてある通りなんだけど、一応下記の要領で実装した。 Setting app.js import Vue from 'vue' import VueAn…

2017年に読了した本*1 増補改訂版Java言語で学ぶデザインパターン入門作者: 結城浩出版社/メーカー: ソフトバンククリエイティブ発売日: 2004/06/19メディア: 大型本購入: 51人 クリック: 762回この商品を含むブログ (397件) を見る 古典。今更感はあるが、…

環境 CentOS release 6.5 事象 karmaでPhantomJSを起動しようとするとエラーでこけた。エラーは以下。 ERROR [launcher]: Cannot start PhantomJS xx/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs: error while loading shared libraries: li…

vue-cliでwebpackでproductionビルドを行う際に、以下のように UglifyJsPluginにcompress.drop_console オプションを追加するとconsole.log, console.errorなどのconsole.xのコードを削除できる build/webpack.prod.conf.js new webpack.optimize.UglifyJsPl…

moment.jsを扱っていて、クライアントサイドアプリケーションでマシン依存しない時間を扱いたい場合の方法。 サーバからタイムスタンプを予め取得し、マシン時間との差分を保持しておく。 以降はその差分を計算することで正確な現在時刻を求める。 // timest…

フロントエンド開発をしていて、API実装前にさらっと動きを確認したいときなど、モックAPIがあると便利。 json-serverを使っていたけど、意外と細かいところに手が届かなかった*1の自分用に前でモックAPIのテンプレートを作った。 REST API(express) CORSの…

現象 Vuexで構築したアプリケーションをIE11で動かすとエラーになった。 error: [vuex] vuex requires a promise polyfill in this browser promise がIEだと使えないようだ。 解決 babel-polyfill を入れる babeljs.io npm install --save-dev babel-polyfi…