初めまして、フロントエンドエンジニアの六崎です。

 

「六崎」って皆さん読めますか？

「ろくさき」じゃないです、「むつざき」と読みます。

学生時代、新学期一発目の点呼で約90%の確率で「ろくさきさん」と呼ばれました…

飲みの席で自己紹介すると、だいたい苗字ネタから始まります…

電話で名前を聞かれると「松崎様ですね」と復唱されます…

しげるじゃありません（笑）

そんな六崎ですが、私が制作する上で詰まった事や気づいた事、メモなどフロントエンドについて書いていこうと思うので、
よろしくお願いします。

 

初回なので、まずは私についてちょちょ～っとお話しします。

コーディングは趣味で中学生の頃からやっていました。

でもwebデザイナーになりたかったわけではなく、別の目的で大学に行ったのですが気付いたらwebデザイナーになっていました！

 

HTML5/CSS3のコーディングは大得意です。

デザインもある程度やってきました。

必要とあればJavaScriptやjQueryも書きますが…少し思考停止します（笑）

WordPressから入ってPHPに触れる機会が増えてます…がこちらも少し思考停止します…

※私のデスクは外側を向いているので、思考停止中は空を見て黄昏ていることがあります。

あと、美味しいものをご馳走になれたり（肉とか肉とか肉とか！）、週末に楽しみがあるとコードを書くスピードがアップします！

…先日の常陸牛のひつまぶしは最高でした！！（大野さん、ごちそうさまでーすっ！

 

そんな六崎ですが、しょっぱな何を書こうか考え…まずは私の開発環境についてご紹介しようかと思います。

極力ラクをして開発をしたい、でたどり着いた現在の環境です。

 

まず、ローカル環境でコーディングをする際はPHPやDBなどを使う機会があるため、VagrantとVirtualBoxを使用して仮想環境を作っています。

仮想環境の作り方については、おいおい紹介できるといいな…

 

コードのバージョン管理にはGitHubを利用しています。

操作は黒い画面（ターミナル）から行ってます。

黒い画面、怖いですよね。

私も半年前までは恐怖の画面でしかありませんでした…

でも毎日見てると…「あれ、こいつ友達かも？」という感覚になってきます（笑）

※ちなみにSourcetreeとか使ってみたこともありますが、私は黒い画面の方がやりやすいです

 

コードは基本的にAtomで書いてます。

昔はAdobe Dreamweaver派だったのですが（予測変換してくれるし、tableタグもビジュアル的に作れるし…苦手なことを大分カバーしてくれてました）、Atomはパッケージで自分好みにカスタマイズできるじゃないですか！

ラクにコーディングできるなら、それに越したことは無いと思い現在はAtom派です。

 

ちなみにパッケージはこんなの入れてます。

・atom-autocomplete-php

PHPコードを自動補完してくれます。

 

・atom-html-preview

Atomのエディター内で制作しているものをリアルタイムプレビューできます。

 

・atom-minify

JSやCSSをminファイルにしてくれます。

…最近ターミナルを使ってgzip形式にしてたから、あまり使用してなかったですが一応ご紹介。

 

・autocomplete-paths

相対パスを入力補完してくれます。

 

・autoprefixer

ベンダープレフィックスを自動付与してくれます。

 

・emmet

HTML/CSS/XMLなどを簡略化した記述方法で入力できる超優れものです。

 

・less-than-slash

HTMLの閉じタグをスラッシュまで入力した時点で補完してくれます。

 

・linter-erg, linter-php

構文チェックしてくれます。

 

・sass-autocompile

SASSやSCSSをコンパイルしてくれます。

 

メインで使用しているAtomのパッケージはこんな感じです。

どんだけラクしたいねん！ってツッコミいれられても良いくらい大分パッケージに助けられてます。

でもまだ簡略化できるところはしていきたいので、色々追求しています！

また便利な機能を見つけたら紹介しますね！

 

では、また。