いろいろ思うところがあって、これからWebプログラミングを始める方に向けて、
自分のエンジニアとしての知識を一通り残しておきたいなと思うようになりました。
巷では「3ヶ月でフリーランスエンジニアになれる！」みたいなのが蔓延ってますが、
もちろんそれを否定するつもりも無いんですが、
まあ事実それで失敗してる人も多いよね？ということで、
挫折しない程度に頑張らないでスキルを身につける方法があれば良いなーと思い、記事に残しておくことにしました。
今回は案件をこなす上でこれだけは知っておいてほしいと思う4つのスキルを紹介します。
コーディングスキル
はい、初っ端から当たり前の項目ですが、コーディングスキルです。
当たり前過ぎて書くほどでもない内容かもしれませんが、
でもじゃあ何から始めれば良いの？っていうのは、結構迷いどころかと思います。
プログラミングを始めるってなったら、まず真っ先に「どの言語を勉強するか？」っていう壁にぶつかるかと思いますが、
ことWebプログラミングにおいては、とりあえず下記の3つをやっておけば良いんじゃないかなと思います。
- HTML
- CSS
- JavaScript
※そもそもHTML、CSSはプログラミング言語ではない論争がありますが、ここでは一旦置いておきます笑
なぜ上記3つが良いのかというと、これらが フロントエンドの言語 だからです。
フロントエンドとサーバーサイド、どっちが良い？
さて、フロントエンドという単語が出てきました。
これを説明するにはフロントエンドとサーバーサイドの違いをセットで理解しておく必要があります。
（結論だけ分かれば理由なんか知らなくて良い、という方はこの項目はスキップしてもらっても大丈夫です）
あなたが普段何気なく見ているWebサイトは、大きく分けて2つのコンピュータが動かしています。
1つ目は “サーバー” です。
例えば今あなたが見ているこのブログは、あなたが閲覧してる端末からこのページにアクセスしたときに「このページの情報をくださいな！」というリクエストをサーバーに投げます。
すると、サーバーは「リクエストされたURLの情報はこれだよ！」といった感じであなたの端末にWebページの文字情報（プログラム）を返してくれます。
ここまでの処理をやっているのが “サーバーサイド” になります。
しかし、この時点ではまだ単なる文字情報（プログラム）でしかありません。
この文字情報を実際にデザインされた状態で見せてくれているのが、
2つ目のあなたの端末、更にいうとあなたが使用している “ブラウザ” です。
ブラウザはサーバーから渡された文字情報（プログラム）を解析して、みんなが見やすいデザインで表示してくれています。
この処理をやっているのが “フロントエンド” になります。
つまり、ざっくり説明すると
サーバーサイドの言語 = サーバーが動かすプログラミング言語
（例：PHP、Python、Ruby など）
フロントエンドの言語 = ブラウザが動かすプログラミング言語
（例：HTML、CSS、JavaScript など）
ということになります。
サーバーサイドの言語は性質上サーバーの知識が必要になりますが、
フロントエンドの言語はあなたがいつも使っているブラウザさえあればすぐに始められるので、
何から始めれば良いのか分からないという方には、まずフロントエンドの言語、
特に「HTML」「CSS」「JavaScript」の3つをおすすめします。
初心者にまず読んでほしい本2冊
以下の本は、実案件を受けられるくらいの最低限の知識が全部詰まっているので、
今から始める方にも、他の本で挫折してしまった方にもおすすめです。
このあたり本の内容を網羅するだけで、わりと実案件こなせるようになると思います。
デザインツールの使い方
Webデザインは興味ない、俺はエンジニア一本で行くんだ！
と考えている方でも、どうしても避けては通れないのがデザインツールです。
Webサイトは
デザイン → コーディング
というワークフローで作成されることがほとんどですので、
仮にあなたはデザインをしていなくても、誰かが作ったデザインデータを触ってコーディングするということになります。
なので、デザインツールを使いこなすということも、Webエンジニアとして必要なスキルなのです。
肝心なツール選定ですが、基本的に Photoshop を使用していれば大きく問題はありません。
最近では Adobe XD、Figma（フィグマ）、Sketch（スケッチ）など他のツールを使っている会社さんも多いですが、
正直どんなデザインを作るか？ どんな規模のサイトになるか？ など案件内容によって向き不向きがあり、
ごりごり凝ったデザインを作ろうとすると、結局現状ではまだPhotoshop一択になります。
PhotoshopはAdobe Creative Cloudの一部になっていますが、Photoshop（+Lightroom）だけ使用できる安価なプランもあるので、
まずはこのへんを使ってみて練習してみてはいかがでしょうか？
Git
Gitとは、バージョン管理ツールです。
Gitを使わないで開発したときによくあるのが
- ファイル名に日付などを付けてバージョン管理するが、ファイルが増えすぎて管理しきれなくなる
- バグが発生した際にどの修正から発生していたのか検証しづらい
- 複数人で開発した際に作業範囲が被ってしまい、先祖返りしてしまう
などなど、、、
一人で且つ小規模な案件（ペライチのLPとか？）だったら問題ないかもしれませんが、
これが複数人が関わるくらいの規模になると、もう地獄です。
そこで登場するのがGitです。
詳しく説明しようとすると、これで一つ記事を作らないといけないくらい奥が深いので、ここではさらっと紹介する程度に留めておきますが、
Gitでバージョン管理をすることで、これらの問題がすべて解決します。
今どきgitを使わない案件はほぼ無いと言っても良いくらい、どこの会社さんでも当たり前のように使われているツールなので、
ぜひ個人プロジェクトであまり必要性を感じていなかったとしても、試しに使ってみてほしいなと思います。
詳しい説明や使い方はこことか、自分でググってみたりしてみてください。
FTP（FTPS、SFTP）
意外と後回しになりがちだけど、意外と大事な知識。
FTPとは「File Transfer Protocol」の略で、要はファイルをサーバーに転送などするときに使われる通信規格です。
本番サーバーにアップするときはもちろん、ステージング環境もリモートに置かれることが多いので、わりと重要です。
ちなみに通信規格の仲間として「HTTP」があります。
Webサイトにアクセスする際にURLの頭に「https://」と付くので分かりやすいかと思いますが、
今まさにあなたがこのWebサイトを閲覧するためにHTTPという通信で、このWebサイトのデータをあなたの端末にダウンロードしています。
FTPも似たようなものですが、サーバーにWebサイトのファイルをアップする際にHTTPで誰でもアップできたら困りますので、
FTPで権限を持っている人のみがアップできるようになっているのが一般的です。
クライアントツールで有名どころだと、
WindowsだったらFFFTP、MacだったらFilezillaなんかが無料で使えるので、初心者には使いやすいかと思います。
FTPS または SFTP を使おう
ここまでFTPの話をしてきましたが、実際はFTPを使うのはよろしくないとされています。
というのも、FTPは暗号化されていないので、通信が外部に漏れてしまう恐れがあるからです。
そういったセキュリティ面を解消したものが FTPS、SFTP になります。
（この2つも実は全く違うものになるのですが、今回は割愛させていただきます。。。）
FTPS、SFTP は両方とも通信を暗号化したものになりますので、実案件では必ずこのどちらかを使用するようにしましょう。
ちなみに最近「http://」よりも「https://」のWebサイトが多いのもそれが理由です。
httpはFTPと同じ暗号化されていないもので、GoogleもSEOにおいてhttpsのWebサイトを優先して表示するようになっているので、
セキュリティについては益々気をつけないといけない時代になってきていますね。
まとめ
今回は本当に初心者の方がまず何を学べが良いのか？を一通りまとめただけになっちゃいましたが、
何となくの指針にでもなれば良いかなと思います。
上記4つをマスターしておけば、基本的な案件のワークフローで躓くことはないと思うので、
何から始めれば良いのか分からない、という方は参考にしていただけると嬉しいです。
おわりっ。
コメント