こんにちは。
株式会社レベルスでサイト構築をを担当している西條です。

今回は構築担当の目線で、
サイト制作の現場で求められるスキルについて紹介していきます。

「勉強をしているけど、どのくらいまでスキルを上げれば仕事になるのかわからない」
「未経験からサイト制作を仕事にしたけど、何を勉強すればいいのか、、、」

という悩みある方の参考になればと思います。

※あくまで構築についてなので、Webデザイナーを目指している方は参考程度にしてください。

ちなみに僕の経歴はこんな感じです。

僕自身ほとんど未経験からのスタートなので、
これから勉強を始める方、現在勉強中の方の参考になれば幸いです。

では本題に入っていきます。

HTML

html

できて当たり前！サイト制作に欠かせない基本の言語です。

HTMLはそこまでつまずくポイントはないと思いますが、業務レベルを目指すなら、文法チェックをしっかりと行い、エラーが無いようにしましょう。

こちらはw3cの文法チェックツール。HTMLの構文チェックをすることができます。
wc3とはホームページ関連の規約を決めている団体の事。

CSS

css

サイトを装飾するための言語です。

HTMLだけだと装飾のない簡素なサイトになってしまうので、
CSSで見栄えを整えていきます。

参考書などを見ずにスラスラコードが書けるようになることが
仕事への第一歩です。

また、作業効率化のために「Sass」を利用している案件もあるので、
これも合わせて勉強するといいと思います。

ちなみにSassは初学者の方だと、

「Sassって難しそう、何それ、CSSじゃダメなの」

と思われる方も多いと思いますが、Sass自体はそれほど難しい言語ではなく、CSSを効率良く書くために作られた言語なので実際にやってみると意外とすんなり習得できると思います。

どちらかといえば環境を用意するのが手間だと思います。

Sassを使用するには、パソコンにSass環境をインストールする必要がありますが、インストールするにはコマンドライン（ターミナル）でコマンドを実行する必要があるので、初学者の方にとっては難易度が高いかもしれません。

また、Sassには種類があるので、それによって環境が違ってくることも頭に入れておかなければいけません。

ざっくりですがSassには3種類あります。

Dart Sass環境で、Ruby Sassで開発されたファイルをコンパイルしようとすると失敗してしまうので、面倒ですが、Ruby Sass環境を用意する必要があったりします。

公式を見る限りDart Sassが推進されているようです。（2020年時点）
また、Ruby Sassは2019年3月26日でサポート終了しています。

それからCSSの設計手法について理解しておくといいと思います。大規模な案件だと、しっかりとルールが決められているので、BEM、OOCSS、SMACSSくらいは使えるようにしておくといいでしょう。

CSSに関しては結構長くなってしまいました。

これを読んでいる勉強中の方の中には、「こんなに覚えることあって大変そう」と思うかもしれませが、サイト制作においてCSSは大きな割合を占める部分なので、しっかり勉強しておきましょう。

JavaScript

JavaScript

サイトに動きをつけるために用いられる言語です。

画像スライダー、メガメニュー 、スムーススクロール、アコーディオンメニュー等で使用することが多いです。

HTML・CSSと違いプログラミング言語なので、習得までに時間がかかりますし、難易度も上がってくるので、初学者の中には、ここでつまずいてしまう人も多いと思います。

なので、最初はプラグインを使用しながら、
ファイル構造を覚えたりするといいと思います。

例えば、Swiperという画像スライダー用のプラグインがあります。

Swiperを公式からダウンロードするとファイル一式が手に入るので、どのファイルをどこに配置したらスライダーが動作するかを確かめながら勉強すると理解が深まるかと思います。

とはいえプラグインのみでは、できることに限界があると思うので、
慣れてきたら、「jQuery」を習得することをオススメします。

jQureyはJavaScriptのライブラリの一種で、サイト制作の現場でよく使われています。
jQureyは初心者にも扱いやすくなっているので、最初の勉強には最適です。

