Nuxt.jsにstylelintを導入する

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

Nuxt(Vuex)でAtomic Designを採用するときのメモ

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

サーバサイドレンダリング(SSR)について [Nuxt.js]

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

計算量(O記法)について [30seconds of interviews]

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

仮想DOMはなぜライブラリ/FWに使われるのか [30seconds of interviews]

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

JavaScript 0.1 + 0.2 === 0.3 はなぜfalseと評価されるのか [30seconds of interviews]

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

JavaScriptの純粋関数とは何か?[30seconds of interviews]

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

JavaScriptでパイプ関数を作成する [30seconds of interviews]

以下の挙動をする 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))) 与えられた全ての関数をスプレッド演算子...を…

Javascriptオブジェクトをクローンする [30seconds of interviews]

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

CSS BEMとは何か? [30seconds of interviews]

CSS

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

HTML5 Web Storage(ローカルストレージ/セッションストレージ)とは何か [30seconds of interviews]

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

scriptタグのdefer/async属性の違い [30seconds of interviews]

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> いずれの属性も指定しない場合、スクリプトは同期的にダウンロード・実行…

Vue.js 基底inputコンポーネントを作る

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

Vue.js inheritAttrsの挙動を調べる

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でクラウド破産しかけた話

GCP

初学のために、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中だと表示にかなり時間がかか…

CircleCI 2.0からHerokuにRailsアプリを自動デプロイする

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

Web基礎知識をおさらいする

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

カイゼンジャーニーを読んだ

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

GitHub個人/組織アカウントのリポジトリを一括cloneする

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

CentOS 7 + PHP7 + mysql 5.7 環境をdocker化する

構成 |- 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…

js勉強会用資料

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

Hugoにgoogle analyticsを設定する

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

dockerコンテナで起動したPHPビルトインサーバにアクセスできない

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

Hugoでポートフォリオサイトを作る

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

brewfileでMacのソフトウェアインストールを自動化する

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

Slack基本使い方まとめ

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

エンジニア転職面接で最低限聞いておくべきチェックリスト

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

Docker チュートリアル

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

32bit CentOSへGo言語をインストールする

Go

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