yutatanaka.tokyo logo

yutatanaka.tokyo

Published on

【2022年版】 ベテランプログラマーがオススメする、初心者がhtmlを書くための方法４選

Authors

はじめに


こんにちは、 業務歴15年のベテランWebプログラマーのutemです。


コーディングも時代とともに変遷しています。今回は

2022年最新版の初心者でもわかるhtmlの書くための方法

を解説していきます。（まとめた理由は本記事のあとがきで後述します。）


本記事を読まれた後に、

htmlの文法

を最も基本的なところを学びたい方には、有料だが

Udemy

か

ドットインストール

または老舗サイトとして

とほほのWWW入門

があるのでこのあたりをオススメさせていただきます。


難易度低: テキストエディタで書いて、ブラウザで確認


一番簡単な方法がこの書き方。Windowsであれば

秀丸

や

サクラエディタ

といったちょっとしたPC作業でのメモ書きで使えるメモアプリを誰もがインストールしていると思います。


これらのソフトウェアに以下のような基本的なhtmlを投げ込み、セーブすると


<html><head><title>Hello</title></head><body>Hello World!</body></html>

そのままブラウザにドラッグアンドペーストするとあら簡単。すぐにヴィジュアル化したhtmlを見ることができます。

ちなみに私は

Terapad

がお気に入りです。Macならエディタは

mi

を愛用。

難易度低: テキストエディタで書いて、レンタルサーバにFTPソフトでアップロード、確認


前述のやり方では、WWW（ワールドワイドウェブ）を経由した全世界への公開はできなかった。

ということで、

さくらのレンタルサーバ

や

ロリポップ

といったレンタルサーバ業者に最初の入口を頼りましょう。多くのブロガーは、ブログを比較的簡単にかける・始められるソフトウェアの

Wordpress

がサクッとインストールできる

XServer

を使っているようですね。

例えばさくらのレンタルサーバならミニマムなプランでプランであれば

月額131円

で利用できます。100GBも容量が付いているので

ディスク容量が少ないVPSの最小プラン(500円~)で始めるよりは費用が、短期的には出にくい

でしょう。（あなたのコンテンツが結果的に巨大化したら...その時考えればよいでしょう）


契約が完了すると、

  • サイトへの接続用ドメイン

  • FTPサーバへの接続情報 (IP / ID/ パスワード)

を提供してくれます。あなたがWindowsユーザーであれば、FTPクライアントソフト、例えば

WinSCP

を窓の杜経由でインストールしてみましょう。



FTPサーバへのIP/ID/パスワードを入力して、ログインする。ここに、先程保存したhtmlを投げ込んでみましょう。www経由でサイトを確認できます。

これがいわゆるホームページ

と呼ばれるものですね。

難易度中: プログラミング向けテキストエディタで書いて、サーバにFTPソフトやFTPプラグインでアップロード、確認

htmlのタグは色々と試してみたでしょうか？文法にも1人1人癖があって、誰を参考にしていいかわからなくなること、ありますよね...。私は、最初に

perl

というプログラミング言語（いわゆるLL言語）から業界に入ったのですが、Perlの「寛容の文化」がとても好きです。すべからく、Web制作は、他の人を不快にすることがなければ 自分のやりやすいようにやってもいいのではないでしょうか？


さて、話がずれました。


次は、htmlコーダー やWebデザイナーがプロとして実際に使用していることも多い、プログラミング向けテキストエディタを紹介します。

あたりが定評あるエディタ。これらでhtmlをゴリゴリかいて、WinSCPなどでアップロードするのもよし、エディタ付属のFTPプラグインでhtml等のファイルをアップロードすることも可能ですね。


Sublime Text豊富な開発支援プラグインが人気のSublimeText。ファイル保存時に、FTPアップロードができるなど、これ1つあれば、基本的なhtmlコーディングに困らない万能ツールだ。