例えばid名appにアクセスする場合。
jQueryだと、var app = $(‘#app’);
JavaScriptの場合は、var app = document.getElementById(‘app’);

こんな感じでjQueryのほうが短く簡単に書くことができます。

またjQueryはクロスブラウザ対応なので、ブラウザ間の差を意識せずにコードをかけるのもポイントだと思います。（素のJavaScriptの場合、ブラウザによってはサポートしていないメソッドがある。）

ここまで話すとjQueryは便利だと思いますが、最近はブラウザ間の差がなくなってきたことで、jQueryの役割が薄れてきていると思います。

現時点ではjQueryには豊富なプラグインがたくさんあるので、利用しているケースはあると思いますが、今後10年単位で考えると徐々に役目を終えていくのかなと思っています。

なので、jQueryに慣れてきたら、素のJavaScriptを書けるようにしておくことで、仕事の幅が広がるはずです。

結論として、

の中の、2くらいまでは現場に入る前に覚えておくようにしましょう。

PHP・WordPress

php

サイトの種類によっては、日々更新業務が発生します。

僕ら制作者ならHTMLファイルをサーバーへアップして終わりですが、お客さんは
HTML・CSSの知識があるわけではないので、日々の更新業務を簡単にする必要があります。

そこでCMS（コンテンツ・マネジメント・システム）と呼ばれる、専門的な知識が無くても、サイトの構築・管理・更新ができるシステムを導入することになります。

CMSには、WordPress、Movable Type、ShareWithなどありますが、
日本だとWordPressが主流となっています。

WordPressはPHPで作られているので、まず初めに基本的なPHPの書き方を習得するのがいいと思います。

ある程度PHPの基本構文が理解できるようになったら、オリジナルテーマを作ってみることをオススメします。オリジナルテーマを作ると、WordPressの仕組みが理解できると思うので、勉強に最適だと思います。

まあ、勉強といっても何から勉強すればいいかわからない方も多いと思うので、以下に重要なことをまとめてみました。

多分これだけできるようになれば実務でも問題ないと思います。

Illustrator・Photoshop

構築担当でも、Illustrator・Photoshopはある程度使えるようにしておきましょう。

とういうのもデザインカンプはpsdかai形式でもらうのが一般的なので、操作ができないと業務になりません。

勉強方法でオススメなのが動画学習です。

個人的には書籍で勉強するよりも体感的に学べると思うので、書籍で勉強してつまずいてしまった方は、動画での勉強をオススメします。

僕はUdemyの動画学習を利用していました。

まとめ

今回は勉強中の方へ向けて、サイト制作の現場で最低限求めらるスキルを紹介してきました。

なんで最低限かというと、サイト制作にはまだまだ覚えることが沢山あるからです。例えばSEO、ディレクション業務、デザイン業務などが挙げられます。

それらと比較すると構築業務というのはやればやるだけ知識が蓄積されていくので、未経験からでも仕事にしやすい部分だと思います。

とはいえ、覚えることは沢山あるので独学では限界があると思います。

レベルスでは未経験の方を対象とした社内勉強会を開催しているので、我こそはという方は、「ポートフォリオ」を用意してぜひレベルスまでご連絡ください！

2019年も4月に入り、もう少しでGWを迎える所まで来ています。すっかりブログを書いておらず、
社長に「そろそろマズいよ…」と圧をかけられて、新しい仲間を迎えたタイミングで久々に書いていきましょう。

2019年の年明けから約10名も新たに入社をしてくれました。
まずはじめに「数ある会社の中からレベルスを選んでくれてありがとう！」
とお伝えをしたいです。

縁あって入社をしてくれたので、エンジニアとしてのスキルアップはもちろん、
レベルスで働く事、働いた事が人生においてプラスになる様に、
会社を挙げてバックアップ・サポートはしていきます。

よくこれから勉強をするエンジニアに言うのは、
「会社は因数分解や微分積分を教えて、貴方がセンター試験で一定の点数が取れる様にしたい！
ただ九九を一から教えるつもりもその時間もにない。」ということ。

センター試験で一定の点数と言うのは「1人称で仕事が出来る様になること」を指してます。
レベルスのメイン事業であるWeb制作でいうと、HTMLのタグやCSSの基本的な事くらいは、
自分で頭に叩き込んでね！って事です。

勉強会開催したり、もくもく会したり、書籍代をサポートしたり、勉強ツールを導入して、
サポートをしていく事は出来るけど、あくまでもやるのは自分です。
環境を有効活用するかどうかも自分次第です。
組織に属したからといって、スキルが勝手に上がる訳ではないので、勉強をする気持ちは忘れないでもらいたいです。

そしてエンジニアとして、働いていく上で少し意識してほしい事を。

1.自分を過大評価しない

これ結構、勉強始めたばかりで少し覚え始めてくると、多くの人がかかる罠。
全能感とでも言いましょうか、すごく出来た気になる。
Web系で言うと、サイトをとりあえず1つ作りあげたくらいのイメージで、
形にはなってるけどコードが汚い、読みにくいみたいな。

ただ今、立っているその知識レベルの場所は、多くの人がとうの昔に通り過ぎてきた場所。
そこからキレイなコードや効率的な構築やサーバーのこと、環境設定のこと、デザインのこと、
運用のこと、SEOのことを覚えていくので、またまだ道半ばというか、最初の一歩です。

そこで勘違いをして、勉強の手を止める事がないようにしましょう。

2.人の時間を奪わない

これも1の内容に少し関わるんですが、質問の仕方や方法をしっかり考えましょう。
質問には「良い質問」と「悪い質問」があります。
簡単に言えば、「良い質問」は質問の内容が具体的で整理をされていること。
「悪い質問」は質問の内容が抽象的で調べれば、すぐにわかることです。

時間は誰にでも平等ですが、5年の経験があるエンジニアと勉強して3カ月のエンジニアでは、
時間あたりの単価が全然違うわけです。経験のあるエンジニアの方が単価が高いわけで、
質問をするという事は少なからず相手の時間を奪う事になり、組織の生産性を下げる事になります。
相手の時間を無駄に奪うような、内容のない質問はしない。
自分にとってもそうであるように、人の貴重な時間を無駄にしない様に心がけましょう。

3.当たり前を意識する

当たり前のことって、すごくたくさんあります。挨拶をする、返事をする、お礼を言う。
こんな些細に思える事でも、社会一般では「当たり前」の事です。もちろんこれ以外にもたくさんありますね。

こんな「当たり前」の事が出来ないと、そんな人には大事な仕事は巡ってこないです。
もし今、組織の中で「頑張ってるのに…」「誰よりも知識があるのに…」と感じていて、
大きな仕事やチャレンジの場が与えられない人は、当たり前を大事にしてみてはどうでしょう。

周りの人や上司は意外とそういった細かな事を見ていますよ。
当たり前が当たり前に出来て、プラスαが求められるんです。
当たり前が出来ない人に会社としてリスクを取って、新しいチャレンジや大きな仕事を任せる事は、あり得ません。
それはリスクやチャレンジではなく、ただのギャンブルです。

4.信用は積みあげる

信用は築くのは非常に大変ですが、失うのは一瞬です。
信用は一つ一つ細かな事を積みあげて、信用を少しずつ得ていくしか方法はないのです。

これも3の当たり前の事に関連しますが、組織の中で大きな仕事や会社として新たなチャレンジをする際に、
どんな人が抜擢されるのか、それは信用がある人に他なりません。
組織の中で埋没しない為にも、例えば頼まれた仕事を完璧にやる、任された資料をしっかり作る、など、
小さなことから信用を勝ち得ていきましょう。

これからエンジニアになりたくて勉強を始めようとする方、今勉強をしているけど、つまずいてしまっている方、そんな方に少しでも参考になればと思います！
『エンジニアになる為に、どこから勉強を始めていくのか』という問題。

レベルスで活躍してくれている開発系の方、インフラ系の方などいろんな人に聞いたり、他社の偉い人とかの意見も参考にしつつレベルスなりのオススメ勉強法、勉強していく順番を参考にしてもらえたら嬉しいです！

Progateでエンジニアの勉強をスタート

やっぱり王道ですけど、Progateで勉強を始めるのがいいと思います。有名なオンライン学習サイトなので、ご存知かとは思いますが、知らないぞって方は画像クリックして、見てみてください！間違っても分厚い本を買って勉強をするのは止めましょう。全く分かっていない状況で参考書を読んでも、頭に入りませんし、あんまり意味ないです…。
というか、プログラミングが嫌いになる可能性すらあります。

Progateで勉強を始める前に…『有料会員』になっておきましょう。月々980円です。これで勉強を始めてエンジニアとしてキャリアチェンジやジョブチェンジ出来るなら安い投資です。

Progateのオススメポイント

【1】ゲーム感覚で出来る

初心者やまだ勉強を始めたばかりの人の為に本当にわかりやすく出来ていて、かつレベル上げをするという要素もあってRPG感覚でサクサクと進めていく事が出来ます。実際の現場では面倒な環境構築の話などはさておいても、プログラミングの入口としては、多くの人が興味を持てる作りになっています。プログラミングが楽しいなって思わせる事が出来るつくりは本当にすごいです！

【2】実際に手を動かして勉強できる

プログラミングにおいて、コードを見るだけでは実際にコードが書ける様にはなりません。アウトプットして手を動かして、初めて自分の知識やスキルになっていきます。このProgateでは実際に自分でコードを書いてみてプレビューを見ながら確認が出来る仕組みになっているので、コードを書いていく事で一層理解が進みます。

【3】自分のペースで勉強できる

今、日中は仕事をしている人や学生さんもオンラインでネットとパソコンさえあればどこでも勉強が出来ます。スクールの場合だと時間を合わせたり、進行速度についていけない可能性もありますが、Progateの場合は単元がスライド型になっていて、理解が出来ている所は早送りで理解が曖昧なところはじっくり何度も見直して、自分のペースで勉強を進めていく事が出来ます。

【4】勉強出来るレッスン数が豊富

ProgateではHTML&CSS/JavaScript/jQuery/Ruby/Ruby on Rails5/PHP/Java/Python/Swift/Command Line/Git/SQL/Sass/Goの全部で14のコースが用意をされています。これが月に980円は破格ですし、エンジニアの人の目標や目的に沿って、進めていく事が出来る点もおススメですね。

Progateは初心者向けに構成・設計をされているので、プログラミングとは？という基本的な理解をするにはもってこいの勉強素材です。レベルスに限らず、多くの人が勧めるのもそういった理由があるからです。

勉強を進めていく順番

エンジニアとして活躍したいと思っている志高い人も…この勉強の順番を間違えてしまうと頭がごちゃごちゃになってしまったり、仕事が嫌いになってしまう人もいますし、スキルアップがうまく行ってないというエンジニアさんの話も耳にします。レベルスのエンジニアの人の現場での声や高い知見をお持ちの方からの意見を私なりにまとめて結果…。
Progateにあるものだけではありませんが、エンジニアとしていち早く活躍する為にって所にポイント置いています。

【1】SQL

絶対に最初にやった方がいいと個人的にオススメはSQLです。Progateだと開発系が多いので、インフラエンジニアを目指していない限り、あまりそそられないかもしれませんが、実際の開発現場では必ずといっていいほど使います。設計とか調査も絶対に業務の中でする事なので、初学者の人がSQLを理解していると重宝されます。Oracleとかで資格の勉強をするのものありですね。

【2】Linux

Linuxも現場ではかなり使いますね。勉強を始めたばかりの人はLpicに挑戦するのを個人的にはお勧めします！バックなので、どうしてもWEBサイトを作る事と違って勉強の成果が形に見えにくくはなりますが、エンジニアとして少しでも早く活躍したいと考えている人はコマンドやソフトのインストールくらいは当たり前に出来る様になっているといいですね。

【3】Python

pythonはコードがキレイなので、初心者の方でも始めやすいというのも3番目に選んだ理由です。いきなりJavaなんか始めるとその複雑さに初心者の人が折れちゃうかもと心配です。ただネックはまだまだJavaやRubyに比べると日本語で深い勉強が出来る書籍や環境が少ない点(数年前に比べたら良くなってますが…)は初心者の方のハードルになるかもしれません。手前味噌になるんですが、レベルスでは現役のPythonのエンジニアが講師となって毎週木曜日に勉強会を社内で開催しているので、興味あればぜひ(笑)

まとめ

と、勉強する順番はSQLやLinuxかやりましょう！と書くと「エンジニアから搾取する為に勉強させるんだ」とか、「現場に入りやすいからでしょ」と批判を頂く事もありますが、開発をやりたい人の目標から逆算すると、このSQLとかLinuxの知識とか経験ってあっても絶対困らないんですよね。プログラミング言語だけでサービスはできないし、逆も然りだと思っています。
よく聞くのがJavaの1カ月外部研修とかに放り込んで猫も杓子もJavaでしょ！の方が個人的にはどうかなーとは思うんですけど(笑)

どのエンジニアの人にも目標を持ってもらいたい！
どんなエンジニアとして活躍をするのかイメージをして下さい！
その為に出来る事はレベルスでは何でも協力をしていくつもりです。今頑張ってくれているエンジニアさん、これからご縁があるエンジニアさん、皆さんどうぞ宜しくお願いします！