Archives for 4月 2021

VSCodeの基本～プロジェクトフォルダの設定方法について解説します！

2021-04-29 By プログラミング入門ナビ編集部

この記事では、VSCodeを使用する上で必須となるプロジェクトフォルダ機能の設定方法について解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「新HTML入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

VSCodeとは

VSCodeはVisual Stduio Codeの略で、Microsoft社が開発しているエディタを指します。

VSCodeは様々な言語やOSに対応しており、拡張機能も豊富で効率的に開発を進めることができるため、人気が集まっています。

VSCodeのプロジェクトフォルダ設定

プロジェクトフォルダとは、プログラムを作成する際の作業フォルダを指します。

プロジェクトフォルダを設定することでコーディングを効率的に進めることができます。

GUIでの設定

ここでは、デスクトップに配置した「web」という名前のフォルダをプロジェクトフォルダに設定する想定で、手順について説明します。

まずVSCodeを起動します。

VSCodeを起動すると、デフォルトではプロジェクトフォルダは設定されていない状態です。

左のカラムの一番上が「Explorer」のアイコンです。

「Explorer」アイコンをクリックすると、右側に「You have not yet opened a folder」という表示が出るので、その下の「Open Folder」ボタンをクリックします。

なお、VSCodeの左上の「File」をクリックして、「Open…」を選択しても同じ操作が可能です。(Windows版では「File」から「Open Folder…」を選択)

Finderまたはファイルエクスプローラーが表示されるので、プロジェクトフォルダを選択します。

プロジェクトフォルダを設定すると、Exploerのカラムにプロジェクトフォルダの中身が表示されます。

今回は、「web」フォルダの中に「html-basic」という名前のフォルダが存在するので、その中身が一覧表示されています。

プロジェクトフォルダを設定すると、フォルダ内のファイル構成が一目で分かるようになるので便利です。

ファイル名をクリックすると、ファイルが右側のタブで表示されます。

コマンドラインでの設定

プロジェクトフォルダはコマンドラインからも設定できます。

VSCodeをダウンロードするとコマンドラインでcodeコマンドが有効になります。code フォルダ名とすることで、該当フォルダをプロジェクトフォルダとしたウィンドウが立ち上がります。

WindowsではPowerShellまたはコマンドプロンプト、Macではターミナルから起動可能です。

$ cd ~/Desktop
$ ls
web
$ code web

VSCodeで画像をプレビュー表示

ここでは、インターネットからダウンロードした画像をプロジェクトフォルダに追加し、VSCodeでプレビュー表示する方法ついて説明します。

①画像のダウンロード

Webサイトなどで表示されている画像をダウンロードして利用したい場合について解説します。

画像を右クリックして、「名前をつけて画像を保存」をクリックします。

②画像のドラッグ & ドロップ

ダウンロードした画像をプロジェクトフォルダにドラッグ & ドロップします。

VSCodeで既にプロジェクトフォルダを設定している場合は、直接画像ファイルをドラッグ & ドロップすることも可能です。

③VSCodeでプロジェクトフォルダを開く

VSCodeのプロジェクトフォルダにダウンロードした画像が追加されています。

画像ファイル名をクリックすると、右側のタブに画像が表示されます。

VSCodeで画像をプレビュー表示することができました！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

macOSのアップデート後にxcrun: error: invalid active developer pathと表示される場合の対応方法

2021-04-24 By プログラミング入門ナビ編集部

macOSのアップデート後に、下記のようなメッセージが表示される場合：

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

対処方法

下記コマンドを実行して、Xcodeをインストールすれば解決する。

$ xcode-select –install

確認ダイアログが表示されるので、OKして進める。

検証環境

macOS Big Sur バージョン11.2.3

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Cloud9が容量不足? EBSボリュームを拡張する方法を解説します!

2021-04-02 By プログラミング入門ナビ編集部

この記事では、AWS Cloud9のEC2インスタンスが容量不足になってしまった時の対処法について説明します。

この記事は、オンライン講座「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」のサポート記事です。

