開発環境まとめ - 佐伯のメモ書き

長文ではお久しぶりです、佐伯です。

ツイッターで「開発環境のまとめって要るか？」と聞いたところ同業者に「知りたいです」というお言葉を頂きましたので僭越ながら。
ついでに拡張機能とかもちょっとだけ載せようと思ってます。気力が続けば。

内容はこんな感じだドン

PCスペック
ブラウザ
エディタ
- 本体
- 拡張機能
他言語ツール
素材サイト
参考サイト
その他
まとめ

好きなとこだけ摘まんで食べて下さい。

PCスペック

そもそも論的に取り敢えずこれ。大事です。まあ正味言うてHTMLとCSS書くだけならそんなに要らないと思うんだよね、私。
ただそこからあれこれ凝り出すとなるとちょっと多めに積んであった方が安心かなと思う。
あとオーバースペックしてると動作がエグイ軽い。余裕を持って優雅たれって時臣パッパも言ってた気がする。

	会社	自宅
OS	Win10Pro	Win10Home
RAM	8GB	16GB
SSD	-	250GB
HDD	1.5TB	1TB
GPU	-	RTX2060 SUPER
Drive	C D G	C D G
モニター	2	1

こんな感じ。繰り返すけどHTMLとCSSやるだけならめちゃくちゃオーバースペックです。特に自宅奴。ながら作業したい人はスペックは高ければ高いほど幸せになれると思っておくといいかも。特にRAM。

ブラウザ

Google Chrome
皆さんお馴染みのChrome。検証ツールが有能ちゃんちゃんこ。
ひとつ難点を上げるとすれば重てえんだよお前ということ。
マジでアホほど重い。本当に重い。タスクマネージャーで見て爆笑出来るレベル。
ダウンロード

Vivaldi
最近使い始めたっていうか佐伯の師匠がいいって言ってた。実際良い。かなり軽い。
Chrome重いんだけど💢💢💢のブチギレ勢にオススメ。
多分ドマイナーなのでどういうブラウザかっていうのをwikipediaより引用。

Vivaldi（ヴィヴァルディ）は、Operaからスピンアウトして設立されたVivaldi Technologiesによって開発されているウェブブラウザである。2016年に初公開された。後発のブラウザとして、Google ChromeとOperaの特徴を併せ持ち、軽量設計となっている。

つまりちょっと軽いChromeオルタ的な奴。は？最高かよ。でもまだちょっと慣れないのでChromeと併用。
ダウンロード

エディタ

本番はここからみたいなとこある。多分。
先に言っておくけどエディタは宗教だから自分に合ったやつ使うのが一番だと思ってる。マジで。マジで。

本体

Visual Studio Code
色々使ったけど最終的にここに落ち着いた。
同類のエディタとして大体列挙されるやつにATOMとBracketsがあるけど、3つの中で一番軽いらしい。
ATOM使って「は！？バリ重やん！！」となり次のvscode(Visual Studio Code の略称)で落ち着いたのでBracketsは使ったことないから重いらしいっていうのはお師匠曰くの話です。
有料エディタになるとsublimeとか秀丸とか入ってくるけど、多分有料エディタ使おうって人そんな居ないと思うので割愛。
ちなみにsublimeはちょっと触ったことあるけど佐伯はそんなに好きじゃなかった。

ちなみに特徴
・多言語対応
　HTMLだけじゃなくて他の言語も対応出来る。

・拡張機能
　後述。好きにカスタマイズしよう。

・emmet
　入力を短縮したりする機能。
　コーディングをサボって時短しよう。

・シンタックスハイライト
　コードを着色して見やすくしてくれる。
　ありがちな閉じ忘れを防ごう。

ダウンロード

一応簡単に紹介
Brackets
Adobe産のテキストエディタ。NINA 管理人の十和子ちゃんはこっちって言ってた気がする。
使ったことないのでなんとも言えない。
Adobeに慣れてる人とかAdobeがお好きな人はこっち。
最初から日本語なのもやさしい。
Bracketsダウンロード

ATOM
周りで使ってる人見たことないけど機能は多分大差ない。
気狂い拡張機能がズバ抜けて多い。
個人的なお前なんなんだ？？拡張機能は「文字を打ち込む度に火花が散る」「エンターを押すと爆発する」あたり。使っててコーディング楽しくなるけどバチクソ重い。
ATOMダウンロード

拡張機能

vscodeを自分好みのオトコに育てる（？）ために好きに拡張しよう。私は今日から光源氏（？？？）
正直これが一番性格出るし一番楽しい作業だと思ってるんだけど、拡張機能入れたら入れるだけ重くなるので要注意。その辺は自分のPCと相談してほしい。
私ATOMのことめちゃ重いと思ってるけどひょっとしたら楽しくなってはちゃめちゃな拡張機能入れてたから重くなったような気がしなくもない。

一番最初に入れた方がいい

VScodeの日本語化
初期設定が英語なので公式が出してくれている日本語化プラグインを入れましょう。
じゃないと何書いてるか全然わからんと思う。私もわからん。

見た目系

Cobalt2 Theme Official
文字の色とか背景色とかを変える。
カラーテーマは他にも色々あるので自分が一番書きやすいと思うやつを選べばいい。

