プログラミング

RubyとPHPの共通点と違いについて

プログラミングを学ぶにあたって、まずどの言語を学ぶか、というのに迷われる方も多いと思います。しかし、意外と言語間の共通点は多く、特にRubyとPHPは、共に比較されることが多い言語です。

今回は、これからプログラミングを学ぼうと考えていらっしゃる方へ、結論、「どちらからでも良いよ!」という点を、お伝えできればと思います。

Rubyとは

Rubyの主な特徴は、以下の通りです。

  • 1993年に日本で誕生
  • オブジェクト指向
  • スクリプト言語
  • Webサービス開発向け
  • 可読性重視
    • 開発がしやすい
    • 初心者でも理解しやすい
  • 「Ruby on Rails」というフレームワークを使用するのが主流で、単なるWebページだけでなく、Webシステムを開発することができる

オブジェクト指向とは

オブジェクト指向を一言で説明すると、いろんな処理の塊を先に作って、それをプログラミングに入れ込む考え方です。

図にするとこんな感じです。

わかりやすさ重視のため、厳密には違うかもしれません。ご容赦ください。

詳しい説明が載っている記事を貼っておくので、興味のある方はぜひご覧ください。

初心者向けに徹底解説!オブジェクト指向とは?

https://eng-entrance.com/what-oop

スクリプト言語とは

スクリプト言語というのは、コンピューターの処理が簡単な言葉でまとめられた言語という意味です。

例えば、「1 + 1」という処理をコンピューターにさせるには、コンピューターに「1 + 1」をすることを命令しなければなりませんが、スクリプトによって、予め「1 + 1」という処理を「a」と定義することにより、コンピューターに「a」と入力するだけで「1 + 1」という処理をしてくれる、といった具合です。

つまり、あまり難しい処理の書き方がわからなくても、実際に処理をするためのスクリプトを知っていれば、処理ができてしまう、ということになります。

つまり、Rubyはとても処理がわかりやすいタイプの言語である、といえます。

PHPとは

続いてPHPの特徴を見ていきましょう。PHPの特徴は以下の通りです。

  • 1995年に誕生
  • オブジェクト指向
  • スクリプト言語
  • Webサービス開発に特化
  • データベースと連携しやすい
  • フレームワークやライブラリが豊富

RubyとPHPの共通点

それぞれの特徴リストより、共通しているものが複数あります。

  • オブジェクト指向
  • スクリプト言語
  • Webサービス開発

この辺りが共通点となります。正直、ほぼ共通しています。

RubyとPHPの違い

逆に異なる点といえば、開発方法になります。

Rubyの場合は、代表的なフレームワークであるRuby on Rails(よくRailsと省略されます)を使用するケースが多いです。このフレームワークは、処理の役割ごとに違うファイルにコードを書き込んでいくスタイルなので、チーム開発をしたりする際にとても向いています。

したがって、将来的にチームで開発をしてみたいような方は、まずはRubyを習得すると良いと思います。

対してPHPは、市場全体で見ると、Rubyよりも幅広く使用されている言語です。また、処理自体は、HTMLというWebサイトを表示させるファイルに直接書き込むことができるので、コードを見たときに、処理がわかりやすいといえるかもしれません。Ruby(主にRails)もわかりにくいというわけではないですが、比較すると、PHPに軍配が上がると思います。

結論:好きな方を学ぼう

RubyもPHPも、初心者が理解しやすい言語といえます。現在は無料のプログラミング学習サービスも複数存在しているので、プログラミング学習を始めてみてはいかがでしょうか?

無料プログラミング学習サービスの一例

