• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / Archives for Linux

Linux

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

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

カップを持って微笑む女性

はじめに

カップを持って微笑む女性

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

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

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

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

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

動画解説

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

viとは

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

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

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

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

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

起動方法

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

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

viの起動画面

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

vi起動画面2

終了方法

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

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

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

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

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

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

vi終了画面

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

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

vi終了画面2

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

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

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

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

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

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

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

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

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

viの入力モード

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

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

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

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

viでファイル名指定し新規作成

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

viで新規ファイルを開いた画面

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

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

viで文字入力する例

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

ファイルの保存

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

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

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

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

viでファイル保存

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

viのファイル保存完了画面

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

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

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

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

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

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

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

viの保存忘れエラー

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

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

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

ヘルプを見る

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

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

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

まとめ

微笑む女性

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

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

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

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

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

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Linux, vi

Linuxのvmstatコマンドで表示される情報の意味

2020-04-07 By naka

Linuxのvmstatコマンドで表示される情報の意味についてまとめました。

procs : アクティブなプロセスに関する情報

  • r:実行待ちのプロセス数
  • b:何らかの理由によってスリープしているプロセス数

memory : メモリーの使用量に関する情報

  • swpd:仮想メモリーの使用量
  • free:空きメモリー容量量
  • buff:バッファとして利用されているメモリー容量量

swap : スワップに関する情報

  • si:ステップイン容量。スワップ領域に待避していたデータを物理メモリに書き戻した容量
  • so:スワップアウト容量。物理メモリーからスワップ領域に書き込みした容量

iO : デバイスとの転送量に関する情報

  • bi:ブロックデバイス(HDD等)から読み取ったロック数
  • bo:ブロックデバイスへの書き込みブロック数

system : マルチタスク関連に情報

  • in:毎秒の割り込み回数
  • cs:毎秒のコンテキスト・スイッチ回数

※ コンテキストスイッチ

cpu : CPUの使用量に関する情報

  • us:カーネルコード(OS)以外の実行でCPUが使用された時間の割合
  • sy:カーネルコード(OS)の実行でCPUが使用された時間の割合
  • id:アイドル時間(何もしない時間)の割合
  • wa:IO(ディスク・ネットワーク)による待ち時間の割合

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Linux, vmstar

初心者からWebエンジニアへ転職するために必要なスキルセットは?優先順位別に紹介!

2020-03-31 By プログラミング入門ナビ編集部

パソコンに向かう男性

はじめに

オフィスの机とパソコン

Webエンジニアへの転職、やることが多くて何から始めたらいいか悩んでしまいますよね。

ひとまずプログラミングの学習を始めたはいいものの「これだけでいいのだろうか」「あれもやっておくべき?」など、考え始めるときりがありません。

この記事では、Webエンジニアに最低限必要なスキルセットとして何を押さえるべきかについて、講師のおすすめを紹介します。

Webエンジニアリングの全体像

オフィスで話し合う男性と女性

まずはWebエンジニアの仕事ではどういったことをするのか、ざっくりと見てみましょう。

Webサイト制作時の役割分担として、フロントエンドとサーバーサイド(バックエンドとも呼ばれます)があります。

フロントエンドはWebサイトがユーザからどう見えるかを司るユーザーインターフェイス部分の実装です。

サーバーサイドはその名の通り、Webサイトが動くサーバー上で必要な機能の実装部分となっています。

また、どちらの場合も、基本的な開発ツールを使いこなせるようにしておくことも重要です。

Webエンジニアへの転職後はこのいずれかもしくは両方を担当することになります。

全体の動きを把握するためにも、まずは次項以降のスキルセットを一通り身に付けて簡単なWebサイトを開発してみるのがおすすめです。

フロントエンド

webデザイン

最初に、フロントエンド開発に必要なスキルセットを紹介します。ブラウザ上で簡単に挙動が確認できるので、まずはフロントエンドから入ると理解が進みやすいです。

HTML + CSS

文章や画像など、Webページの見た目を記述するための言語がHTML、そのレイアウトを制御するのがCSSです。

Webエンジニアリングにおいて一番基礎の部分であり、初心者の方でも学校の授業等で触れたことがあるかもしれません。

新HTML入門

WE05-CSS入門

JavaScript

Webサイトには、ユーザがただ読んだり見たりするための静的なコンテンツだけではなく、アンケートやファイルアップロードなどユーザが操作するコンテンツもありますね。

このようなコンテンツではユーザの操作に応じた動的な処理が必要で、これを記述するための言語がJavaScriptです。

実に世界の95%以上のWebサイトでJavaScriptが使用されており、初めて学ぶのに適しています。

WE09-JavaScript入門

Bootstrap

