- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

始めに、*HTMLエディタとは何か*について解説します。**HTMLエディタは何に使われるものなのか**、メモ帳や統合開発環境との違いはなにか、についてまとめました。

### HTMLエディタはテキストを編集するためのソフト

HTMLエディタは、*テキストを編集するためのソフト*のことです。HTMLのソースコードを記述し、HTMLファイルとして保存することができます。多くのHTMLエディタは、HTMLだけでなく、他のプログラミング言語の記述も可能です。HTMLエディタにはさまざまな種類があり、**中にはインストール不要なものやオンラインで使えるものもあります**。

### HTMLエディタとメモ帳の違い

Windowsのパソコンには、最初からメモ帳ソフトがインストールされています。また、Macにもテキストエディットというメモ帳と類似したソフトがあります。これらのソフトでも、HTMLコードの記述は一応可能ですが、*HTMLエディタを使う方がおすすめ*です。なぜならHTMLエディタには、タグの入力サポートやエラー表示など、コードの記述を効率化できるさまざまな機能が備わっているからです。**プログラマーやWebデザイナーのほとんどが、メモ帳ではなくHTMLエディタを使っています**。

### エディタと統合開発環境の違い

エディタとよく似たものに、「統合開発環境」があります。統合開発環境とは、開発作業を効率的に行うための開発環境を指します。たとえば、Eclipseなどです。統合開発環境とエディタは厳密には区別されていないですが、*一般的に開発に関する機能が豊富なものを統合開発環境と呼ぶことが多い*です。

HTMLのコードを書く際に統合開発環境を使う人もいますが、機能が豊富な分、動作が遅く、**ある程度パソコンのスペックが高くないとスムーズに編集できない**可能性があります。そのため、初心者には統合開発環境よりもHTMLエディタがおすすめです。

## 初心者におすすめのHTMLエディタ5選

ここでは、*初心者におすすめのHTMLエディタを5つ厳選*しました。これらのエディタは使いやすいと評価が高いものばかりです。エディタ選びに迷ったら、**これら5つから選ぶのが良いでしょう**。

サクラエディタは、*日本人が開発したHTMLエディタ*です。エディタ上の表記は全て日本語なので、初心者でも使いやすいでしょう。マニュアルなども日本語なので、分からない箇所が調べやすいのも特徴です。また、機能面も豊富であり、コードの強調や検索機能など**HTML編集に必要な機能は一通り揃っています**。

