30DAYSトライアル

【30DAYSトライアル】に挑戦 DAY8 エディタをインストールしよう

こんにちは、ポンコツエンジニアのはやです。今回は、30DAYSトライアルのDAY8を進めていきました。今回はProgateではありません。新たな一歩を踏み出して、自分のPC環境でWEB制作を行なっていくための準備の日です。

DAY6では、初級道場、中級道場を進めていきます。

 

->詳細な課題内容

やることはたった二つです。エディタをインストールすることと、そのエディタの機能を拡張する(便利にする)ことです。

VSCodeをインストールしよう

プログラミングを自分のPCで行うためには、プログラムを書くためのエディタが必要になります。エディタには、様々な種類があり、色々と特徴があるのですが、その中でも無料で非常に便利なエディタが「Atom」と「VSCode」です!!今回は、僕自身がVSCodeを使ってプログラムを書いているので、VSCodeをめっちゃおすすめします。(もともとphpstormを使っていたのですが、無料でphpstormに劣らないので乗り換えてしまいました。)

インストールは非常に簡単です、こちらの公式サイトからダウンロードして、ダウンロードしたアプリケーションを開くだけです!

 

VSCodeにプラグインを追加しよう

プラグインとは、機能を追加で拡張できるすぐれものです。VSCodeの場合は、自作できるみたいなので、個人で作成されたものがたくさんあり、様々な追加機能があります。自分の悩みにあったプラグインがあったりするので、不便なことがあった時には調べてみるのがいいでしょう。

今回の課題でショーヘーさんがおすすめしていたのが、次のものです。

Auto rename tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

タグの名前を変更すると、相方のタグの名前も変更してくれるすぐれもの。

例えば、<h1>僕はポンコツ!!</h1>というのがあるときに下線部のh1をpに変更すると、終了タグのh1もpに変更してくれます。意外と便利。

CSSTree validator

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

CSSの記述が正しくかけているかをチェックしてくれるCSSです。こういうミスチェック系のプラグインは本当に便利なので、いれるべきです。(各言語のものをそれぞれいれていくと、VSCodeが重くなってしまうかも)

■IntelliSense for CSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

HTMLファイルでCSSの名前を入力する際に、自動で補完してくれるプラグイン。CSSの情報をもとに補完しているようなので、少し不便かも?HTMLにCSSをあててから、CSSを記述することの方が多い気がします。

 

■Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

これは日本語化のプラグインです。プログラミングの場合、そこまで日本語にこだわる必要はないかもしれません。英語と触れ合っていた方が、エラーやリファレンスを読む時楽です!!けれど、最初はわからないことだらけなので、少しでも英語がきついと思ったら抵抗感をなくすために入れておくべきです。

■HTMLhint

https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

HTMLバージョンの間違いチェックプラグインです。思わぬところで、馬鹿らしい間違いを誰もがしてしまいがちなので、そういう間違いは機械にみつけてもらいましょう!

■zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

このプラグインは、全角スペースを見えるようにしてくれるものです。全角スペースはプログラミングにおいて非常にやっかいな存在で、全角スペースがいることでエラーがでちゃうこともあるようです。(まだこのエラーに出会ったことがないのでラッキー)

 

まとめ

以上で今回の、30DAYSチャレンジDAY8は終了です。Progateから飛び出して、自分で環境を構築して、WEBページを作成するその一歩を踏み出しました。30DAYSにチャレンジしている人のグループに参加しているのですが、8日間でここまでこれるなんて、正直驚きです。僕がここまでくるのに2週間くらいはかかった気がします。(Progateの次になにをすればいいのかわかりませんでした。)非常に羨ましいですが、そんな気持ちはおいて、学び続けたいと思います。