【30代後半 転職】未経験からWebコーダーになるまで勉強した言語について

People illustrations by Storyset

こんにちはひげぶろです。

未経験からWeb業界への転職を考えた時に、スキルを身につけよう！となっても勉強することがたくさんありすぎてどこから手をつけたら良いかわからないですよね。

私自身、高年齢＆未経験のスタートで学び始めは本当に苦労しました（今もですが。。）
しかし、勉強を継続してきたことで現在ではWebコーダーとして転職に成功し、副業までいただけるようになりました。

この実体験を基に、転職するまでに勉強した言語についてご紹介します。

ご紹介する内容は実際に実務で毎日触っていますので、取り組んで間違いないものです。

どの言語を学べば良いんだろう？

実務で必要な言語を勉強したい

こういった悩みを解決します

ひげぶろ

どの言語も丸暗記する必要はありません

転職までに勉強した言語

実際に未経験から転職するまでに習得した言語は以下の通りです。

最低限上記だけでも大丈夫ですが、付随して以下のものも取り組んでおくとよりベターです。

これらの言語を習得する理由は、

WebコーダーはWebデザイナーが制作したデザインを忠実にWeb上で表現することが仕事だからです。

上記でご紹介した言語は、表現する上でどれも必ず使用する言語となります。

調理師で言えばレシピに近いかと思います。それを扱えないと表現できないですよね？

コーダーも言語を扱えないと表現できません。

業務として行うのであればどの言語も欠かせないということを覚えておいてください。

それぞれの言語の特徴

なぜ先程ご紹介した言語が必要なのか？それはそれぞれの言語の特徴を知ることで理解できると思います。

HTML & CSS

HTMLはマークアップ言語と呼ばれていまして、Webサイトに必要な要素（文字や画像など）を記述し、サイトの構造を組んでいく役割を持っています。
主に裏側で活躍している言語でして、ブラウザが人間に見やすいように変換していますが、実は本当のWebサイトの正体はこういったコードの羅列となっています。

   <div class="title">
　　　　<h1>ここにタイトルが入ります。</h1>
   </div>

構造を組んでいくHTMLに対して、CSSは装飾を担当する言語です。
例えばテキストの色やサイズを変えたり、画像やボタンのサイズ・位置を変更したりなど、実際に見える様々な範囲を整えることができます。

.title{
 font-size:12px; //文字の大きさが12pxになる
 font-color:red; //文字の色が赤になる
}

Javascript

JavascriptはWebサイト上に「動き」や任意のタイミングで「変更」をつけ加えることができます。

非常に多くのことが実現できる優秀すぎる言語ですが、書ききれないので簡単にご紹介します。

簡単な例えですと、ふわっと画像や文字が現れる演出や、ボタンを押したらテキストの文字が大きくなる。ということができます。

こういった技術を応用してWebサイト上のリッチな表現や複雑な処理を行います。

以下 Javascriptのコーディング例です。

document.addEventListener('DOMContentLoaded',()=>{
     const el = document.querySelector('.title');
     const str = el.innerHTML.trim();

     let test = '';

     for(let c of str ){
         test += `<span class="red">${c}</span>`;
     };

     el.innerHTML = test;

 });

※初心者のうちはDOM操作、オブジェクトの理解を優先して学習しましょう

JQuery

JqueryはJavascriptライブラリの1つで、Javascriptを簡潔に記述できるようにしたものです。

ライブラリとは、利用したい機能やプログラムがパッケージされているものです。
これがあることで1から開発する手間がなくなり、コードの記述も簡略化されます。
Javascriptにはこういったライブラリが多数存在します。

Javascriptは学習コストが高いので、比較的簡単に実装できるJQueryは人気の言語の1つです。

中級者になってくると使用頻度は減りますが、まだまだ現場でもよく見かける言語です。初心者のうちはJQueryで始めて、Javascriptに慣れていくことも良いかもしれません。

以下JQueryのコーディング例です。

$(window).scroll(function(){
    $('.fadeIn').each(function(){
        const position = $(this).offset().top;
        const scroll = $(window).scrollTop();
        const height = $(window).height();

        if(scroll > position - height){
            $(this).addClass('move');
        }
    });
});

WordPress関数

Webサイト制作を行う上で、CMSの利用は確実に携わることになります。

ざっくりとCMSの説明ですが、