Material Icon Theme
ファイルの形式ごとについているアイコンを変えるやつ。
アイコンテーマは他にも以下略。

Guides
インデントに合わせて縦線を入れてくれる。ただそれだけ。
閉じタグどれやねん！！！！！！！！！！！となった時辿ればいいので安心する。
ただしインデントしっかり入れてないと途端に惑わす悪魔と化す。

HTML・CSS

HTML Snippets
タグの予測変換してくれるやつ。
キーボード叩く量がめっちゃ減る。

Auto Close Tag
タグの締め忘れを防ぐやつ。使うこともあるし使わないこともある。
この機能があることに慣れて来ると愛いやつ。

Auto Rename Tag
spanをdivに変えるとかした時にクローズタグも一緒に変えてくれる。
ちょいちょい誤差るけど、基本的には便利。

Color Highlight
カラーコードとカラーネームの背景に色を付けてくれる。
何色を指定しているのかが分かりやすくなるので捗る。

IntelliSense for CSS class names in HTML
CSSファイルと同期してHTMLにクラス名を打ち込む時にサジェストしてくれる。
このクラス名は大文字だったか小文字だったか…みたいな時に便利

Live Server
リアルタイムプレビューって言った方が分かりやすいかも。
実際に画面を見ながら調整出来るので「ここもうちょっと隙間欲しいかも」とかがその場で修正出来る。
ブラウザの検証ツールとかと一緒に使えば何も怖くない。

SCSS

Live Sass Compiler
SCSSのリアルタイムコンパイル。
SCSSとライブビューを使うときは必須。
起動し忘れてるとちょっとテンパる。

Bracket Pair Colorizer
対応するカッコ同士で色を付けてくれる。
HTML、CSSあたりだとほぼ使わないけどjsとSCSSはこれがないと死ぬ。

JavaScript

ESLint
リアルタイム解析で入力サポートしてくれる。
これがないとjs界で生きていけない。
導入にちょっと癖があったような気がしなくもないが遠い彼方のことなので思い出せないですね。

JavaScript (ES6) code snippets
jsのスニペットツール。入力する時に塊で出してくれたりする。便利。
入力例みたいなものも一緒に出て来るのでド忘れに優しい。

PHP

PHP Intelephense
PHPの入力補完してくれるや～つ
これがないとしんどいオブしんどいで全く書けない
どの言語書くにしてもまず補完ツール入れる病に掛かってるので……
これ使って書いてXAMPPで表示するような感じで書いてます

他言語ツール

XAMPP
PHPの開発環境オールインワン決定版。
これが無いとPHPの開発が出来ない。
バラバラで導入したりも出来るけどインストーラーでした方が圧倒的に楽だった。そりゃそうだよな、じゃなきゃオールインワン版なんて出ねえよな。
Apache と MySQL とphpMyAdminを一緒に入れてくれるのでとっても有難い。
導入にちょっと色々面倒な手順が必要なのでその辺は調べて欲しい。
ダウンロード

素材サイト

GoogleFonts
Leafscape
WEBフォント。フォントがないとなにも出来ない。マジで何も出来ない……助けて……

FontAwsome
アイコンタイプのWEBフォント。
CSS適用出来るからめっちゃ便利！！

Pexels
Unsplash
pixabay
写真素材のサイト。回ってるだけで楽しくなって気付いたら一日終わってる。
見て回ってるくせに写真使ってるテンプレ殆どないんだけどどうした？？？？？

icooon mono
アイコン素材いっぱいで大好き～～～！！！！！！！！
色変えてダウンロード出来る。

参考サイト

Easing Gradients
グラデーション書く時に使ってるやつ。
めっちゃ自然なグラデーション書いてくれるので有難い。

CSS Flexbox の基礎知識と使い方をやさしく解説
flexboxのプロパティをまとめてくれてる記事。
プロパティの組み合わせを試せるツールもあるのでめちゃくちゃ助かる。

MDN Web docs
HTML、CSS、jsのリファレンスガイド。
プロパティとかで困っときに見るやつ。
アニメーションのショートハンドでしょっちゅう見てる。

TinyPNG
画像の画質落とさずに容量の削減をしてくれる良いヤツ。
レンタルスペースの容量上限内に収めるのに必須。
もし上限内でも表示スピード早くさせるために縮小したりする。

原色大辞典
色選ぶ時に大体ここで選んでカラーコード弄ったりしてる。
色見本と一緒に並んでるのですげえ助かる。

その他

Discord
友達と喋りながら作業する。

Netflix
prime video
見たりしながらやったりする。
でもたいてい見入ちゃってはかどらない。ながらが出来ない女。

まとめ

以上開発環境的なアレでした。
まあでも最終的には「自分のやりやすい環境でやる」っていうのが一番ですよね～！
今回紹介したのはあくまでも「私がやりやすい環境」なので千差万別色々あるかと思います
「どこから手つけたらいいか分からん！」とか「なにを揃えたらいいか分からん」とかの参考になったら幸いです

因みに最終的には取り敢えずググってみる、みたいなことになりがちです！！！！