コーディング初心者が入力ミスを減らすためにできる設定

コーディング初心者の人で多いのが、コードとは関係のない部分でつまづいてしまっている状況です。

• 単語のスペルミス
• 閉じ括弧忘れ
• 全角スペースを使ってしまっていた

こうしたコードと関係ない部分で、つまづいて挫折するのは非常にもったいないです。
今回はそうならないための対処方法や設定についてまとめます。

モダンなテキストエディタを使う

なんでもいいのですが、拡張機能を追加してやりたい事に合わせてカスタマイズできるテキストエディタを使うのをオススメします。

• Visual Studio Code
• Atom
• Brackets
• Sublime Text

2019年4月現時点で自分はVisual Studio Codeを使っています。

Webrandum

テキストエディタをAtomからVisual Studio Codeに移行しました

https://webrandum.net/visual-studio-code

自分はずっとAtomを使っていたのですが、最近MicrosoftのVisual Studio Codeに移行しました。今回はAtomからVisual Studio Codeに移行した理由や移行の時の設定をもろもろ解説します。移行の理由Atomは自分がWebの勉強を始めた頃からずっと使っていましたし、かなりお気に入りのテキストエディタだったのですが、今回移行を考えた理由が「動作が重かったから」です。前々からVisual Studio Codeが軽いという話を聞いていたのですが、根本的に使われている技術が一緒（AtomもVisual Studio CodeもElectronというライブラリで作られてい...

補完機能は積極的に使う

コード全てを手打ちする必要はありません。
モダンなテキストエディタでは補完機能が備わっていて、途中までコードを書けば補完できます。使える時は積極的に使っていきましょう。

その方が、本来行うべき学習に集中できます。

かっこよさよりも正確さ

初心者のうちは、フォントサイズを大きくしておいた方が良いです。
スペルミスしにくくなりますし、「,」や「.」などの小さな記号の有無も目につきやすくなります。

また、多少不格好でも正確さを上げてくれる拡張機能は積極的に追加していきましょう。

例えば、Visual Studio Codeには「Bracket Pair Colorizer」という拡張機能があります。
これは対応する括弧を色付けして分かりやすくしてくれるものなのですが、正直ちょっと不格好です。

それでも、こうした拡張機能を入れておく事で、閉じ括弧忘れを防止できます。

Webrandum

Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする

https://webrandum.net/vscode-bracket-pair-colorizer

SassやJavaScriptを書いていると括弧が多くて、どの括弧とどの括弧が対応しているのかパッと見で分かりにくくなってしまいます。何とかならないかと探してみると「Bracket Pair Colorizer」というプラグインを見つけたので紹介します。Bracket Pair ColorizerのインストールVisual Studio Codeの拡張機能で「Bracket Pair Colorizer」と検索するかマーケットプレイスでインストールが可能です。ちなみに「Bracket Pair Colorizer」と「Bracket Pair Colorizer 2」があるのですが、何が違うのかイマイチ分かりませんでした。インストー...

スペースなどを可視化しておく

テキストエディタの設定で、スペースやタブ、改行などの「本来は透明で見えないもの」を可視化できます。うまくいかない時の判断材料にもなるので、可視化しておきましょう。

全角スペースは入力できないようにしておく

「気づかないうちに全角スペースを入れていて、コードが動かなくなった」となると、かなり面倒です。

Google日本語入力で設定をしておくと、普通にspaceを押した時に半角スペースしか入力できなくなります（全角スペースを入力したい時はshift + space）。

Webrandum

Google日本語入力の基本的な設定項目

https://webrandum.net/google-japanese-input-general

macOS標準の「ことえり」も最近は精度が上がってきましたが、それ以外の部分でGoogle日本語入力のほうが設定できる部分が多かったり、ショートカットキーで辞書登録画面を表示できるので、Google日本語入力を使用しています。今回はそんなGoogle日本語入力の基本的な環境設定部分をまとめておきます。環境設定メニューバーの入力ソースからGoogle 日本語入力の［環境設定］を選択すると、環境設定画面が開きます。とりあえず、環境設定画面の「General（一般）」だけ設定しておけば問題ありません。Basics項目内容備考Input mode入力モ...

まとめ

まずはコードを書いて表示させて、成功体験を積んでいくことが、楽しく勉強していく上で重要になってくると自分は考えています。

その上で余計なミスを防止する方法があるなら、積極的に取り入れていくべきですし、そうした「余計なミスを回避する方法」を取り入れていく柔軟さも1つのスキルなのかもしれません。