動画で学習する

チャンネル登録してね！

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

AWS Cloud9とは

・クラウドコンピューティングサービスのAWSで利用できるサービスの一つです。
・クラウド上のサーバー資源を利用して、ブラウザ上の統合開発環境(IDE)でWebアプリケーションを開発することができます。
・Cloud9を起動すると、AWSのEC2インスタンスに接続され、開発を進めることができます。

Cloud9が容量不足になった場合

EC2インスタンスを利用していて容量が不足した場合、ターミナルで以下のようなメッセージが表示されます。


No space left on device

このような場合、まずは不要なファイルが容量を圧迫していないか確認してみましょう。

dfコマンドを用いると、ボリューム全体の使用状況を確かめることができます。

Cloud9上のターミナルで以下のコマンドを実行します。


$ df -h
Filesystem Size Used Avail Use% Mounted on
devtmpfs 483M 60K 483M 1% /dev
tmpfs 493M 0 493M 0% /dev/shm
/dev/xvda1 9.8G 8.6G 1.1G 89% /

この例では、ルートディレクトリにマウントされている/dev/xvda1 というファイルシステムが89%使用済みである、ということが分かります。

全体の使用状況を把握したら、duコマンドを用いて個別のディレクトリの容量を確かめます。以下が使用例です。


$ du -h ~/node_modules
20K node_modules/tmp/lib
44K node_modules/tmp
12K node_modules/node-cleanup/tests/lib
20K node_modules/node-cleanup/tests/bin
64K node_modules/node-cleanup/tests
100K node_modules/node-cleanup
20K node_modules/os-tmpdir
168K node_modules

もし容量が極端に大きいファイルなどが見つかったら、影響が無いことを確認した上で削除して、ボリューム容量を解放してみてください。

EBSボリュームの拡張

ファイルを削除してもボリューム容量の圧迫が解消しない場合や、削除しても良いファイルが見つからない場合は、EBSボリュームサイズの拡張を行いましょう。

※AWS無料枠について
AWSではアカウント作成から1年間の期間は、EC2インスタンスを月に合計750時間・30GBまで無料で利用できます（2020年2月時点）。無料枠の範囲内で利用したい場合は、使用しているEC2インスタンスのEBSボリュームが合計で30GBを超えないように注意してください。

Cloud9インスタンスの停止

まずはCloud9インスタンスが動いているインスタンスを停止しましょう。

Cloud9のコンソールを開き、ボリュームを拡張したいインスタンスの名前の部分をクリックします。

Cloud9環境の詳細が表示されるので、「Go To Instance」をクリックします。

すると、このCloud9環境が動作しているEC2インスタンスが表示されます。

右上の「インスタンスの状態」から「インスタンスを停止」をクリックします。状況によって停止まで少し時間がかかる場合があります。

「インスタンスを終了」を選択すると環境が削除されてしまうので、間違えないように注意してください。

ボリュームの変更

インスタンスの状態が「停止済み」となっていることを確認してください。

インスタンスの詳細で「ストレージ」をクリックすると、このEC2インスタンスのボリューム情報が確認できます。

「ボリュームID」をクリックして、ボリュームの詳細画面に飛びます。

「ボリュームの変更」をクリックします。

「サイズ」に変更したいボリューム容量を入力し、「変更」を押します。

ここでは、ストレージを10GBから16GBに変更します。

ボリューム変更を実行するか聞かれるので、「はい」を選択します。

ボリューム変更中は「状態」がmoidyfingとなって黄色いランプが現れます。少し時間がかかります、ランプが緑色になったら変更完了です。

予期せぬ不具合を避けるため、ボリューム変更中はCloud9インスタンスを起動しないようにしてください。

Cloud9インスタンスの再起動

コンソールからCloud9インスタンスを起動します。

ターミナルでlsblkコマンドを実行し、ボリュームの割り当て状況を確認しましょう。


$ lsblk
NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda 202:0 0 16G 0 disk
└─xvda1 202:1 0 10G 0 part /

