this値アクセス時に詰んだのでメモ

thisキーワードを使って、入れ子型の関数から外側の関数の呼び出しコンテキストを取得しようとした際に詰んだのでメモ。

そもそも、入れ子型の関数は呼び出し元のthis値を継承しない。そのため、外側の関数のthis値にアクセスしたい場合は内側の関数スコープ内にthis値を保存しておく変数を作らないと詰む。って感じのことがサイ本(第6版のp. 181)に書いてあった。

いまいち理解できなかったので、実際に、オブジェクト:o,メソッド:mにおける、(直接アクセス/変数保存)の結果を調べてみた。

前々から、var self = this って何のために使ってるんやろ? ってなってたのでスッキリした。サイ本まじありがてぇ。とりわけ、第8章のクロージャ実装のコラム(第6版 p. 195)に書いてあった、オブジェクトがガベージコレクトされるタイミングの話はすごくためになった(小並感)。

webpackにBootstrapを導入した際のメモ

Bootstrapテーマで、適用したいcssの要素をoverrideする際にやったこと。

まずは、webpackのプロジェクトフォルダを作成。

$ vue init webpack vue-cli-sample

んで、諸々の依存関係をインストー

$ cd vue-cli-sample
$ npm install
$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev
$ npm install bootstrap-sass --save-dev
$ npm install vue-strap --save-dev

App.vueに適用させたいcssをapp.scssファイルとして作成

$ mkdir src/assets/styles && touch src/assets/styles/app.scss

Bootstrapのoverride用のscssファイル(bootstrap-variable-overrides.scss)を出力

$ awk '{print "//" $0}' node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss > src/assets/styles/bootstrap-variable-overrides.scss

App.vueに適用させたいcssをimport

<style lang="scss">
  @import './assets/styles/app.scss';
</style>

Bootstrapで必要となる要素をapp.scssにimport

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import 'bootstrap-variable-overrides';

最終的なscss構成のtree

src
└── styles
    ├── app.scss
    ├── bootstrap-variable-overrides.scss

配布されてるcssテーマを適用したい場合は、override用のscssファイル(bootstrap-variable-overrides.scss)に要素の値をぶち込んであげればOK

Bootstrap JS はNG

Vue.jsのTipsにjQueryの古臭い慣習からの脱却を目指すべく、Bootstrap JS はやめようとかいうことが書いてあった。

Using Bootstrap with Vue.js

このあたりのJS Components機能を補完するためには、ElementUIElementUI-Githubとか良さげ。

YouCompleteMe導入時のメモ

Vim上でJavaScript補完機能を追加した際のメモ。

基本的な流れは、以下のサイトを参考にした。

Using Vim as a JavaScript IDE

YouCompleteMe追加

NeoBundleでプラグイン管理してるので、.vimrcに以下のコードを追加。

NeoBundle 'Valloric/YouCompleteMe'

プラグインをインストール後、

$ cd ~/.vim/bundle/YouCompleteMe
$ git submodule update --init --recursive

んで、CMakeをインストー

$ brew install cmake
$ cd /usr/local/share/man 
$ sudo chown -R $USER man7 # YouCompleteMeのinstall.py実行時にcmake-buildsystemにsymlink貼ってないって怒られるので、それ対策用にディレクトリの所有者を変更
$ brew link cmake

そして、YouCompleteMeインストールを始める

$ ./install.py --clang-completer --tern-completer # --tern-completerオプション実行時にはNode.jsとnpm実行できるように環境作っておく

あとは、Ternの設定。ホームディレクトリに、.tern-projectファイル作成してJSON形式で保存。

{
  "libs": [
    "browser"
  ],
  "plugins": {
    "doc_comment": {},
    "complete_strings": {},
    "node": {},
    "es_modules": {}
  }
}

そうすれば、JSの補完機能はだいたいおけ。

詰まったところ

Tern設定周りのJSONの記述がミスっていたせいで、Tern not runningな状態にしばらく陥っていた。そんな時は、:YcmDebugInfoでデバック情報見て、Ternのログファイル見つめながら改善していけばおけ。

今後、ESlintをファイル保存時に自動的に走らせたり、syntax ハイライトを導入することで、コードエラーを最小限にしていく。

ブレークスルーへの羨望

これ、SPAで静的なwebサイトをごっそり差し替えながら感じたこと。

そのサイト、1年くらい前にHTMLの入門書片手にdivってなんぞや? とか考えながらひたすら写経して作り上げたサイトなのだけれど、脳死状態でclearfixとか便利なクラス多用してた。そんなものだから、各コンポーネント間の疎結合が破綻してて、「どうすんだよこれ。。。」状態に陥っている。この状態、早いとこ抜け出さないとやばい。。。

いい加減、静的なサイトばっか作ってないでモダンなフロントエンド開発に関して本腰入れないと時代に取り残されてお亡くなりになってしまう。。。つか棺桶に片足突っ込んでる😓

閑話休題

最近、フロントエンド開発の主流からとてつもないほど自分のスキルセットがかけ離れている現状に絶望。加えて、JavaScript書きながら基本的な構文を消化するのに多大な労力が消費されて、本質的なロジックの部分で頭を使えていないのもクッソ腹たつ。これらばっかりは圧倒的に経験値不足で、どうしようもない。そんなことは頭ではわかっていても、自分のあまりの無力さに自己の存在価値そのものに対する疑念すら生じてくる日々を過ごしてならない。

プログラミングに本腰入れてちょうど三ヶ月くらいたつけど、こと技術に関してはコンプレックスを感じている。というのも、何らかの課題に対してググった結果には、その分野で最先端をいく人たちがいて、そういう人たちは必ずと言っていいほど自分より若くしてすげぇ実績を残してる。

では、そういう状況に対して、自分の強みを活かせるフィールドは何か? その勘所を探し当てる嗅覚を養っていくためにも、手当たり次第何でもこなさねばならない。そんなある種の逆境の中にいるにも関わらず、なんかよくわからないけどプログラミングを通したものづくりを楽しんでる自分。プログラミング中の9割はイラついてラップトップぶち壊したくなるけど、なんだかんだで出来上がったものを喜んでもらえると、嬉しいし楽しい。

早く、ブレークスルーを感じ取りたい。そんでもって、自分の価値を証明したい。