![見出し画像](https://assets.st-note.com/production/uploads/images/96119759/rectangle_large_type_2_60f13a437bf8bfa36c70d65be96e70bc.jpeg?width=800)
【 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はスタイルシート言語です。
この2つの言語を使って、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以外は、必須です。
言語系は、とにかく書くことで慣れるしかありません。
とにかくエディターを開いて、書いて、トライアンドエラーを最速で繰り返す!
これのみです。
「泳ぎ方」の本を読んでいても、泳げるようになりません。
プールに入ることが、泳げるようになる第一歩です。
まずは、水に入りましょう!
この記事が気に入ったらサポートをしてみませんか?