この場合は、ボリュームの変更によりxvdaのディスク容量が16GBになったことが分かります。

しかしxvda1というパーティションには10GBしか割り当てられていません。そこでgrowpartコマンドを用いて、パーティションサイズを拡張します。


$ sudo growpart /dev/xvda 1
CHANGED: disk=/dev/xvda partition=1: start=4096 old: size=20967390,end=20971486 new: size=33550302,end=33554398

次にパーティションを拡張したら、ファイルシステムのサイズも合わせて変更する必要があります。以下のコマンドを実行してください。


$ sudo resize2fs /dev/xvda1
resize2fs 1.43.5 (04-Aug-2017)
Filesystem at /dev/xvda1 is mounted on /; on-line resizing required
old_desc_blocks = 1, new_desc_blocks = 1
The filesystem on /dev/xvda1 is now 4193787 (4k) blocks long.

再度以下のコマンドを実行してみましょう。


$ lsblk
NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda 202:0 0 16G 0 disk 
└─xvda1 202:1 0 16G 0 part /

ファイルシステムを16GBに拡張することができました！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Linuxの標準エディタvi(vim)の超基本的な使い方！動画で初心者にもわかりやすく解説！

2021-04-02 By プログラミング入門ナビ編集部

はじめに

Linux、うまく使いこなせていますか？

画面がシンプルでとっつきにくい印象があるかもしれません。

WindowsやMacOSではテキストを編集する時メモ帳などのアプリケーションを使うことができますが、Linuxでも専用のテキストエディタを使うことが多いです。

この記事では、その中でも特に人気の高いviについて初心者の方にもわかりやすいように超基本的な使い方を解説します。

これからviの使い方を覚えたいけれどなんだかとっつきにくい…と躊躇されている方や、過去チャレンジしてなかなか慣れずに挫折した方にもおすすめの記事です！

動画解説

本記事の内容を動画でも解説しています。

vi(vim)とは

vi（ヴィアイ）とは、Linux環境で人気のあるテキストエディタで、軽量なため最小構成のLinux環境にもインストールされているのが特長です。

名前の由来はVIsual editor または Visual Interface の略とされています。

いくつかのモードを切り替えて操作していく必要があるのが特徴です。これが若干とっつきにくいためこの先で丁寧に解説します。

上位互換にviの高機能版であるvim（ヴィム）や、nvi（エヌヴィアイ）といったものもありますので、キーワードとして、頭の片隅に入れておくと良いでしょう。

環境によってはviを起動したつもりでも、実際に動作しているのはvimやnviだったりすることもあります。

起動方法

早速、起動方法からやってみましょう。

Linuxのターミナル画面に下記のように「vi」と打ち込みエンターキーを押します。

すると下図のような画面となりviが起動します。

終了方法

次に、viの終了方法を見てみましょう。

「まだ使い方も見ていないのに終了方法？」と思われるかもしれません。

しかし、viやその他Linuxコマンドのとっつきにくさの理由の一つに「終了方法がわからなくてどうにもならなくなってしまった」というのがあります。

終了方法がわからないとパニックになることも多いので、ここはまず終了方法を覚えておきましょう。

終了するには、「:q」（コロンにアルファベット小文字のキュー）と打ってからエンターキーです。qは「quit」の略と覚えましょう。画面左下に打った内容が確認できます。

ここで、万が一画面左下に打った文字が出ないなどうまくいかない場合は「:q」を打つ前にEscボタンを押してからやってみてください。（理由は後述します）

見にくいですが先ほどのvi起動画面にも説明書きが書いてありますね。

無事終了できるとLinuxのターミナルに戻ってきます。

ノーマルモードと入力モード

ここで、viの特徴であるノーマルモード・入力モードについて説明します。

LinuxはCUI（Character-based User Interface：文字のユーザーインターフェイス）が主体ですので、GUI（Graphical User Interface：グラフィックのユーザーインターフェイス）であるWindowsやMacOSのように、上の方に出てくるメニュー画面から「ファイルを保存」や「ファイルを閉じる」をクリックして操作することができません。

