2025/5/26 「サーバーサイドプログラム基礎」の記録です。
講師：小谷先生
WordPressとは？
WordPressは、PHPで構築されたオープンソースのブログ／CMS（コンテンツ管理システム）です。
ブログだけでなく、企業サイトやECサイトなどさまざまなWebサイトに利用されており、日本国内におけるCMSのシェアは83.8％を誇ります。
Web上のテキストや画像を統合・管理・配信できるため、コンテンツ制作や管理を簡単に行えるツールとして多くの場面で活用されています。
ポートフォリオサイトを作る理由
ポートフォリオとは、自分の作品や実績をアピールするための“作品集”です。
就職活動やフリーランス営業の場面で、自分のスキル・考え方・世界観を伝える手段として重要な役割を果たします。
WordPressを活用してポートフォリオサイトを構築することで…
-
自分の成長記録として整理できる
-
デザイン・文章・機能すべてを自分でカスタマイズできる
-
実際に「Web制作ができる」という証明にもなる
という実践的なメリットがあります。
制作の目標：100ページ
6ヶ月間の訓練の中で、毎日の学びや制作を1ページずつ投稿していくことが推奨されています。
これにより、
-
自分が何を学んだか、どんな思考で取り組んだかを明確化
-
後から見返すことで復習ができる
-
投稿を通じてWordPressの使い方にも自然と慣れていける
という効果が期待できます。
WordPressの基本構造と用語解説
レンタルサーバーとは？
Webサイトを設置する“場所”を借りるサービスのこと。初心者はまずここからスタート。
-
サーバー ＝ 土地
-
Webサイト ＝ 家
-
ドメイン ＝ 住所
というイメージで理解できます。
MySQLとは？
WordPressの“情報保管庫”のような役割を持つデータベースです。
たとえば「記事のタイトル」「本文」「投稿日時」「カテゴリ」など、サイトに関するあらゆる情報がこの中に保存されています。
💡たとえ話：
MySQLは“図書館の本棚”のようなもの。記事という「本」が、整然と管理されていて、必要なときに取り出せる状態になっています。
PHPとは？
WordPressの“司令塔”のような役割を担うプログラミング言語です。
ユーザーがページを開いたとき、MySQLから必要な情報を取り出し、HTMLやCSSに指示を出してページを組み立てます。
💡たとえ話：
PHPは“図書館の司書”のような存在。「この記事を見せて」と言われたら、本棚（MySQL）から該当の本を探し出して、読みやすい形（HTML）にしてくれるのです。
テーマとは？
WordPressサイトのデザイン・構成・機能がセットになったテンプレートのこと。
テーマを変更するだけで、サイト全体の見た目や挙動を一括で変えることができます。
JavaScript と jQuery
JavaScript（JS）とは？
🔹 なにができるの？
HTMLやCSSだけでは表現できない、**「動きのある演出」や「ユーザーとのやりとり」**を実現するための言語です。
🔹 たとえばこんなことができる！
-
ボタンをクリックすると、文字や画像が切り替わる
-
スクロールするとアニメーションが発動する
-
モーダルウィンドウ（ポップアップ）を出す
-
入力フォームのチェック（空欄があると送信できない など）
jQuery（ジェイクエリ）とは？
🔹 JavaScriptの「便利セット」
JSで書くと長くなる処理を、簡単に短く書けるようにしたライブラリ（＝道具箱）です。
WordPressにも最初から読み込まれていることが多いので、すぐ使えます。
WordPressではどう使うの？
-
固定ページや投稿にJSやjQueryのコードを埋め込んで使う（プラグインやカスタムHTMLで）
-
動的なバナーやアニメーション、モーダル、タブ切り替えなどで活躍
-
テーマやプラグイン内部にもよく使われている（特にjQuery）
🎯 よくある使用シーン（WordPress）
| シーン | 使用例 |
|---|---|
| FAQの開閉ボタン | jQueryでクリック→回答がスライド表示 |
| スマホメニュー | JavaScriptで開閉処理 |
| スクロール演出 | JSやjQueryでアニメーション |
| フォームのチェック | JSで「未入力チェック」や「メール形式判定」 |
✨まとめ
| 比較項目 | JavaScript | jQuery |
|---|---|---|
| 種類 | 言語 | JSのライブラリ |
| 難易度 | やや高め | 比較的やさしい |
| 特徴 | 細かく制御できる | 簡潔で書きやすい |
| WordPressとの相性 | ◎ | ◎（特に古いテーマで） |
WordPressを使った仕事とは？
WordPressに関する仕事は、大きく3つのレベルに分類されます：
-
日々の運用・更新（投稿・固定ページの編集など）
-
デザイン変更（HTML/CSSのカスタマイズ）
-
システム開発含む高レベルな実装（PHPを用いた独自テーマや機能追加）
まずは【1】と【2】のスキル習得を目標に、実際に触れて慣れることが第一歩です。
今後に向けて：WordPressを理解するコツ
WordPressを深く理解するには、PHP・HTML・CSSそれぞれの役割と関係性をしっかり整理することがポイントです。
また、実際のコードを見たり書いたりする中で、「どう動いているのか」「どこを直せば良いか」を掴んでいく感覚も大切です。
WordPressは、使えば使うほど可能性が広がるツールです。
「作品を見せるだけの場」にとどまらず、自分の成長・実力を表現する場として活用していきましょう。
インターネットとサーバーの基礎をおさらい
インターネットとは、複数のネットワーク（家庭・学校・会社など）が互いにつながった、世界最大規模の情報網のことです。
このネットワークを介して、情報を送る側＝サーバー、情報を受け取る側＝クライアントという構造でデータのやりとりが行われています。
私たちが普段使っているパソコンやスマホは、クライアントにあたります。
サーバーサイドプログラムとは？
Webサイトの裏側（＝サーバー内部）で動くプログラムのことを「サーバーサイドプログラム」と呼びます。
たとえば、フォームの送信結果を処理したり、ログイン認証をしたりといった機能を担っています。
フロント（ユーザーが見る画面）から指示が送られると、それに応じてサーバー側で処理が行われ、結果が画面に反映されます。
この仕組みによって、WordPressなどのWebサービスは動いています。
フロントエンドとバックエンドの違い
フロントエンドとは
ユーザーが直接目にする部分の設計・開発を指します。
主な使用言語は以下のとおりです。
-
HTML（構造をつくる）
-
CSS（デザインを整える）
-
JavaScript（動きを加える）
バックエンドとは
サーバー側で動作し、データの処理や保存を担う仕組み。
使用される代表的な言語には以下があります。
-
PHP（WordPressでも使われる）
-
Python
-
Ruby
-
SQL（データベース操作）
WordPressは、主にPHPとMySQL（データベース）を組み合わせて構成されています。
レンタルサーバーとドメインの仕組み
レンタルサーバーとは
自分のWebサイトを公開するための「場所」のことです。
特徴としては…
-
サーバーは複数人で共有して使うことが多い（共用サーバー）
-
管理や保守は提供会社が行ってくれる
-
プランによって機能や容量に制限がある
コストを抑えて運用したい人には、共用レンタルサーバーは便利な選択肢です。
ドメインとは
Webサイトの「住所」にあたるものです。
たとえば「https://example.com」の「example.com」部分がドメインです。
サーバー＝土地、ドメイン＝住所、というイメージで捉えると理解しやすくなります。
メールサーバーとは？
多くのレンタルサーバーには、「Webサーバー」に加えて「メールサーバー」も用意されています。
これにより、自分のドメイン名を使ったメールアドレスが作成可能になります。
たとえば、WebサイトのURLが example.com の場合、
メールアドレスも info@example.com のように統一でき、信頼性やブランド感がアップします。
WordPressの簡単インストール機能とは？
現在ほとんどのレンタルサーバーでは、WordPressを数クリックで導入できる「簡単インストール機能」が備わっています。
これを使えば、難しい設定や手作業が不要で、すぐにブログやポートフォリオを始めることが可能です。
主なレンタルサーバー一覧（国内）
| サーバー名 | 提供会社 |
|---|---|
| エックスサーバー | エックスサーバー株式会社 |
| ConoHa WING | GMOインターネット株式会社 |
| お名前.comサーバー | GMOインターネット株式会社 |
| ロリポップ | GMOペパボ株式会社 |
| ヘテムル | GMOペパボ株式会社 |
| さくらのレンタルサーバ | さくらインターネット株式会社 |
| mixhost | アズポケット株式会社 |
| カラフルボックス | 株式会社カラフルラボ |
| スターサーバー | ネットオウル株式会社 |
ワンポイントアドバイス
WordPressのサイト制作や保守の仕事をするうえで、
「どのサーバーを使っているか？」「どのプランか？」の確認は最初に必須です。
理由は、使える機能や容量、設定の自由度がサーバーによって異なるためです。
あとから「この機能が使えない」となる前に、企画の段階で確認しておきましょう。
