VSCode ＆ 仮想サーバインストール（XAMMP/MAMP）

VSCodeとは？

VScodeとはプログラムのファイルを作成・編集するためのアプリケーションソフトウェア（エディター）です。
要するに、コードはWordやメモ帳に記載するのではなくエディターに記載をしていきます。

主なエディターには下記のようなものがあります。

  • Visual Studio Code（VSCやVSCodeと略されたりします）
  • phpStorm
  • Eclipse

VSCodeをインストールしよう！

VSCodeをダウンロードページからダウンロードしてインストールしてください。

VSCodeは、いくつものプラグイン1が用意されています。
VSCode導入プラグインから下記2つを導入してみましょう。

  • Japanese Language Pack for Visual Studio Code
    →日本語に変換してくれます
  • Live Server
    →ブラウザをプレビューしてくれます

プラグイン設定方法はこちら！

サーバーとは？

データベースやサーバーサイドの言語（PHP・Javaなど）を動かすためには、サーバーが必要になります。

サーバーとは…？
利用者の要求に応じたデータを返す、コンピューターやプログラムのことです。

例えば、皆さんがSNSアプリに新規会員登録をする際に、
・名前
・メールアドレス
・電話番号
・パスワード
等を打ち込むと思います。
この皆さんが打ち込だ個人情報は、全て「データベース」に格納されています。

この皆さんの個人情報が格納されているデータベースの保管場所が「サーバー」です。
（皆さんのPCとサーバとのやり取りをする時に必要なのがSQLになります。）

仮想サーバーとは？

仮想サーバを分かりやすく説明するために、
対比である物理サーバーと比較して説明します。

物理サーバーとは、
その名の通り、物理的＝実体のあるサーバーです。
物理サーバーは価格も高く、サーバーを置くための場所代もかかり、ネット回線も引かないといけません。


一方仮想サーバーとは、
その名の通り、仮想＝実体がなく、インターネット上にサーバーを立てています。
そのため、個人開発でしようする程度であれば、無料で使用可能ですし、
サーバーを置く場所代もかからず、PC内の設定のみで使用可能です。


（それぞれのメリットでメリットはありますがここでは割愛します。）

そしてこれからインストールするXAMPP/MAMPは「仮想サーバー」といい、
完全に無償でMySQL・ MariaDB・PHP、および Perl といったデータベースや言語を簡単にインストールできる Apache ディストリビューションです。
この後、MySQLの学習を行いますが、MySQL＝データーベースのためサーバーを立てる必要があります。

次にXAMPP・MAMPそれぞれのインストール方法になりますが、
ご自身のPCが、
・Windowsの場合は、XAMPPの説明
・MacBookの場合は、MAMPの説明
を元にインストールをしましょう。

XAMMPインストール方法（Windowsユーザ）

Windows使用の方はXAMPPをインストールしてください。

ダウンロードサイトはこちら→XAMPP公式

インストールしていくと以下のコントロールパネルが表示されます。

詳しいインストール方法は、こちらにあります。XAMMPの使い方

Apach MySQLの実行

pache,MySQL,FileZilaの「Start」ボタンを押下する。起動した後、http://localhost/をブラウザでURLを入力して確認してください。

※補足：最近のサーバ環境はApacheよりnginxを使われることが多いです。なので、nginxがどういったものか知っておきましょう。

コンテンツがブラウザに表示されます。localhostは、PC内の現在使用しているシステムを示しています。自分自身のホスト名を示しています。

自動起動させるなどを行いたい場合は、XAMPPの使い方を参考にしてください。

PHPを確認する

「PHPInfo」メニューをクリックすると
下記画像が表示されているか確認してください。
（今は使用しませんが、今後PHP学習を行うため確認）

XAMPPが正しく動作しているかブラウザで確認

GoogleChromeを開き、http://localhost/　と入力したときに、
下記の画像が表示されればXAMPPは問題なく動作しています。

MAMPインストール方法（MacBookユーザー）

MacBook使用の方は下記サイトを参考に、MAMPのインストールをしてください。

なおMAMPインストールは、
公式サイト遷移後「Free install」選択し、
→Appleの方は「MAMP＆MAMP PRO 6.8(Apple)」を選択してインストール
→Intel使用の方は「MAMP＆MAMP PRO 6.8(Intel)」を選択してインストール
（自身がどちらをしようしているかは「システム環境設定」から確認できます。）

MAMPのインストール方法

PHPを確認する

XAMPP/MAMPのインストールが終わったら、
「Start」ボタンを押下しMAMPを起動させます。
Startボタンが「Stop」となったら、MAMP自体は正常に起動しています。
その後、飛行機の「Web Start」ボタンを押下します。

公式サイトに遷移後、
「PHP > phpinfo」を押下し、下記画像が表示されているか確認してください。
（今は使用しませんが、今後PHP学習を行うため確認）

※個人情報を含むのため黒塗りにしています

MAMPが正しく動作しているかブラウザで確認

GoogleChromeを開き、localhost:8888　と入力したときに、
下記の画像が表示されればXAMPPは問題なく動作しています。

課題

・XAMPPが正しく動作しているかブラウザで確認
もしくは
・MAMPが正しく動作しているかブラウザで確認
のセクションにて、
・http://localhost/
もしくは
・localhost:8888
を実行した時の画面のスクリーンショットを撮って、
各自のボックスで提出をお願いいたします。

  1. WebブラウザやCMSなどに機能を追加し、使いやすくするための拡張機能のこと。 ↩︎

コメント