そのため、全てキーボード入力で操作する必要があります。もしGUIであったならばメニュー画面を開いて実施するような操作を行うためのモードを「ノーマルモード」、通常の文字入力を行うためのモードを「入力モード」といい、下記のように切り替えることができます。

入力モードからノーマルモード：　Esc（エスケープ）キー
ノーマルモードから入力モード：　i（小文字のアイ）キー　※insertの略と覚えましょう

なぜこのような煩わしい切り替えが必要かというと、先ほどのように「:q」でエンターを押すと終了するという決まりがありますが、もし切り替えがないとファイルにただ「:q」という文字列が入力されてしまいます。

ユーザーの意図としてvimを閉じたいのか、ファイルに「:q」という文字列を入力したいのか、どちらなのかをvim側に知らせてあげる必要があるのです。

そのため、都度これらをキーで切り替えなければなりません。

現在どちらのモードなのかは画面左下を見ればわかります。下図のように、「— INSERT —」と出ていれば入力モード、そうでなければコマンドモードです。

ファイル名を指定して新規ファイル作成

viはテキストエディタなので、WindowsやMacOSでメモ帳を使う時と同じように、ファイル名を指定して新規ファイルを作成することができます。

少し違うのは、viの場合はvi起動時にファイル名を指定してあげる必要があることです。

下記のようにターミナルで「vi sample」と打ってviを起動してみましょう。

無事ファイルが作成されると下記のような画面でviが起動します。

ファイルを開いた直後はノーマルモードなので、iキーを打つと入力モードになります。「test」などの文字列を試しに打って、入力されることを確認しましょう。

下記は入力モードで文字列を打ち込んだときの画面例です。

入力モードの時は↑↓←→キーでカーソルをその方向に動かすことができます。

ファイルの保存

入力が終わったら、ファイルを保存してみましょう。

ファイルを保存するにはエスケープキーでノーマルモードにしてから「:w」とキーを打ちエンターを押します。

「write」の略を覚えてください。

なお、ここでエスケープキーでなくいきなり「:」コロンキーを打ってもノーマルモードになります。

無事ファイルが保存されたら下記のように表示されます。

「:q」でviを終了してターミナルに戻ったら、lsコマンドでファイル一覧を見てみましょう。

先ほどviで新規作成・保存したsampleがあればOKです。

また、lessやcatといったコマンドでsampleの中身を見てみましょう。ご自身が入力した通りの文字列が出ていますか？

もちろん、viでもう一度開いて見るのでもOKです。

ファイルを保存せずに終了する

テキスト入力をしてはみたものの、無かったことにしてファイルを保存せず終了したいこともありますよね。

そんな時、保存せずに「:q」で終了しようとすると下記のように注意文が出てしまいます。

まだ保存されていない変更内容があるよ、という注意文ですね。このため、終了できないようになっています。

あえて保存せずに終了したい場合はそのことを明言する必要があるわけです。

やり方としては、「:q!」と最後にエクスクラメーションマークを足してエンターキーを押しましょう。今度はうまく終了できるはずです。

ヘルプを見る

他にはどんな使い方があるのか見てみたい場合は、ヘルプを参照しましょう。

ノーマルモードで「:help」と打ってエンターキーでヘルプを開くことができます。

英語表記なのですが、上下左右キーの代わりにi・h・j・kキーでもカーソルを動かすことができるといった便利なTipsがあるので、興味がある方は読んでみてください。

まとめ

Linuxのテキストエディターviの使い方について、超基本の部分を解説しました。

最低限、ここに書いてあることができればまずは困らずに使えるでしょう。

使っていく中で、もっとこうしたい、ああしたいという気持ちが出てきたらチャンスです！

最初から詰め込みすぎると覚える気にならないのですが、こうして最初に最低限の使い方を覚えてから必要に応じてブラッシュアップしていくのはおすすめの学習方法です。

さらに便利な使い方がありますので、これについては別の記事でご紹介します。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する