[サクラエディタ](https://sakura-editor.github.io/)

Atomは、GitHubを作った会社が開発したHTMLエディタです。Atomは利用者が多く、ネット上に使い方を解説したサイトが多いため、*分からない所を調べやすいのがメリット*でしょう。また、Atomはプラグインが多く、機能を追加したり便利に活用したりすることが可能です。**エディタ上の表記がデフォルトで英語になっています**が、プラグインを使うことで日本語に変換できます。

Visual Studio Codeは、**マイクロソフト社が開発したHTMLエディタ**です。Windows・Macの両方で使えて、*初心者から上級者まで人気の高いHTMLエディタ*です。HTML以外にも、さまざまなプログラミング言語に対応しています。

[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

Notepad++は、Windows専用のHTMLエディタです。*Windowsを使っている人が使いやすいように設計*されています。メモ帳と同じような感覚で使えるので、初心者にもおすすめでしょう**。また、プラグインも豊富なため、自分好みにカスタマイズすることが可能**です。

[Notepad++](https://forest.watch.impress.co.jp/library/software/notepadplusp/)

Online HTML EDITORは、*オンラインで使えるHTMLエディタ*です。インストール不要で、手軽にコードを記述して実行結果を確認することができます。インストールが不要なので、**パソコンの容量を圧迫することなく使える点がメリット**でしょう。本格的な開発には活用できませんが、コードにミスがないか素速く確認したいときにおすすめです。

[Online HTML EDITOR](http://asomin.net/htmleditor/)

HTMLエディタにはさまざまな機能が備わっています。ここでは、*具体的にどういった機能が備わっている*のかまとめました。これらの機能を活用することで、**ソースコードの記述がスムーズに行える**でしょう。

HTMLエディタの多くには、記述サポートがついています。記述サポートとは、*その文字から始まるタグを表示してくれる機能*のことです。たとえば、「a」とタイプした場合、aから始まるタグが表示されます。この機能により入力にかかる手間を省くことができますし、**スペルミスも防げる**でしょう。開発スピードを上げるには欠かせない機能です。

HTMLエディタは、**タグごとに色付けをしてくれます**。タグごとの色が付いていると、ソースコード全体が見やすくなり、記述ミスを防ぐことができるでしょう。HTMLのソースコードは、*1文字でも間違っていると正しく動作することができません*。そのため、こういった表記ミスを防ぐ機能があるかどうかは重要です。

HTMLエディタの多くには、プレビュー機能が備わっています。HTMLコードの実行結果を確認する場合、通常はブラウザを開かないといけません。しかし、何回もブラウザをリロードして確認するのは大変です。*HTMLエディタのプレビュー機能を使えば、実行結果を素速く確認する*ことができます。**ショートカットキーを押すだけですぐに実行結果を確認できる**ので、開発スピードがアップするでしょう。

HTMLエディタの多くには、エラーメッセージ機能が揃わっています。エラーメッセージ機能とは、HTMLのソースコードに記述ミスがあると*「ここは間違っています」と教えてくれる機能*のことです。エラーメッセージ機能のおかげで、デバック作業効率が一気に上がります。**特に初心者はスペルミスをすることが多い**ため、欠かせない機能と言えるでしょう。

## HTMLエディタを選ぶときのポイント

最後に、*HTMLエディタを選ぶ際のポイントを紹介*します。HTMLエディタにはさまざまな種類があり、中には上級者向けのものもあります。**上級者向けのエディタは機能が多すぎて使いにくい場合も**あります。そこで、初心者でも使いやすいエディタを選ぶコツを解説します。

### ネットに情報が多く掲載されているか

HTMLエディタによってはネット上に情報が少なかったり、**英語の情報ばかりだったりすることがあります**。情報が少ないと、エディタが思うように動かない場合、調べて解決するのが難しくなるでしょう。そのため、なるべく*ネットに情報が多く掲載されているHTMLエディタを選ぶ*のがポイントです。たとえば、サクラエディタは日本人が開発したHTMLエディタのため、日本語の情報が多く掲載されています。

HTMLエディタによっては、**一部のOSにしか対応していないものもあります**。たとえば、Notepad++などは、Windowsでしか使うことができません。*公式サイトのダウンロードページを確認すれば、どのOSで使えるのかは分かります*。自分が使っているOSに対応しているか必ず確認しましょう。

### 拡張機能を使わなくても機能が充実しているか

HTMLエディタの中には、拡張機能（プラグイン）を使わないと機能がそこまで多くないものもあります。初心者は、できるだけ*拡張機能を使わなくても良いHTMLエディタ*を使いましょう。**拡張機能のインストールは初心者には少しハードルが高く**、どの拡張機能を使えば良いか調べるのも大変です。

## 自分に向いているHTMLエディタを選んで作業効率を上げよう！

本記事では、*おすすめのHTMLエディタを解説*しました。どういったHTMLエディタを選ぶと良いのか、お分かり頂けたかと思います。HTMLエディタはなるべく軽くて使いやすいものを選びましょう。**本記事を参考に、自分に向いているHTMLエディタを探してみてください**。

今回はHTMLエディタを紹介します。HTMLエディタにはさまざまな種類があり、どれを使うべきか分からない方も多いのではないでしょうか。そこで、初心者におすすめのHTMLエディタを5つ厳選しました。HTMLエディタ選びに迷っている方は、ぜひ参考にしてください。

HTMLエディタはテキストを編集するためのソフト

メモ帳と違いHTMLエディタは開発がスムーズになる機能が豊富にある

初心者は日本語の情報が多く使いやすいHTMLエディタを選ぶのがおすすめ

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

**HTMLとは「Hyper Text Markup Language」の略称であり、Webサイトを作成するために開発されたマークアップ言語です。**HTMLでWebサイトの本文部分などの構造を作成し、CSSやJavaScriptといった言語でWebサイトを装飾するのが一般的です。ここでは、HTMLの詳細やHTMLタグの使い方について初心者向けに紹介します。

**HTMLはWebサイトの構造を定義するためのマークアップ言語です。さらにCSSを使用すれば、Webサイトを装飾できます。**HTMLでWebサイトの装飾ができないということはありませんが、HTMLとCSSで用途を分けることで分業がしやすくなり、開発効率の向上が期待できます。Webサイトのメンテナンス性も向上したり、JavaScriptというプログラミング言語を使用すれば、Webサイトに動的な要素を追加したりすることが可能です。

HTMLそのものはテキストデータであるため、テキストエディタなどを使用して記述したテキストに拡張子「.html」を付ければ、一般的にWebブラウザでページの構造を確認できます。例えばメモ帳でも簡単にコーディング可能です。

また*HTMLを記述する場合には、タグ付けを行う必要があります。*例えば装飾を行いたい本文や画像などには、1つひとつタグ付けを行わなければなりません。

**HTMLではコンピュータに文書の意味を理解させるために、タグ付けを行う必要があります。**HTMLタグは検索エンジンが作成したWebサイトを認識するための要素の1つであり、検索エンジン最適化にもつながるでしょう。検索エンジン最適化への対策をすれば、検索結果の上位にWebサイトが表示されやすくなり、数多くのユーザーに自分のサイトを見てもらえる可能性は高まります。

また、タグ付けにはルールがあります。タグとは「<>」で囲った文字列を指し、*一般的なタグの記載方法は「<タグ名>テキスト</タグ名>」です。*なお最初の「<タグ名>」は開始タグと呼び、最後の「</タグ名>」は終了タグと呼びます。開始タグと終了タグでテキストを挟めばタグの作成が可能で、終了タグが必要ないタグ要素もあります。

開始タグの中には、必要に応じて「<タグ名 属性="属性値">テキスト</タグ名>」のように属性を記載できます。**属性を記載すれば、HTMLの要素に対して性質を与えることが可能です。**例えばimgタグを使用する場合、src属性を使用すれば、簡単に画像のパスを指定することができます。

またtitle属性を使用すれば、画像のタイトルを指定することが可能です。さらにalt属性を使用すれば、画像の代替のテキストを入力でき、検索エンジンが画像の中身を理解する際などに利用されます。他にも属性を記述すれば、様々なことができるようになります。

HTMLやHTMLタグの概要については理解できたでしょうか。ここでは、一般的なWebサイトの構成について初心者向けに紹介します。

**HTML文書を書き始める際に、まずはDOCTYPE宣言を記述します。DOCTYPE宣言は「HTML文書を記述する」という宣言文を意味します。**DOCTYPE宣言部分を修正すれば、使用するHTMLのバージョンを変更することができます。例えば、HTML5では「<!DOCTYPE html>」と簡単に記述可能です。大文字と小文字は区別されません。

*HTML5以前のDOCTYPE宣言の書き方は、HTM5とは異なるため、使用したい方は公式リファレンスなどを参照しましょう。*そして記述したテキストファイルは、拡張子を「.html」にしてHTMLファイルにしましょう。

**DOCTYPE宣言が指定できたら言語を指定しましょう。```<html lang="言語名">```の言語名の部分に使用したい言語を記述すれば、言語の指定が可能です。**例えば言語名に「ja」を入力すれば、日本語のWebサイトにすることができます。また「en」を入力すれば、英語のWebサイトにすることが可能です。

**言語の指定ができたらhead要素に、metaタグ・linkタグ・titleタグなどを記述しましょう。**head要素には、一般的にコンピュータが認識するデータを記述します。

```<meta charset="文字コード">```*の文字コードの部分に、使用したい文字コードを記述すれば、文字コードの指定ができます。*一般的に「UTF-8」を使用することが多いです。他には「Shift_JIS」「EUC-JP」などがあります。

```<meta name="description" content="要約">```*に、記事本文の要約を記述すれば、要約の指定が可能です。*指定した要約は検索結果に表示されるため、文字数などユーザーに配慮して記述するのが大切と言えます。

**linkタグを使用すれば、自身のファイルと別のファイルを関連付けることが可能です。**例えばCSSファイルと関連付けるときには```<link rel="stylesheet" href="style.css">```などと記載します。なお「style.css」はCSSファイルの名称になるため、「style」という部分はファイル名に合わせて自由に変更可能です。また、linkタグとaタグは異なるため注意する必要があります。

```<title>タイトル名</title>```*のタイトル名の部分に、使用したいタイトル名を記述すれば、タイトルの指定が可能です。*ここで記述したタイトル名は、Webサイトを開いたときのタブに表示されます。タイトルは検索エンジン最適化において重要な要素の1つになるため、必ず記述しましょう。

**head要素が記述できたら、body要素にコンテンツの中身を記載しましょう。bodyタグの中に記述された本文や画像は、Webブラウザの画面上に表示されます。**bodyタグには色を指定する属性がいくつかありますが、いずれも非推奨とされているため、色を指定したいときにはスタイルシートを使用しましょう。

一般的なHTMLファイルで記述する内容については理解できたでしょうか。ここでは、HTMLタグ一覧ということで、よく使用されるHTMLタグについて初心者向けに紹介します。

**一般的に見出しにはhタグを使用します。hタグには「h1」から「h6」までの6種類があります。**見出しを付けることで、文章の構成が理解しやすくなるというメリットがあります。例えばWordPressで見出しタグを使用すれば、プラグインを入れて自動で目次を生成させることも可能です。また、検索エンジン最適化への対策にもつながります。

**aタグとはリンク先を指定するHTMLタグです。**これまでにも説明しましたが、linkタグとaタグは異なるため注意が必要です。また*リンク先を指定するhref属性、リンクを開く方法を指定するtarget属性など様々な属性があります。*例えば```<a href="リンク先">こちらへ</a>```と記述すると、「こちらへ」をクリックすればリンク先へ飛ぶことができるようになります。

### 画像を挿入するタグ（imgタグ）

**画像を挿入するには、imgタグを使用しましょう。imgタグには終了タグは必要ありません。**表示する画像ファイルは、src属性で指定できます。またwidth属性やheight属性を付ければ、画像の縦横のサイズを変更することが可能です。さらにalt属性を付ければ、画像が出力されなかったときの代わりに表示させるテキストを指定することができます。例えば```<img src="サンプル.png" width="100" height="100" alt="サンプル">```と記述すれば、「サンプル.png」という画像を縦100px、横100pxで表示させることが可能です。また画像が出力されなかったら、「サンプル」というテキストが表示されます。

**文章を明示的に改行したいときには、brタグ使用しましょう。brタグには終了タグは必要ありません。**brタグは一般的に余白を作りたいときに使用されますが、*スタイルシートを使用する方がおすすめです。*brタグでデザインを作成したとしても、ユーザーの閲覧する環境によって行間が変わってしまうことは少なくありません。また文字サイズによって改行の位置が変わり、本文が読みづらくなってしまうこともあるため、brタグの使い方には注意が必要です。

## HTMLタグの使い方をマスターして効率よくWebサイトを作成しよう！

これまでに、HTMLやHTMLタグの概要・Webサイトの構成・HTMLタグ一覧について初心者向けに解説しました。**HTMLはWebサイトの構造を定義するためのマークアップ言語です。**CSSやJavaScriptといった言語を使用すれば、Webサイトに装飾を加えることができます。

さらに*HTMLタグを使用してWebサイトの構造を作成することが可能です。DOCTYPE宣言・言語の指定・head要素・body要素などのWeb制作における一般的な部分はきちんと押さえておきましょう。*またHTMLタグには様々なものがあります。この記事ではよく使用されるタグを紹介しましたが、まだまだあらゆるタグがあります。Web制作に興味がある方は書籍・学習サイト・公式リファレンスなどを活用して、HTMLやCSSの言語から勉強を始めてみましょう。

HTMLはWebサイトの構造を定義するためのマークアップ言語です。そしてHTMLタグを使用してWebサイトの構造を作成することができます。当記事ではHTMLやHTMLタグの概要・Webサイトの構成・HTMLタグ一覧について初心者向けに解説します。

HTMLとはWebサイトの構造を定義するためのマークアップ言語

HTMLタグは検索エンジン最適化に対して影響を与える

HTML5であればDOCTYPE宣言が簡単に記述できる

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

## JavaScriptでゲーム開発は初心者でもできる

JavaScriptと言えば、Webサイトに動きを付けるために使用されるイメージを抱く方が多いでしょう。実は、**シューティングゲームやRPGなどのゲーム開発もJavaScriptで行うことができます。**プログラミング初心者がJavaScriptを使用してゲーム開発を行うとしても、ハイレベルなプログラミングスキルは要求されません。そのためJavaScriptの基礎を身に付ければ、ミニゲーム程度のゲーム開発を行うことは充分に可能です。
ここでは、JavaScriptの概要やできることについて詳しく紹介します。

**JavaScriptは主にWebサイトに動きを付けるために使用されることが多いプログラミング言語です。**また、JavaとJavaScriptの名称が似ているため、同様の言語と勘違いされる方も多いですが、これら2つは全く異なるプログラミング言語です。

HTMLやCSSのプログラミング言語を習得すれば、スマホやPCで閲覧できる簡単なWebサイトを作成することができます。しかし、これらの言語だけでは静的なWebサイトしか作成することができません。*JavaScriptのプログラミング言語を習得すれば、Webサイトに動的要素を追加できるため、よりユーザーに配慮したWebサイトを作成することが可能です。*

まず先述したように、*JavaScriptを使用すればスマホやPCのブラウザに表示された画面に動きを加えることができます。*例えば画面をスクロールしたら、背景のデザインを変化させることなどが可能です。他にもサーバと通信を行い、データを送受信することもできます。

**またNode.jsが登場したことにより、JavaScriptはフロントエンドだけではなく、サーバーサイドの開発でも使用されています。さらにReact Nativeというフレームワークを使用すれば、iOSとAndroidの両方に対応したスマホアプリを開発することが可能です。**このようにJavaScriptはWebサイトに動きを付けるだけではなく、様々なことに活用されています。

## JavaScriptでゲーム開発を行うメリット

JavaScriptの概要やJavaScriptでできることは理解できたでしょうか。ここでは、JavaScriptでゲーム開発を行うメリットについて詳しく紹介します。

### Web開発のスキルも併せて勉強できる

**JavaScriptは汎用性の高いプログラミング言語であるため、ゲーム開発を行うときに基礎スキルを習得すれば、Web制作やWebアプリ開発に応用することもできます。**例えばWebデザイナーにも興味がある方や、スマホアプリを開発してみたい方は、JavaScriptによるゲーム開発の経験は将来的に活用できる可能性が高いと言えるでしょう。

### 疑問点や不明点が生じても解決策を得やすい

**JavaScriptは世界中で使用されている言語であるため、数多くの開発者が初心者向けのトラブルに対する解決策に関する記事をインターネット上などで公開しています。**2021年8月のTIOBEインデックスのプログラミング言語人気ランキングに関するデータによると、JavaScriptは7位に位置しており、人気の言語であることが理解できます。
（ 参考：https://www.tiobe.com/tiobe-index/ ）

知名度が低いプログラミング言語の場合、情報収集に時間がかかってしまいます。一方JavaScriptの場合、数多くの知見があるため課題解決も比較的容易です。

### 他のプログラミング言語と比較して難易度が易しい

**多種多様にあるプログラミング言語の中でも、JavaScriptは習得難易度が比較的簡単な方です。**プログラミング初心者の場合、エラーやバグなど不具合が発生すると、モチベーションが維持できず挫折してしまうことも少なくありません。JavaScriptであれば習得難易度が低いため、プログラミング初心者にとって最初に学ぶ言語としておすすめと言えるでしょう。

### 短期間で開発を行うことができる

**プログラミング言語の習得難易度が低かったり、課題解決に対する知見が多かったりするということは、開発効率の向上にもつながります。**1つの制作に長い時間を割くのは実務において少なくありません。しかしプログラミング初心者の場合、短期間で成果を出せる方がモチベーションを維持しやすいと言えるでしょう。

ここではプログラミング初心者のために、JavaScriptを使用したゲームの作り方を習得するための学習方法をステップごとに紹介します。

**JavaScriptの開発環境の中で必須とも言えるのがエディタです。**JavaScriptでソースコードを記述するためにエディタが必要で、例えばメモ帳でも問題ありません。*しかしコーディングに特化したエディタを使用すれば、効率よく開発を行うことができます。また、将来的に実務のプログラマーとなった際にもエディタを使いこなせるのは重要です。*エディタにも様々な種類があり、例えば「Visual Studio Code」「Atom」「Emacs」などがあります。

**JavaScriptを使用する前にHTMLのスキルが必要です。**HTMLの知識のないプログラミング初心者は、まずHTMLの基礎を学習しましょう。HTMLの基礎は学習サイトや入門書などで学習すれば、簡単に身に付けることが可能です。
*Web制作を将来的に行いたいと考えている方は、CSSの知識を同時に身に付けたり、既に作成されているWebサイトをサンプルとして模写コーディングを行ったりすると実務で役立つスキルを習得できます。*

HTMLの基礎を学ぶことができたら、JavaScriptでゲーム開発を行うために、JavaScriptの基礎を勉強しましょう。**JavaScriptのおすすめの学習方法は、学習サイト・本・勉強会・プログラミングスクールなどが挙げられます。**どのような学習方法が自分に合うかを把握するために、独学でも勉強できるかどうかや、将来的な目標を明確にすることが大切です。

### JavaScriptを使用してソースコードを記述して実行する

**JavaScriptの基礎を学んだら、スキルを定着させるためにも実際に手を動かしてソースコードを記述してみることが重要です。**例えば学習サイトや本で扱ったサンプルコードを改変し、実際に実行してみるのがおすすめです。自分の手でソースコードを記述し、プログラムを実行すると、エラーなどの不具合が発生することも少なくありません。その際に新しい気づきを得られることが多く、スキルアップにもつながっていきます。
また、分からない部分が出てきたら、JavaScriptの基礎に立ち戻り復習を行うことも大切です。

### JavaScriptのゲームライブラリを勉強する

ライブラリとは、よく使用される機能をプログラムの中で再利用できるようにまとめたものを指します。**JavaScriptには数多くのライブラリが用意されており、ゲーム開発に特化したゲームライブラリもあります。**ゲームライブラリを使用すれば、プログラミング初心者でも効率よく開発を行うことが可能です。*特にゲーム開発には専門の知識やスキルが要求されるため、ライブラリを活用しないでゲーム開発を行うのは、初心者にとって難易度が高いと言えるでしょう。*

### JavaScriptを使用してゲーム開発を行う

JavaScriptのゲームライブラリを身に付けることができたら、実際にゲーム開発を行いましょう。**本格的なゲーム開発を行う前に、まずはサンプルを模写することから始めてみるのがおすすめです。**ソースコードのサンプルコードを使用してプログラミング言語の基礎を学ぶように、サンプル模写を行えばゲーム開発に必要な考え方を身に付けることができるでしょう。

初心者の場合、難しいサンプルを模写して学習すると、途中で挫折してしまうこともあるため、ミニゲーム程度のサンプルから取り組んでみることがおすすめです。*サンプルを通してゲーム開発の基礎を身に付けることができたら、自分なりのアレンジを加えて好みのゲーム開発を行ってください。*

## JavaScriptを使用すれば初心者でもゲーム開発ができる

これまでに、JavaScriptの概要やJavaScriptでゲーム開発を行うメリット、JavaScriptを使用したゲームの作り方について解説しました。**JavaScriptは主にWebサイトに動きを付けるために使用される言語ですが、近年では活躍の幅は拡大しており、ゲーム開発にも使用できます。**

JavaScriptは世界中で使用されており知名度が高いため、情報収集しやすいという特徴があります。また、JavaScriptは他のプログラミング言語と比較すると習得難易度が低いため、プログラミング初心者が最初に学ぶのにおすすめの言語とも言えるでしょう。

*JavaScriptでゲーム開発を行う前に、エディタの準備をしたり、HTMLとJavaScriptの基礎を習得したりすることが大切*です。また、JavaScriptには数多くのライブラリが用意されているため、**初心者でも効率よくゲーム開発を行うにはJavaScriptのゲームライブラリを習得しておきましょう。**ゲームライブラリまで学ぶことができたら実際にゲーム開発を行ってください。最初はサンプル模写を通してゲーム開発の考え方を身に付けることがおすすめです。

JavaScriptは他のプログラミング言語と比較すると習得難易度が低いため、初心者におすすめの言語の1つです。当記事では、JavaScriptの概要やJavaScriptでゲーム開発を行うメリット、JavaScriptを使用したゲームの作り方について解説します。

JavaScriptは主にWeb制作で使用される言語であるがゲーム開発もできる

初心者がJavaScriptでゲーム開発を行う際に、ゲームライブラリを使用すると効率よく開発できる

JavaScriptでゲーム開発を行う場合、サンプルのソースコードやゲームを活用するのがおすすめ

初心者がJavaScriptでゲーム開発はできる？作り方を解説！

まず、*Swiftの特徴について解説*します。**Swiftが開発できるものやSwiftの言語としての特徴**についてまとめました。Swiftという言語自体を初めて知ったという方などはぜひお読みください。

Swiftは*Apple社製品で動くアプリを開発*することができます。具体的には、iOS・Mac・watchOSなどのアプリを作ることが可能で、特に**iOSアプリ開発に多く使われています**。iOSアプリ開発で使われる言語は、他にObjective-Cなどがあります。昔はObjective-Cが主流でしたが、最近はSwiftの方が人気が高くなってきており、将来性が高いのもSwiftの方であると推測されています。

Swiftの人気の高さに、*学習コストの低さ*が挙げられます。プログラミングには、高難易度のもの低難易度のものがあります。Swiftは言語全体で見ても**かなり初心者に優しい作り**で、覚えることは少なく、ソースコードはシンプルで読みやすいのが特徴です。また、バグが出にくい仕様になっています。

Swiftは*Objective-Cと互換性があり*、Objective-Cのソースコードの一部をSwiftに変更しても、問題なく動作が可能です。そのため**Objective-Cで動いている既存アプリをSwiftで書き直す**作業がスムーズに行えます。また、Objective-Cのフレームワークは、Swiftでも使うことが可能です。
Objective-Cだけでなく、C++やC言語とも互換性があります。

Swiftは*処理速度の早さも評価*されています。Objective-Cよりも最大で2.6倍早いと言われています。処理速度が早いとアプリが表示する早さなどが改善され、**よりユーザーにとって使いやすいものとなります**。

## 初心者がSwiftを習得するための学習ロードマップ

続いて、*初心者がSwiftを習得するための学習ロードマップ*を紹介します。どういった手順でSwiftを習得すればよいのかまとめました。**プログラミング学習は正しい手順で行うことが肝心**です。この学習ロードマップに沿って学習すれば、効率的にSwiftでiOSアプリを開発するスキルを身につけられるでしょう。

### Step1.WindowsではなくMacのパソコンを用意

まずは、*Macのパソコンを購入*しましょう。MacのパソコンがないとiOSアプリの動作チェックを行うことができません。Windowsでも一応シミュレーターなどを使えば可能ですが、**シミュレーターだとアプリの処理の一部がテストできない**など、不便なことが多いためおすすめはできません。Macのパソコンは少し高額ですが、快適な開発環境を作りたいのなら必須の端末です。

### Step2.Xcodeをインストールする

Macのパソコンに*Xcodeをインストール*してください。XcodeはApple社が開発した統合開発環境で、iOSアプリ開発では必ずと言って良いほど使われるものです。Xcodeを使うことでiOSアプリの開発が楽に行なえます。

Xcodeには、ファイル管理機能・コンパイル・デバッグ機能などが備わっており、**アプリ開発の工程を全てサポートしてくれます**。ただし、Xcodeは使いこなすのに少し知識が必要です。Xcodeをインストールしたら、Xcodeの各機能を覚えていきましょう。

### Step3.書籍など基礎文法を習得する

開発環境を整えたら、Swiftの書籍を購入し文法を覚えていきましょう。入出力・条件分岐・ループ・クラスなど、*1つ1つの文法を丁寧に学習*していきます。参考書は理解し終えるまでは飛ばさずに読むことが肝心です。理解しないまま進むと、どんどん分からないことが増え、プログラミング学習に挫折してしまいがちです。

また、**書籍のサンプルコードは実際に自分の環境で実行**してみましょう。手を動かしてコードを書くことで、記憶に定着しやすくなります。さらに、コードの細部を変更し、実行結果がどう変わるのか確認をしてください。これを繰り返すことで、最終的に自分でソースコードが書けるようになります。

### Step4.Appleの公式ドキュメントを読む

iOSアプリ開発に挑む前に、*Appleの公式ドキュメントを必ず読んでください*。アプリを公開する場合、**Appleの審査に合格しないといけません**。審査に合格するために、公式ドキュメントの規約を読んで、規約違反にならないようにしましょう。

### Step5.簡単なアプリを開発する

*まずは簡単なiOSアプリを開発*してみましょう。初心者の方なら、電卓アプリの開発がおすすめです。アプリを作る場合は、処理が正しく行われるだけでなく、ユーザーにとって使いやすいものであることも意識してください。

開発したアプリは、**ポートフォリオとして面接時に企業に提出**ができます。iOSエンジニアは未経験だと採用されるのが難しい傾向にあるため、ポートフォリオを提出して実力を証明しましょう。

### Step6.開発者ライセンスを取得する

アプリを外部に公開するなら、*開発者ライセンスの取得が必要*です。開発者ライセンスの取得には**お金がかかるので注意**です。自分のiPhoneでテストするだけなら取得は不要ですが、公開する場合は準備しておいてください。

## Swiftを勉強する上での注意点

ここでは、*Swiftを勉強する上での注意点*をまとめました。最低限学ぶ上で気をつけるべき点を2つ紹介しています。この2つは**Swiftの学習をスタートさせる前に頭に入れておきましょう**。

### Androidアプリは開発できない

SwiftはiOSアプリは作れても、*Androidアプリは作れない*ので注意です。Androidアプリを作りたい場合は、**JavaかKotlinを習得**しましょう。初心者であれば、Kotlinの方が文法が簡単なのでおすすめです。自分が何を開発したいのか、ということを決めてから学習する言語を決めるようにしましょう。

Swiftは日本企業で最近新しく使われ始めた言語なため、*現状日本語の情報は少なめ*です。アプリ開発時に分からないことを調べる場合、**英語の情報しか出てこない可能性があります**。

## Swift初心者におすすめの本3選

最後に、*Swift初心者におすすめの本*をまとめました。Swiftの文法について解説する本や、iOSアプリの作り方について解説する本を紹介しています。Swiftはネット上に日本語の情報が少ないので、**本で学ぶことをおすすめします**。これらの本を購入し、Swiftの勉強してみてください。

### Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus

こちらはSwiftの*基礎文法から実践的な利用方法まで網羅した入門書*です。読者の「なぜ？」を解決することにフォーカスを置いており、説明が詳しく書かれています。Swiftの標準的な機能のほか、非同期処理やエラー処理など、**実用的なものも解説**されています。

[Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 WEB+DB PRESS plus](https://gihyo.jp/book/2020/978-4-297-11213-4)

### 絶対に挫折しないiPhoneアプリ開発「超」入門 第7版 【Xcode 10 & iOS 12】 完全対応

こちらは人気の高いiOSアプリ開発の入門本です。*はじめてiOSアプリ開発をやる方に特におすすめ*です。**「誰1人、絶対に挫折しない」がコンセプト**であり、解説文がかなり噛み砕かれて説明されています。また、レイアウトも工夫されており、飽きずに読んでいけます。iOSアプリ開発の基礎は、この一冊で抑えることが可能です。

[絶対に挫折しないiPhoneアプリ開発「超」入門 第7版 【Xcode 10 & iOS 12】 完全対応](https://www.kinokuniya.co.jp/f/dsg-08-EK-0647770)

### 本気ではじめるiPhoneアプリ作り Xcode 10.x対応

Yahoo！のアプリエンジニアが書いた本格的な技術書です。*ユーザーにとって使いやすいアプリを作るためのテクニックを多く解説*しています。iOSアプリエンジニアとして転職を目指す方におすすめでしょう。ただし、**内容は難しめなので、上記2つの本を読んでからにするのが良い**です。サンプルコードも多く掲載されており、こちらを写すだけでも実力がつきます。

[本気ではじめるiPhoneアプリ作り Xcode 10.x対応](https://www.sbcr.jp/product/4815600037/)

## iOSアプリを作りたいならSwiftがおすすめ！ぜひ習得しよう

本記事では、*Swiftについて解説*しました。Swiftの言語としての特徴やSwiftの学習ロードマップがお分かり頂けたかと思います。iOSアプリ開発に携わりたいなら、Swiftを勉強するのがおすすめです。Swiftは学習コストが低く、**今後iOSアプリ分野で主流になると言われています**。本記事でまとめた学習ロードマップを参考に、まずはSwiftで簡単なiOSアプリの開発を目指してみてくださいね。

本記事ではSwift初心者の方に向けて、Swiftの特徴や学習ロードマップを紹介します。SwiftはiOSアプリ開発で多く使われる言語であり、将来性も高いと言われています。Swiftを勉強しようと思っている方は、本記事をぜひ参考にしてください。

SwiftはiOSアプリ開発などで使われている

Swiftは学習コストが低く、初心者におすすめの言語

Swiftを学ぶ場合は、Macのパソコンが必要

初心者の方必見！Swiftの特徴・学習ロードマップを解説

**Rubyとは、プログラミング言語の1つであり、文法や仕様が他のプログラミング言語と比較して簡易的であるため、ソースコードをシンプルに記述可能です。**またRuby on Railsというフレームワークを使用すれば、開発効率の向上が期待できます。ここではRuby初心者向けに、概要や特徴について詳しく紹介します。

**Rubyは1995年頃に、日本人のまつもとゆきひろ氏によって開発され､初めて国産のプログラミング言語で国際電気標準会議（IEC）で国際規格に認証されたことでも注目を浴びています。**2021年8月のTIOBEインデックスのプログラミング言語ランキングによると、Rubyは15位に位置しています。この結果からSwiftやGo言語よりも2021年8月時点では人気が高いと言えるでしょう。
（ 参考：https://www.tiobe.com/tiobe-index/ ）

**Rubyの大きな特徴としてソースコードの記述量が少ない点が挙げられます。**よって開発効率の向上にもつながるため、Rubyはスタートアップ企業や自社開発企業でよく使用されています。またソースコードの可読性が高く、保守性の高いサービスを作ることが可能です。

*JavaやC++などの他のプログラミング言語と同様に、Rubyはオブジェクト指向型言語の1つです。*Rubyは初期リリースのときからオブジェクト指向の考え方が取り入れられているのが特徴で、純粋なオブジェクト指向型言語と言えるでしょう。オブジェクト指向により、メンテナンス性・カスタマイズ性・プログラム品質の向上が期待できます。

**以上から、Rubyは他のプログラミング言語と比べて、簡単にコーディングできるため、スキルを習得しやすく初心者向けの言語と言えるでしょう。**

Rubyの概要や特徴は理解できたでしょうか。ここでRubyで何を作ることができるのか気になる方も少なくないでしょう。以下で、Rubyで作れるものについて詳しく紹介します。

**Rubyで作ることができるものの代表として、Webアプリ開発が挙げられます。Ruby on Railsというフレームワークを使用すれば高品質なWebアプリを短期間で作ることが可能です。**Ruby on Railsには豊富な機能が備わっており、汎用性の高さが特徴です。また日本語の資料やサイトなどの情報が多く、初心者でも学習しやすい点も特徴として挙げられます。Rubyで開発されたWebアプリの代表例として「クックパッド」「Gunosy」「クラウドワークス」などがあります。

**Rubyを使用して作れるものとして、API機能の開発も挙げられます。**APIとは「Application Programming Interface」の略称であり、ソフトウェアの機能を共有する仕組みを指します。具体的には機能を公開しているソフトウェアと、その機能を使用したいソフトウェアの間をつなげる窓口のようなものです。*API機能を開発するための専用ライブラリ「rails-api」を使用すれば、効率よくAPI機能をRubyで作ることができます。*

**RubyではRubyMotionというソフトウェアを使用すれば、 iOSのスマホアプリを作ることができます。**RubyMotionは2012年5月にリリースされた製品であり、スマホアプリを効率よく開発できる機能が用意されています。ただしAndroidアプリは開発できないため注意が必要です。*また、スマホアプリの開発に適しているプログラミング言語は他にもあるため、きちんと比較してから使用することをおすすめします。*

**Rubyで作れるものとして、スクレイピングの開発も挙げられます。**スクレイピングとは、Webサイトから情報を収集し、必要なデータを抽出・加工するための技術のことです。*RubyのNokogiriというライブラリを使用すれば、初心者でもスクレイピングを行うことができます。*スクレイピングを行うメリットは、手動よりもスピーディーに膨大な情報を収集できることです。そのためコスト削減にもつながるでしょう。

**Rubyで作れるものとして、Ruby on Railsを使用したECサイトも挙げられます。**Ruby on Railsには数多くのライブラリがあり、それに対して必要な機能を付け加えることで開発効率の向上が期待できます。*例えばRubyのSolidusというECパッケージを利用すれば、決済機能を簡単に実装することが可能です。*

**Rubyではチャットボットの開発を行うことができます。**チャットボットとは、テキストや音声によって、自動で会話するプログラムのことです。近年ではAI技術を活用したチャットボットを利用する機会は増加しています。例えばLINE公式アカウントなどでも、チャットボットを使用することは可能です。*Rubyではソフトウェア開発キット（SDK）を使用すれば、チャットボットをWebサイトに実装することができます。*

## Rubyコード一覧（初心者向け）

Rubyは初心者でも習得しやすく、様々なサービスを作ることができるのは理解できたでしょうか。ここでは、Ruby初心者向けにコードの基礎について紹介します。

**Rubyでは「#」をソースコードに記述すれば、「#」から行末までがコメントアウトされ、プログラムを実行する際に無視されます。**また複数行をコメントアウトしたい場合には、「=begin」と「=end」を使用します。ここからは具体例を見ていきましょう。

*1.単一行のコメント記述方法*
# コメント
print("Hello World!") # コメント「Hello World!」を出力します

*2.複数行のコメント記述方法*
=begin
コメント
コメント
コメント
=end

**Rubyでは他のプログラミング言語と比較して、簡単に変数を定義することが可能です。**数値の場合「変数名 = 数値」、文字列の場合「変数名 = '文字列'」で変数を定義することができます。*データ型を定義しないでも変数を定義できるため、ソースコードの記述量を少なくすることが可能です。*

**Rubyではputsメソッドを使用すれば、引数であるオブジェクトを出力させることができます。**なお引数であるオブジェクトは、文字列に変換されるため注意が必要です。ここからは具体例を見ていきましょう。

この場合「○○○」が出力されます。「()」はなくても問題ありません。*またダブルクォーテーションは、シングルクォーテーションでも良いですが、文字列には必ずどちらかを付けないとエラーが出力されてしまいます。*

Rubyコードの基礎については理解できたでしょうか。他のプログラミング言語よりも簡潔にソースコードが記述できるのがわかるでしょう。ここでは、Rubyのおすすめの勉強方法について詳しく紹介します。

ここでは、Ruby初心者向けの学習本について紹介します。**本で学習するメリットは、知識を体系的に身に付けられることです。しかしプログラミング学習の場合、実際に手を動かしながら学習することで、スキルが身に付くため、サンプルコードが記載されている本を選ぶのがおすすめと言えます。**

*1.3ステップでしっかり学ぶ Ruby入門*
本書はRuby初心者向けとなっており、プログラミングの基礎を図を使用するなどして丁寧に解説しているのが特徴です。予習・実践・復習の3段階のプロセスがあるため、Rubyの基礎スキルをきちんと定着できるような仕組みとなっています。WindowsとmacOSの両方に対応しているのも特徴です。ただしサンプルコードが他の本と比較すると少なく感じるかもしれません。
（ 参考：https://gihyo.jp/book/2018/978-4-7741-9502-5 ）

*2.たのしいRuby 第6版*
「たのしいRuby」は初版から17年以上経っているため、信頼と実績がある書籍と言えるでしょう。改訂も複数回行われており、第6版では最新のRubyのバージョンに対応しています。プログラミング初心者でも理解しやすいように、チュートリアル・基礎・クラス・実践とテーマを切り分けて解説を行っているのが特徴です。Rubyの基礎から応用まで学ぶことができます。また、サンプルコードも数多く用意されています。
（ 参考：https://www.sbcr.jp/product/4797399844/ ）

**独学で勉強する場合、本を読み込むだけではなく、学習サイトを活用して実際に手を動かしながら勉強するほうがスキルが身に付きやすいです。**近年では数多くのプログラミング言語の学習サイトがあります。*Rubyを勉強できる学習サイトとして「ドットインストール」「Progate」「Paiza」などが挙げられます。*

学習サイトを利用して勉強する場合、費用コストが低いのが特徴であり、無料で利用できるものも少なくありません。まずは無料の学習サイトを利用し、独学でRubyを学習してみて、自分に合うかどうかを確かめましょう。また独学でプログラミングを勉強するのが苦手と感じたら、プログラミングスクールの受講を検討してみましょう。

## Rubyは初心者向けの言語であり作れるものも多数ある！

これまでに、Rubyの概要・特徴・作れるもの・コード一覧・勉強方法について解説しました。*Rubyとは、まつもとゆきひろ氏によって開発されたプログラミング言語であり、文法や仕様がシンプルなため、初心者向けの言語とも言えるでしょう。*

**Rubyで作れるものは数多くあり「Webアプリ」「API機能」「スマホアプリ」「スクレイピング」「ECサイト」「チャットボット」などを作ることが可能です。**Rubyを独学で勉強する場合、本や学習サイトを活用するのがおすすめです。*本を選ぶ際のポイントとして、実際に手を動かしながら学習できるように、サンプルコードが記載されているものを選択することが挙げられます。プログラミング初心者の方は、ぜひRubyから学習を始めてみましょう。*

Rubyとはまつもとゆきひろ氏によって開発された国産のプログラミング言語です。また、文法や仕様がシンプルで、日本語の情報も多く初心者向けの言語とも言えるでしょう。当記事では、Ruby初心者向けに概要・特徴・作れるもの・コード一覧・勉強方法について解説します。

Rubyとは、まつもとゆきひろ氏によって開発された国産のプログラミング言語

Rubyの大きな特徴は文法や仕様がシンプルなためソースコードを簡潔に記述できること

Rubyで作れるものは「Webアプリ」「API機能」「スマホアプリ」「スクレイピング」「ECサイト」「チャットボット」など

Ruby初心者向けに概要・特徴・作れるもの・勉強方法を解説！

*SQL*とは*データベースを操作する言語*（データベース操作言語）です。データベース操作言語とはデータの操作や定義を行う言語を指します。

データベースはいくつかの種類があり、*SQLはリレーショナルデータベース管理システム（RDBMS）で使用するデータベース操作言語です。*SQLを用いることで紙ベースでは時間当たり数十件から数百件程度のデータ処理しかできなかったものが、コンピュータに蓄積されている数百万件以上のデータを**効率的に抽出することが可能**になりました。

### データベース、データベース管理システムとは

そもそも*データベース*（DB）とは、*情報を蓄積・検索する*機能を有する**データの集まり**（集計データ）を指します。簡単に言うと、データベースとは従来の台帳や帳簿をシステム化し検索を容易にしたイメージです。

次に*データベース管理システム*（DBMS）とは、データベースをコンピュータに蓄積する際に処理を行ってくれるミドルウェアシステム（管理システム）のことです。データベース管理システムは、*データベース*の**構築・管理・運用**を行います。

ここでいう構築とはデータベースの初期設定や必要なシステム資源を割り当てることで、管理はデータベースの論理設計に基づいてデータの作成・更新・削除・検索を行うこと、運用はシステム資源・データベース領域のモニター、バックアップ・リカバリー、保守・保全等を行うことです。

### リレーショナルデータベースの基本概念

*リレーショナルデータベース*（RDB）はデータを**表形式**で表します。表計算ソフトをイメージしてみてください。この表を*テーブル*と言います。また、表には行（横軸の項目）と列（縦軸の項目）があります。リレーショナルデータベースでは、行を*レコード*またはロー（Row）と言い、列を*カラム*（Column）と言います。

この表形式のデータがいくつも格納されているのが「RDB」と覚えておきましょう。

SQLはリレーショナルデータベースに対する操作を指定します。*SQL*は*データベース操作の言語*です。通常プログラムを作成するためにプログラム言語を使うように、*データベースを利用する*ためには**データベース操作言語**を使います。

*データベース操作の方法*は*対話型でコマンドを入力する方法*と、*プログラムAPIを使ってプログラム言語から利用する方法*があります。

SQLを利用する場合のコマンドは、*追加はINSERT*・*抽出はSELECT*・*更新はUPDATE*・*削除はDELETE*があります。ほとんどこれで処理は足りるため、慣れてしまえば難しくありません。詳細は以降でお話しします。

初心者の記事（14ページ目）