【 WEB制作 】 実際に実務で役立った学習・体験　①言語系　FirE♯ 649

独学にてWEB制作を学び、フリーランスとして少し活動し、その後、広告会社へ入社しWEB事業部へ配属となりました。

そんな私が、勉強しておいてよかったと思うをまとめました。

◼️勉強しておいてよかったこと

① 言語系
HTML
CSS
SCSS
WordPress
PHP
jQuery

② ツール系
VScode
XD

③ 環境系
Mac
Google Chrome
local

④ 練習系
タイピング
ググり力
アウトプット

⑤ サービス系
BASE
Shopify
LINE(PC版)

ざっと思うつくまま上げるとこのようなことが勉強、体験しておいてよかったことです。

今回は①の言語系について書きます。

① 言語系

HTML
CSS
SCSS
WordPress
PHP
jQuery

■ HTML・CSS

基本の基本の言語
これができてスタート地点
でも奥は深い

WEB制作の勉強といえばここからと言う基本の二つです。

プログラミングの勉強してます！っていう人に詳しく聞いてみると、HTML・CSSと言っちゃう人がいますが、これはやめましょう。

大きく括ればプログラミングとも言えますが、異なります。

PHPやJavaScriptやPythonなどのプログラミング言語をやってみればわかりますが、考え方が違いますし、難易度も全く違います。

HTMLはマークアップ言語、CSSはスタイルシート言語です。

この２つの言語を使って、WEBサイトの見た目をデザイン通りの見た目にコーディングできることが、まずWEB制作のスタート地点に立った状態です。

■ SCSS

CSSを拡張して扱いやすくしたスタイルシート

CSSがある程度書けるようになったら、絶対に身につけておくべきものがSCSSです。

その便利さ、導入方法はこちらで解説しています。

実務の現場でもSCSSで書いています。

知らないとドキドキしますから、確実に身につけておきましょう。

■ WordPress

WEBサイトの作成やブログの作成などができるCMS(Contents Management System)
世界中の全ウェブサイトの43.1%がWordPressで構築されている

実務では必須となるCMSです。

HTML、CSSで書いたWEBサイトを、WordPress化するという流れで構築することもあれば、いきなりWordPress上で動かしながら書くと言う方法もあります。

WordPressには、有料・無料のWEBサイトのテンプレートが多数用意されています。このテンプレートを使えば、誰でもWEBサイトを運用できる・・・とされていますが、理想通りとはいきません。

あくまでもテンプレートですし、それを管理する管理画面は直感的に扱えるものではなく、一定の知識が必要です。

WordPressはPHPというプログラミング言語で作られていますから、
xxxx.htmlではなく、xxxx.phpというファイルを作り制作をしていきます。
PHPはサーバーで動く言語です。
HTMLでは実現できない動的サイトを構築でいます。

WordPressは仕組みです。
その仕組みに対応させて、ファイル構成、ファイル名、独自のコードの書き方などなど、ルールがあります。

このルールを知り、仕組みを理解することがWordPressの学習といえます。

こちらで導入方法から解説しています。
順番にやっていけば簡単に学習できます。

■ PHP

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語。
MySQLなどのデータベースとの連携が容易
WordPressなどWebアプリケーションの開発にもよく使われる

WordPressはPHPで作られています。

PHPはサーバー上で動く点が、HTMLとは全く違う点です。

簡単にいうと、PHPはサーバーで動き、サーバーのデータベースから、情報を取ってきて、これを変換してWEBサイトに表示するというようなことできます。

例えば、Instagramの画面は、Aさんがログインしているホーム画面には、
Aさんのプロフィール、投稿画像、フォロワー数、フォロー数などが表示されます。
これは、Aさんという箱に入っているそれぞれの情報を、取ってきて、指定の場所に表示させているからです。

Bさんがログインすれば、PHPが、Bさんのデータをサーバーのデータベースから、取ってきて、そのデータを画面を表示します。

このように、状況に応じて、違う情報を取得し、表示するようなサイトを動的サイトと呼びます。

この仕組みがなければ、Instagramは、ユーザー全員の個々のページを表示するファイルをユーザー数分、生成する必要があります。

PHPの仕組みは
どういうことか言うと、

お弁当箱があって、この枠は"ご飯"、この枠は"焼物"、この枠は"野菜"、この枠は"お肉"などと決まっていて、
この"ご飯"は、
Aさんのデータベースには、"赤飯" が入っている
Bさんのデータベースでは"ふりかけご飯" が入っている
なので、
Aさんのお弁当のご飯の枠には、"赤飯"が盛り付けられる
Bさんのお弁当のご飯の枠には、"ふりかけご飯"が盛り付けれらる
ということです。

PHPは、指定された場所に、指定されたものを盛り付けてくれる役割をはたします。

つまり、お弁当箱は、ひとつ作ればよく、
中身をユーザーに応じてデータベースから取ってくればいいことになります。

作るものはひとつで、
あとはデータベースにデータを保存するだけで、完成するのです。

PHPの学習はこちらから複数回に渡って記事があります。
正直難しいです。
WEBサイト制作においては、知っている程度でも問題ありません。

■ jQuery

JavaScriptのライブラリ

JavaScriptはプログラミング言語です。

初心者にもわかりやすいとされていますが、HTML・CSSと比べれば難しい言語です。

しかし、WEBサイトにアニメーションをつけたりするのときや、
動作に条件をつけたい時などに、JavaScriptが必要になります。

そんなJavaScriptをわかりやすくしたのが、jQueryです。

jQueryで実装できる主な機能は、
ハンバーガーメニュー
コンテンツが見えたらふわっと表示する
一定の位置までスクロールしたら○○する

などです。

やりたいことで検索すれば情報は豊富に出てきます。

一度実装できれば、あとはその都度カスタマイズして使えば良いので、自分のライブラリを作って貯めていきましょう。

実務で確実に役に立ちます。

【 まとめ 】

実務で役出す学習・体験　①言語系を書きました。

PHP以外は、必須です。

言語系は、とにかく書くことで慣れるしかありません。

とにかくエディターを開いて、書いて、トライアンドエラーを最速で繰り返す！

これのみです。

「泳ぎ方」の本を読んでいても、泳げるようになりません。
プールに入ることが、泳げるようになる第一歩です。
まずは、水に入りましょう！