・Progate(https://prog-8.com/

・ドットインストール(https://dotinstall.com/

【HTML5入門】2-1 段落と見出し

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLファイルにおいて良く使われるタグについて、4つのタグをご紹介しました。

今回は、実際の文章を書く際に必要になる、「段落」や「見出し」を表すタグについて、見ていきましょう。

「段落」に使われるタグ

まずは、段落に使われるタグからご紹介していきます。

pタグ

段落に使われるタグは、「pタグ」と呼ばれます。pはparagraph(パラグラフ)の略で、段落を意味する単語です。

divタグやspanタグと同じように閉じタグを用い、<p>〜</p>とすることで、一段落を構成します。

「見出し」に使われるタグ

次に、見出しに使われるタグをご紹介します。

h1~h6タグ

見出しに使われるタグは、h1, h2, h3, h4, h5, h6の6段階あります。hはheadline(ヘッドライン)の略で、本で言うところの「章」や「節」を意味します。

こちらも、閉じタグを用います。

ダミー文章に使われる「Lorem Ipsum」

HTMLにおいては、実際の記述をWebページで確認したい時に、サンプルとなる文章があった方がイメージしやすい場合が沢山あります。そういった場合のために、「Lorem Ipsum(ローレンイプサム)」というタイトルの無意味な文章を差し込むことがあります。

具体的には、下記のような文章となります。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wikipedia「Lorem Ipsum」より引用(https://ja.wikipedia.org/wiki/Lorem_ipsum

また、Lorem Ipsumを略して「Lipsum(リプサム)」と呼ばれることもあります。

この文章自体は、どんな言語においても意味を持たないことがメリットとされており、意味を考えてしまわずにWebページのデザインのチェックだけしたいような場合に使用されることの多い文章です。

段落と見出しをHTMLに記述してみよう

では、実際に2つのタグを用いて、HTMLファイルに段落と見出しを記述していきましょう。

最初のHTMLは、以下の状態にしておきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
  </body>
</html>

段落を追加してみよう

早速、bodyタグの中にpタグを入れて、段落を作ってみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
    </p>
  </body>
</html>

次に、pタグの中に、先ほどのLorem Ipsumの文章をペーストしていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

ここまでできたら、実際にこのHTMLファイルをWebブラウザで開いてみましょう。すると以下のようになることが確認できると思います。

段落を複数にしてみよう

では次に、段落が複数になった場合にWebブラウザ上でどのような表示になるのかをみていきましょう。pタグ全体を2回ほどコピー&ペーストして、合計3段落のLorem Ipsumが記述されるようにします。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで確認すると、下記画像のようになると思います。

同じ文章が3回表示されていることがわかりますね。そして、段落と段落の間にスペースがあることも確認できます。

このスペースは、pタグ自体による効果ではなく、Webブラウザの初期設定に基づいているものです。本記事では、Google Chromeを使用しています。

見出しを入れてみよう

それでは次に、見出しについてHTMLファイルに記述をしていくことにしましょう。

まずは、一番大きい見出し「h1」を使ってみたいと思います。h1タグを使って、「これはh1です」という文章を表示させてみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで見てみると、下記画像のようになると思います。

一番上に、大きく「これはh1です」と表示されているのがわかると思います。これもWebブラウザの初期設定で、見出しが段落よりも目立つ表示になるようになっています。

6種類の見出しで見え方はどう変わるのか

では、h2~h6も記述して、Webブラウザで表示させた時にどのように表示が変わるのかを確認していきましょう。

h1タグの下に、h2~h6タグを記述してみます。コードは下記となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

上記のコードをWebブラウザで確認すると、以下の画像のようになります。

1から6にかけて、どんどんサイズが小さくなっているのがわかりますね。これにより、ユーザーはコードを見なくても、視覚的に見出しの構造を把握することが可能になります。

見出しのルール

基本的に、h1タグの次にはh2タグがきます。同じようにh2タグの次にはh3タグがきます。

本に例えると、h1タグが「本の題名」、h2タグが「章」、h3タグが「節」などと対応するようなイメージです。

「章」がないところに急に「節」がきたら、違和感がありますよね。それと同じような形で、見出しの構造を考えるようにすればOKです。

おわりに

今回は、HTMLファイルに使用する「段落」と「見出し」に使うタグと、その使い方について学んできました。今回学んだことは、HTMLファイルを作るときだけでなく、本記事のようなブログ記事を書いたりする際にも、身につけておくと役に立つ技術ですので、ぜひマスターしてみてください。

次の記事はこちら

MVCとは?概念や長所・短所について解説

みなさん、こんにちは。
フリーランスエンジニアのRyuです(言ってみたかっただけ)。

今日は、プログラミングをする上において必要になる「MVC」という概念について解説していきます。

アルファベットだと何だかとっつきにくい気がしてしまいますが、プログラミングについて何もわからない方でも理解できるように平易な文章や図を使っていますので、ぜひご覧ください。

MVCの概念

MVCは、プログラミング全体の可読性を高めるための整理術のようなもので、設計を担当する「Model(モデル)」、表示を担当する「View(ビュー)」、そしてこの2つの橋渡しをし、制御する「Controller(コントローラ)」それぞれの頭文字を取ったものです。

改めて箇条書きにすると、以下のようになります。

MVCの中身

  • Model(モデル):表示や入力に関連しない処理。システムの設計や、機能をどうするかを記述するファイル。
  • View(ビュー):表示や入力に関連する処理を記述するファイル。
  • Controller(コントローラー):ModelとViewの橋渡し役をし、制御する役割を担うファイル。

これらの説明を簡単な図にすると、下図のようになります。

MVCを使う長所(メリット)

次に、MVCを使うメリットについては、紹介しきれないほど沢山あるのですが、ここでは代表的なものを2点ご紹介していきます。

  1. 整理された分類が可能である
  2. 分業がしやすい

順番に解説していきます。

整理された分類が可能である

MVCの概念を取り入れていれば、ある程度整った形でプログラミングをすることができます。

ただ雑然とコードを並べでいたのでは、それを作った人にしかわからないプログラムが完成してしまいます。

そこで、ある程度最初からファイルに役割を与えておくことによって、誰が見ても何となくプログラムの役割が理解できるのに加えて、作者も管理やしやすくなります。

分業がしやすい

上記のメリットと被る部分がありますが、誰が見ても何となく各ファイルのプログラムの役割が理解できるということは、別々の作業を同時に行うことができることを意味します。

例えば、Webデザイナーがフロントエンド業務(Viewファイルのコーディング等)をしているのと同時に、Webエンジニアがサーバーサイド業務(Controllerファイル、Modelファイルのコーディング等)を進めることができることになります。

MVCの短所(デメリット)

こんなに便利で良いところしかなさそうなMVCにも、デメリットは存在します。

それは、ModelとControllerの記述に正解がないこと。

例えば、入れたい処理が決まっていたとしても、それをModelに記述すべきか、Controllerに記述すべきかは、エンジニアの中でも意見が分かれることがあります。

これを解決する方法として、PMやMVPなど、MVCとは違った概念がいくつかありますが、それは他の記事にお譲りします。

まとめ

今回はMVCの基礎について簡単にまとめてみました。

概念は理解できたつもりでも、いざ実際にコーディングをしてみると、案外できなかったりするものです。

まずは沢山コードを書いて、少しずつ、理解していきましょう。