こうしたツールを使う段になりますと、そろそろhtmlを書くだけではなくcssのライティングをしたくなるのではないでしょうか。先述のとほほのWWW入門さんの1コンテンツとしてCSS入門のページも用意されているので参考になるとおもいます。


また、htmlのコンテンツをリッチ化するのに必要な画像やアイコン、動画なども併せてアップロードしてくなってくるでしょう。htmlコーディングをするということは、関連するファイルの管理や作成も同時に行うことだということを、こうした作業を通じて体感いただけるかなと思います。


ブログ作成中の様子本記事を後述のVisual Studio Codeで執筆中の様子。画像(.png/.jpg)ファイルやjs(Javascript)様々なファイルが設置されていることがおわかりいただけるのでは。


煩雑なファイルを1つにまとめて管理する=プロジェクトと呼称する


プロジェクトと化したhtmlと関連ファイルの集合体を適切に管理するためには、次のステップに移ることになります。


難易度高: 統合開発環境(IDE)で書いて、クラウドサービスにアップロードする

ここで初めて、プロが日常的にコーディングを行う手段である統合開発環境(IDE)の出番が来ることになります。


つまり、あなたはhtmlを書く人から、「エンジニア」に徐々に立ち位置を変えていることになります。


htmlをビジネスで必要なレベルなど高度に書こうとすると、デザインに関わるマークアップ言語であるCSS や画面表示を制御するためのプログラミング言語Javascriptを書くことから逃れられません。趣味で書こうとされている方には関係がないような情報で、すみません。ただ、ある程度本格的にhtmlを書こうとなると徐々にプロとの境目は曖昧になります。


そこで、htmlを書く人=htmlコーダーから、徐々に フロントエンドエンジニア(表示に関わるエンジニア) に立ち位置が変わっていく...というわけです。


主なIDEは以下が挙げられます。


  • Visual Studio Code (略称:VSCode)無料, 動作軽い, 高機能エディタの延長線上の使用感でとっつきやすい, 導入簡単

VSCode

  • Eclipse無料, 動作はやや重め, 長年開発されているエディターなのでIT経験長い人ならほとんど使えて、参入障壁が低い, 日本語化がちょっと面倒だった気がする

Eclipse

  • IntelliJ IDEA有料, PHPStormなど言語に特化したバージョンがある, 一時期Web系の人は推していた, 最近はあまり話聞かない, VSCodeよりもかゆいところにプラグインやショートカットが手が届いていた気がする

IntelliJ

  • XcodeApple社が開発している。アプリ開発に特化したIDEなので必要があれば。

Xcode

個人的には VSCode がおすすめです。VSCodeでは、開発がしやすくなる様々なプラグインが提供されていて、開発効率が大きく上がりますので。


IDEを検討する頃には、JavascriptのUIを簡単に操作できるライブラリ

jQuery

などを利用して簡単なUIパーツも作ったりされることもあるでしょうか。


ここまで来ると、あとはもう合う合わないの世界ですので、試行錯誤しながらGoogle検索を利用して自分好みのより適した執筆方法を見つけていく事ができるはずです。

まとめ

テキストエディタから入り、徐々に高機能なエディタへツールを移行していきましょう。

分割してステップアップすることが挫折しないコツかと思います。


あとがき


なぜこの記事をまとめたかと言いますと、

まったくhtmlを書けないが、「プログラミングを始めたい」という方がたまにおられまして

、アドバイスを求められたときにまずどういったツール選定を行えばいいか、を私の目線からアドバイスできれば、といつも思っていました。ただそれは経験に頼っているもので、

口頭でなんとなく説明

していたのですよね。少しでも言語化してみよう、と思い本記事を書いてみました。


文中にもPerlの考え方について触れましたが、この記事が参考にならなくてもそれはそれでまったく問題ないことだと思ってます！

There's more than one way to do it(やり方は１つじゃない)

。


今後は本記事のアップデートもたまに行いながら、アドバイスしたいときにここで振り返ればと思います。（たまに記事のアップデートも行おうと思います。）

Discuss on Twitter