HTML5、CSS3、PHP、JAVA、VBA、CISCO、Juniper、Photoshop等… フロントエンドからバックエンドまで一通り経験したフルスタックエンジニアです。 得意とするのはCMSであるWordpressを使ったWeb制作です。 ●Wordpressって何? ●Wordpress使ってみたいけど何から始めればいいの? みたいな方も ●Wordpressのテンプレート使ってるんだけどここをこうしたい… というカスタマイズしたい方も 是非一度ご相談ください
コーディングとは?
——コーディングとは、どんなことをするのでしょうか。 コーディングとは、マークアップ言語やプログラミング言語を使ってソースコードを作成することをいいます。 ——コーディングとプログラミングはどう違うのでしょうか。 プログラミングは、PCや機械に指示を与えるためのプログラムを作成する作業です。コーディングはプログラミングの中で「ソースコードを作成する」という一部の作業を担っています。 これをWeb制作の例で説明してみましょう。Web制作には、フロントエンドとバックエンドという2つの開発過程が存在します。 フロントエンドは、私たちがWebサイトを見たときに実際に目に見える部分をいいます。たとえば、ホームページの色の配色だったり、ボタンの形だったりといった画面の表示ですね。一方のバックエンドとは、今見ているページから遷移させたり、会員登録画面で登録したデータをサーバーに移動させるといった動きを司る部分です。 このとき、フロントエンド開発で用いられるのが、HTMLやCSSといった「マークアップ言語」、バックエンド開発で用いられるのが、PHPといった「プログラミング言語」です。 一般的にコーディングといえば、Webデザイナーが作ったデザインをブラウザ上に表示させるために、HTMLやCSSを使ってコードを書く作業を指します。
コーディングに必要なスキルは?
■コーディングをするには目的に合わせた言語の知識が必要
——コーダーになるにはどんなスキルが必要ですか? 何をコーディングするのかという目的にあわせた言語の知識を習得するとよいでしょう。 たとえば、Webサイトの制作をするなら、HTMLやCSSといったマークアップ言語の知識が必要です。また、WebサイトをCMS(Contents Management System:コンテンツ・マネジメント・システム)で制作するなら、各CMSで使われているプログラミング言語も覚えるとよいと思います。CMSの中でも人気のWordPressは、PHPというプログラミング言語が用いられています。 Web制作ではなく、たとえば車両搭載機器などの組み込み系のコーディングには、C言語やC++といったプログラミング言語の知識が必要となります。最近ではAIの技術開発の現場で、Pythonなどの言語も人気となっています。 これから自分が携わる開発環境ではどんな言語が用いられているのか、何をしていきたいのか、目的にあわせて必要な言語を学びましょう。
■将来性が高い「コーダー」という仕事
——コーディングができると、どんな仕事がありますか? HTMLやCSSのスキルがあればWeb制作の現場で活躍することができます。また、プログラミング言語のスキルがあれば企業のプロジェクトに参加して、プロジェクトマネージャーの指示のもとコーディングをするといった仕事があります。 最近では新型コロナウイルスの影響で在宅での業務を求められることが増えています。そうした中で、今後は企業に所属するのではなく、フリーランスという働き方をするコーダーが増えていくのは間違いないと考えています。 Web制作の需要は今後も衰えませんので、将来性は高いといえるでしょう。ただ、WordPressなど便利なCMSが登場し、HTMLやCSSの知識がない人でも簡単にホームページを作ることができるようになりました。コーダーは今後、Web制作に対する幅広い知識が必要とされるのではないかと思っています。
コーディングの進め方
——コーディングは、実際にはどのように進めていくのでしょうか。Web制作の例で教えてください。 Web制作の現場では、Webデザイナーが作ってくれたデザインをもとに、1ピクセルごとに文字や画像サイズ、配置する場所を決めてコーディングしていきます。 まずHTMLを使って、全体のレイアウトをコーディングしていきます。レイアウトができたら、ページ上に表示したいテキストや画像を入れます。 次に、HTMLをCSSでスタイリングしていきます。背景色やヘッダー、フッターの幅、フォントなどをコーディングすることで、私たちがふだん見ているようなWebサイトの表示ができあがっていきます。 以前はWebサイトの制作に、AdobeのWebデザインソフト「Dreamweaver」などを使っていたこともありましたが、最近では「WordPress」などのCMSが用いられることが多いですね。
WordPressにはテンプレートが用意されていて、CSSを使ってこれを装飾していくこともできます。また、用意されているテンプレートを使わずに、デザイナーさんが作ったデザインをWordPress上に独自にコーディングしていくこともできます。
コーディングの学習方法
■コーディングの学習にはWeb上のツールをうまく活用して
——Web制作のコーダーになりたいと思ったら、どんなことから学べばいいでしょうか。 HTMLとCSSの基礎ですね。コーディングをしていくと、色がついたり形が変わったり、目で見て変化を感じられるので、わかりやすく楽しく学べると思います。 PHPなどプログラミング言語に関しても、以前に比べたら手軽に学べるようになりました。昔は自分のPCで開発環境を作らなければなりませんでしたが、今はブラウザ上で簡単にプログラムを動かせるサイトが登場しています。そういったサイトを利用すると、気軽にプログラミングに触れられると思います。 ——コーディングは独学でも学べるのでしょうか。 コーディングの勉強についてGoogleで検索すればさまざまな情報が得られるので、独学での習得も可能だと思います。ただ、漠然と勉強していてもあまり身につきません。 たとえば、WordPressを使えばHTMLやCSS、PHPの知識が必要になるので、何かしら作りながら目的を持って勉強したほうがよいと思います。実際に手を動かして、成果物を確認しながら学習を進めたほうが、自分自身の成長にもつながります。 ——コーディングの学習におすすめのサイトや書籍などはありますか? 「glot.io」というサイトがおすすめです。PC上にプログラミングの開発環境を作らなくても、ブラウザ上でコーディングをしてプログラムを実行できるサイトです。プログラミングをする際、PCに開発環境を作るだけで止まってしまうこともあるので、これなら初心者でも簡単にコーディングの勉強をすることができます。
■コードは丸覚えするのではなく、理論を抑えるところから
——これからコーディングの勉強をしたいという人にアドバイスをお願いします。 コードは最初から丸覚えするのではなくて、「こういうふうに書かれているからこういう表示になるんだ、こういう動きになるんだ」ということを理解するところから始めてみるとよいでしょう。 プログラミングやコーディングはプログラマーだけのものではありません。一般業務で日々のルーチンとなっているExcelの入力業務も、VBAやマクロを使って自動化することができます。 「今やっている作業をワンクリックでできるようにしたい」といった、自分が楽をするためにがんばるというモチベーションで勉強を進めていけば、楽しくできるのではないでしょうか。
関連記事を見る
ゆうさんのプロフィールを見る
ゆうさんにWordPressでのWeb制作について相談する