このCMSというものはWordpressというものが有名でして、国産ではa-blogというものもあります。

当ブログもWordpressというCMSを使用しています。

恐らくここで、

あれ？知識がなくても行えるなら制作会社が関わる意味あるの？

と思う方もいるかもしれませんが、補足として簡単にご説明します。

確かにWordpressは簡単にWebサイトを構築し、自分が載せたいコンテンツ管理も楽に行えます。

とは言え、これはあくまでデフォルトの仕様のままであればです。

Webサイト内のデザインを凝ったものにしたかったり、情報の整理を制御したい場合等イレギュラーなことは多々あります。

デフォルトではその要望を叶えることは難しくそれなりの知識が必要です。

制作会社はクライアントの要望に対してベストな取捨選択とそれに併せたスキルで対応します。

「知識がなくても簡単に行える」という謳い文句は人それぞれ知識の範囲も違うので、ちょっと語弊があるなとは感じます。

脱線しました、話を戻します。

ウェブの43% が WordPress で構築されています。

wordpress公式より

公式のキャッチフレーズにもある通り、2022年2月現在ではWordpressが圧倒的なシェアを誇っています。

制作の案件でWordpressに触れる機会は多々ありますので、Wordpress関数は習得必須となります。

WordPress関数はWordpressでしか使用しないPHPで組まれた関数です。PHP言語ではありますが、Wordpress関数という呼び方で差別化しています。

ひげぶろ

同じPHPでもWordpress関数は比較的理解しやすいです

PHP

Javascript同様、PHPはプログラミング言語の１種でして、Wordpressはphpで組まれているので情報の制御等、Webサイトをカスタマイズする際には非常によく使います。

そういった理由からWordpressを扱う上でphpの理解は避けて通れないのですが、難しいことを覚えていく必要はありません。

ある程度決まった法則みたいなものがあるので、触れていくうちに慣れてくると思います。

間違っても最初から暗記しようとしないでください。

SassよりCSS設計の方が大事

よりベターな取り組みとして、SassとCSS設計の勉強を挙げました。こちらは優先度で言えば上記でご紹介したものよりは低いのですが、SassはともかくCSS設計に関しては、ある程度他の理解が進んだら早めに取り掛かることをおすすめします。

Sass

SassはCSSを効率よく記述しコードのメンテナス及び管理に優れたメタ言語となります。

メタ言語とはざっくり言えば、言語にさらに拡張性を持たせることができる言語という役割を持っています。

Sassの場合、CSSを良い感じに管理＆制御できる言語となります。

使用するには環境を整える必要がありますので、こちらはまた後ほど詳しくご紹介する記事を書いていきたいと思います。

初心者にとって優先度は低めですので後回しで大丈夫です。現時点ではこういったものもあるくらいに覚えておいてください。

CSS設計

CSS設計は個人的には必修項目だと思っていますが、奥が深いのでWebサイト制作の全体像が掴めたら是非取り組んでほしい項目です。

なぜなら、サイト制作を行う上で恐らく１番膨大なコード量になるCSSの管理・肥大化を制御するといった大変重要な役割を担うからです。

CSSは簡単に実装できる手軽さから、注意しないとコード量が肥大化しやすく上書きされやすい言語でもあります。

CSS設計ではルールを設け、複数人で管理する場合にも素早くアジャストできるよう設計されていますので、CSS設計を学ぶことで崩壊しにくい、堅牢なCSSを構築できます。

この辺りは是非学んでほしいところですし、書類選考では見られる部分でもあります。

今回ご紹介した言語を学びましたらCSS設計に早めに取り組むことをお勧めします。

CSS設計は奥深いので、また別記事で詳しく書きたいと思います。

まとめ

未経験からWebコーダーになるまで勉強した言語と各言語についての特性をご紹介しました。

各言語の特性を知っていくことでWebコーダーに必要言語だということがわかってもらえたかと思います。

改めて振り返ります。僕自身Webコーダーになるまでに以下の内容を勉強しました。

また優先度は上記より低いですが、こちらも学習しておくとよりベターです。
特にCSS設計は上記の言語を理解したら取り組んでいただきたいです。

採用の際CSS設計は重視されます。

当ブログでは初心者向けにコーディング技術も発信しています。

1日１つで良いので技術を実際に使用して、学びを深めていきましょう。

最後までお読みいただきましてありがとうございました。