閉じる運営:株式会社セルリアビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。基礎知識・使い方を解説。Code入門編として幅広く解説しています。Codeとは」「基礎知識」「インストール方法」「使い方」「便利機能」について幅広く解説していきます。Code(VSCode)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。VSCodeが人気のある理由として5点があがられます。1.オープンソースであり、誰でも無償で利用する事ができる。2.Windows版・macOS版・Linux版と各OSに対応している。3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。公式サイトダウンロードページにアクセスします。今回は、Mac版で進めます。Codeダウンロード開始ダウンロードが開始されます、ダウンロードが終わるまで少し待ち。ダウンロードデータは、ダウンロードフォルダにあります。ダウンロードされたzipファイル(圧縮ファイル)をダブルクリックで展開。ここでわかりやすいように、アプリケーションフォルダに、移動させましょう。起動方法アイコンをダブルクリックし「開く」を押し、下記表が出てきたら。Codeを起動します。Codeコードが使えるようになりました。codeの画面の見方VSCodeの画面は、下記のような画面構成になっています。1.アクティビティバーVSCodeで主に使用されている機能をアイコンで表示しています。1-1エクスプローラー:開いているファイルを一覧表示1-2検索:ファイル内を検索1-3git:gitとの連携1-4デバック:デバックを行う1-5拡張機能:拡張機能の検索1-6アカウント:設定の同期を指定1-7設定:設定を行う2.サイドバーアクティビティバーでエクスプローラーが選択されている場合は、フォルダやファイル一覧、もしくはアクティビティバーで選択された項目が表示される。3.エディタ開いているファイルの内容を表示します。4.パネルターミナルや、デバック情報が表示されます。文字コードなど、ファイルのステータスに関する情報を表示します。ミニマップミニマップとは、エディタの右側に表示されるコードアウトラインの事です。ソースコードの概要を表示し、ミニマップ部をクリックすると該当箇所にすばやく移動する事ができます。パンくずリストパンくずリストとは、エディター上部に表示されている、ナビゲーションバーです。フォルダ、ファイル、シンボルをクリックすれば該当箇所にすばやく移動する事ができます。Codeは、インストールした時は英語表記になっています。日本語表示するには5ステップ。一つ一つ見ていきましょう。Palette」を開きます。」を選択、クリックします。Codeの再起動が必要になります。右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。リスタートすると、以下のように日本語で表示されるようになります。Codeが日本語設定で使用できるようになりました。フォルダの開き方/作り方フォルダの開き方フォルダをVSCodeドラックアンドドロップするとフォルダを開く事ができます。ファイルの作り方ファイル作成ボタンを押し→ファイル名を付け→エンター→ファイルを作成する事ができます。分割マークを押すとエディタを分割する事ができます。「表示」→「エディタレイアウト」→エディタの分割場所を指定することもできます。検索VSCodeには便利な検索機能があります。下記ファイルから「テキスト5」という文字を検索したい。【F】」を入力し検索バーを出します。検索バーに「テキスト5」と入力すると、該当の「テキスト5」がハイライトされます。コードの量が多くなってくるとより便利に活用する事ができます。置換をするには、まずは検索バーを出します。【F】」を入力し検索バーを出します。置換したい文字やアルファベット、記号を入力。「>」ボタンを押す→置換バーを出す→「置換したいワードを入力」→今回は「p」と記載しpに置換→「全て置換」のマークを押して置換。下記のように変更されています。インテリセンスVSCodeには予測補完機能が付いています。途中まで入力すると変換候補を出してくれ、全て記述しなくても良くなります。マルチカーソルマルチカーソルとは、カーソルを複数選択し同時編集できる機能です。EmmetEmmetとはHTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれます。「!」と記述しTabを押すと、下記のようにHTMLの雛形を表示してくれます。クラス名をつけた表示、imgタグの表示なども簡単に行ってくれます。CSS記述CSSでもEmmetの記述をする事ができます。10px;」と表示する事ができます。20px;」と表示する事ができます。コマンドパレットVSCodeの機能にアクセスするためのもので、VSCodeの機能にアクセスするには「コマンドパレット」を介してアクセスをします。「コマンドパレット」の開き方は、「表示」→「コマンドパレット」をクリックか、ショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」で開く事ができます。VSCode内の機能を表示できます。コマンドパレットからエディタの背景色を変えるショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。コマンドパレットに「theme」を入力「基本設定:背景色テーマ」を選択。好きな背景色を選択しクリック、背景色を変更する事ができます。コマンドパレットからミニマップ表示切り替えショートカットキーwin:「Shift」+「Ctrl」+「P」、mac:「Shift」+「Cmd」+「P」でコマンドパレット開く。コマンドパレットに「minimap」を入力→「表示:ミニマップの切り替え」を押しミニマップの表示の切り替えをする事ができます。設定vscodeの設定は2通りあります。Size」)を探し、数値を変更する事で設定を変更する事ができます。※変更したい項目をインターネット検索すれば、項目にあったキーワードが出てきます。2.settings.jsonでの設定settings.jsonとはvscodeの設定内容を記載するファイルです。settings.jsonを開きます。画面を出しsettings.jsonを開くマークをクリックsettings.jsonファイルに定められた記述を記載することで、vscodeの設定を行う事ができます。やすさ」の面で便利です。VSCode内でターミナルを開くには、「ターミナル」→「新しいターミナル」をクリックショートカットキーが豊富VSCodeは、マウスを使ってほとんどの操作が行えます、しかし操作速度を上げ効率的な操作を行う為には、ショートカットーキーが欠かせません。VSCodeには便利なショートカットキーが豊富に用意されています。拡張機能とは、後付けで追加できる便利な機能のことです。自分の好みで、欲しい拡張機能を追加し、使いやすいようにオリジナルにカスタマイズする事ができます。VSCodeはこの拡張機能が豊富にあります。拡張機能の追加方法、オススメの拡張機能を紹介します。これで拡張機能を追加する事ができます。※拡張機能によってはインストール後に追加設定するものもあります。オススメ拡張機能zenkaku全角スペースを把握コードに全角が混じっていると、機能しないのがプログラミング。半角、全角は目視では判断しにくい。そこで全角を可視化してくれる拡張機能。入力中に、入力内容に応じたHTMLスニペット(マークアップのサポート)を表示してくれます。HTMLのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれる機能。Serverテキストエディタの変更内容をリアルタイムでブラウザに反映リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。vscode-iconsアイコンを見やすく表示デフォルトだと少し味気ないアイコンになってしましますが、vscode-iconsで見やすいアイコン表示する事ができます。Highlightカラーコードの色を可視化コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができ、効率的に作業することができます。space文末の空白を可視化するプログラミングは文末にスペースがあると、機能しないことがあります。スペースを可視化してくれる拡張機能。自動で改行の余白、タブのサイズや位置を整形してくれる拡張機能。選択範囲の差分を確認する事ができ、目視の工数を減らす事ができます。indent-rainbowインデントを色分インデントを色分けしてくれ目立たせてくれる拡張機能です。SupportHTMLにCSS側で作ったclass名を表示HTMLファイルCSSファイルが連動し、作成した、class名候補を出してくれるので書き間違いを防いでくれます。Code内でターミナルを開く方法10.ショートカットキー11.拡張機能について解説してきました。本記事を参考にしていただけたら幸いです。その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。Codeのインストール方法・使い方・初期設定を解説します。パレット・ショートカットキーの使い方を解説します。ターミナル開き方・使い方を解説します。最後までお読みいただきましてありがとうございます。以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。企画し実装まで支援する伴走型Webコンサルティング会社です。<AOHON>Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。