HTML、CSS、JavaScriptはいずれもプログラミング言語ですが、自分でデザインも実装も行うとなると手間がかかります。

Bootstrapは、表示先のウィンドウサイズに合わせてレイアウトを動的に変化させるレスポンシブデザインなど、定番のレイアウトを簡単に実装するためのCSSフレームワークです。

これを覚えればデザイン性の高いサイトをサクサクと作れるようになります。

WE08-Bootstrap4 入門

サーバーサイド

サーバールーム

フロントエンドを一通り理解したら、サーバーサイドの技術を身に付けましょう。サーバー環境を構築し、実際に動かしながら学んでいくのが良いでしょう。

SQL

一定以上の規模であれば、データベースを使わないWebサイトはほとんどないと言っても過言ではありません。例えばECサイトならば顧客情報や商品情報を管理するのに必要です。

SQLはデータベースを操作するためのプログラミング言語で、こちらも習得することを推奨します。

後述するスクリプト言語のフレームワーク等ではActiveRecordという仕組みが導入されており、オブジェクト(アプリケーション内の実体)とデータベースをスムーズに繋ぐORM(Object-Relational Mapping)が可能です。

この機能を用いればSQLを意識することなくデータベースを扱うことはできますが、不具合が発生した際のデバッグやパフォーマンスを上げるためのチューニングはSQLを知らなければ難しいでしょう。

SQ01-SQL入門

Ruby

サーバー側の処理を記述するためのスクリプト言語にはPerl、PHP、Python、Java等様々なものがありますが、中でもおすすめしたいのがRubyです。

日本人のまつもとゆきひろ氏が開発された言語ということもあり、日本語のドキュメントが充実していて人気が高く、後述する通り便利なフレームワークもあるため初心者の学習に適しているといえます。

RB01-新・Ruby入門

Ruby on Rails

Rubyでの開発を簡素化するために、よく使われる機能等をまとめて使いやすくしたフレームワークがRuby on Railsです。

これを使うとコード量が少なく開発スピードが上がるため、実際の開発現場では必ずといっていいほど導入されています。

RR01-新・Ruby on Rails入門

サーバー構築技術(1)heroku

サーバーの構築や運用についても学ぶ必要があります。サーバー用の機器を購入して自宅で構築する方法もありますが、手軽に始められるPaaS(Platform as a Service)を活用するのが良いでしょう。

herokuではハードウェアの準備やOSのインストール等を行わず、アプリケーションのデプロイに集中できるので習得スピードを早められます。

heroku

サーバー構築技術(2)AWS

もう一つのおすすめはAmazon社が提供するAWSです。導入している企業が多いため、習得しておくと良いでしょう。

認定試験もあるので、転職活動を有利に進めるために取得を目指すのも良いかもしれません。

Amazon Web Service

開発基本ツール

オフィスで向かい合う同僚たち

開発に欠かせない基本ツールの使い方も習得する必要があります。Webエンジニアに限らず全てのエンジニアに必須のスキルです。

Git/GitHub

Gitはソースコードのバージョン管理システムです。

開発を進めていくとコード量が膨大になり複雑になってきますよね。

後から不具合が起きた場合の対応のため、どのバージョン以降から発生したのかを確認・修正したり、別の機能を派生的に追加したりする目的でソースコードを管理する必要があります。

ローカル環境で使用するバージョン管理システムとしては、SubversionやCVSといったものも有名ですが、より便利なGitが現在の主流です。

また、Gitのクラウド版であるGitHubは数千万人規模のユーザが利用しており、ソースコードの公開やそれを通した交流の場となっています。

WE16-Git / GitHub入門

Linux

サーバー環境はLinux上に構築されることが多いため、基本的なLinux操作方法について学ぶ必要があります。

まずは重要なコマンドを覚えることから始めると良いでしょう。

LS01-はじめてのLinuxサーバ(ローカル環境編)

まとめ

学習に励む女性

Webエンジニアになるために必要なスキルセットについてご紹介しました。初心者の方におすすめの講座情報も掲載していますので、ぜひチェックしてみてください。

学習方針確認のお助けになれば幸いです。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: エンジニアへの道 Tagged With: AWS, Bootstrap, CSS, Git, GitHub, Heroku, HTML, JavaScript, Linux, Ruby, Ruby on Rails, SQL, Web開発, プログラミング入門, プログラミング学習

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to Next Page »

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • VSCodeで画像が表示されない場合の対処法
  • MySQL 5.7 for Windowsのアンインストール方法
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介

最近の投稿

  • 【04/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • Cloud9が容量不足? EBSボリュームを拡張する方法を解説します!
  • Linuxの標準エディタvi(vim)の超基本的な使い方!動画で初心者にもわかりやすく解説!
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」

カテゴリー

  • AWS
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー