未経験から。
転職をしたことはありますか？
私は何度か転職をしていて、ずっと事務畑だったのですが、今は打って変わって専門性のある、全く別の仕事をしています。
業界も業種も未経験の状態から、今の仕事に就きました。前職を辞めたときの私は30歳を過ぎていて実家暮らしだったのですが、半年ほど職業訓練に通って、転職をきっかけに地元を離れて一人暮らしを始めました。
今回は、そんな私がやっているコーダーという仕事について書いてみようと思います。
そもそもの話
さて、いきなりコーダーとか書きましたが、そもそも私がどんな仕事をしているかというと、Web制作会社で色んな企業のWebサイトを作っています。Web制作会社も色々なので、会社によって納品までの流れや制作の進め方は結構違っていたりするのですが、ざっくりこんな感じでしょうか。
① 案件を受注する
↓
② ヒアリング（どんなサイトにするか決める）・スケジュールをひく
↓
③ デザイン（見た目や動きを決める）
↓
④ コーディング（デザインをWeb上に反映する）
↓
⑤ システム組み込み（Web上で機能するようにする）
↓
⑥ 納品
↓
⑦ 運用・保守など
私は主に④のコーディングを担当しています。
みんなの役割
案件の受注は、営業が取ってきたり、得意先からの依頼が入ったりします。他社とのコンペがあれば社内で作った資料をもとにプレゼンしてもらったり、見積や請求などお金の話をするのも弊社では営業が行っています。
新規案件の場合は、受注したらヒアリングが行われます。どんなWebサイトを作りたいか、リニューアルの場合は現在どんな問題を抱えていて、何を改善したいのかなどを聞き、サイト設計をしていきます。この段階でディレクターやIAがミーティングに入ったりします。
ディレクターは、弊社の場合だと主に進行管理をしています。スケジュールを決めて製作陣にタスクを割り振ったり、“窓口”となってお客様と制作側それぞれの意図や要望を伝えたりします。納期までに各工程で遅れが出ないように管理をしたり、時に交渉したりします。
IAというのはインフォメーション・アーキテクトの略で、言葉通り「情報設計をする人」です。弊社では要件定義をしたり、サイトマップやワイヤーフレームを作るのがIAの主な仕事になっています。
要件定義は、サイトの仕様を決めることです。例えば雑貨屋さんのサイトを考えたときに、ネット通販をするなら決済システムの導入と、どんな支払い方法で受け付けるのか（代引きOK？対応のカード会社は？など）を決めておく必要があります。アイテム数が多ければ絞り込み検索をつけた方が良いかも知れません。そういった、そのサイトに必要な機能や仕様をお客様と話し合いながら考えたり、提案したりします。
サイトマップはサイトの構造を視覚的に表現したもの、ワイヤーフレームはデザインのもとになる骨組みのようなもの（ページの構成を決めるもの）です。以下参考にどうぞ。
ワイヤーフレームをもとに、デザイナーがデザインを作ります。そのサイトの方向性に合わせて、色やフォント、アイコンやボタン、あしらいや余白などを決め、ビジュアルを決定します。
実際に作られたデザインは、例えばこのようなもの↓です。同じデザイン（akaneさんが作ったものを、ひらともやさんが別のソフトで再度作って下さっている）ですが、見やすい方でどうぞ。
▼akaneさん
大変遅くなりましたが、、レスポンシブ化の練習ができるPCとSPのデザインを作成しました！自分でもコーディングしよっと！コーディングの練習に使ってあげてもいいよ〜っていう優しいお方にはaiかpsdデータをお渡しいたしますのでお気軽に、、🥰 pic.twitter.com/kvkHw2vKsv
— akane (@omsss22) February 6, 2019
▼ひらともやさん
デザインをWeb上で見えるかたちにするのがコーディングです。コーダーはHTMLやCSSといった言語を使ってデザイン通りの見た目をWeb上に反映し、リンク設定や動きをつけて実際のサイトに近いものを作ります。
例えば、↑の架空のお花屋さんサイトのデザインを私がコーディングしたものがこちらです。
（GitHubに新しくアカウント作ってアップしてみた。）
そしてこのコーディングデータをもとに、システムに組み込んでもらいます。
システム組み込みは何かというと、コーディングをCMSに組み込んで使えるようにしたり、コーディングではつけられない機能を実装します。これがエンジニア（Webエンジニア）の仕事です。
CMSとはコンテンツマネジメントシステムの略で、Webの専門的な知識がない人でも簡単にWebサイトの作成や管理ができるソフトウェアのことを指します。
コーディングの状態では、言語の知識がないと更新ができません。ですが、CMSに組み込むことによって、そういった知識がなくても更新や編集ができるようになります。（WordPressなどが有名）
また、コーディングの状態では、例えばお問い合わせフォームや検索ボックスはまだ実際には機能しません。要件定義で決められた仕様を実装するのもエンジニアの仕事です。
ざっくり説明しましたが、弊社はかなり分業スタイルなので、もっと業務内容を兼任している場合が多いです。求人を見ていると、特に規模の小さい会社はそういったところが多いように見受けられます。
中でもコーダーは、コーダーとして募集しているところは少ないです。大体デザイナーが簡単なコーディングまで担当しているか、コーディングから組み込みまでできるフロントエンドエンジニアがいるかのどちらかが多い印象です。
コーディング
では、もっと具体的にコーディングってどういうことしてるの？というのを書いてみます。
先ほどの、私が過去にコーディングした架空のお花屋さんのページがどんな風に作られているかを少しだけ見てみましょう。
このように、もらったデザインをWeb上に表現するにはどうするかというと、言語を使ってソースコードと呼ばれるものを書いてファイルを作り、そのファイルを（FTPソフトなどを使って）サーバーにアップするとブラウザでも見れるようになるよ、という感じです。（コーダやってるのにここら辺ちゃんと分かってなくてマジでごめんなさい）
ソースコードとはこんなやつです。
Webサイトを作るためにまず必要なのが、htmlファイルです。htmlにはそのページを構成している要素を書きます。もう少し詳しく見てみましょう。
デザインを見ると、「Consept」のエリアには…（良かったらデザインと見比べてみてね）
まず「Consept」という文字があり、これが見出しになっています。画像の中のdivやh2をタグというのですが、h2は「ここは（2番目に大きい）見出しです」というような意味を持っています。なので「Consept」という文字をh2タグで囲っています。
見出しの下には文章があります。pは段落を表すタグなので、基本的に文章はこのpタグで囲います。そして、途中で改行する必要がありますね。ちょっと分かりづらいですが、brというのが改行を表すタグです。
それぞれのタグについているclassは何かというと、装飾を施したり体裁を整えるためにつけている任意の名前（ラベル）みたいなものです。私はbrにbr-pcという名前をつけているのですが、簡単に説明すると、これによってPCでのみ改行するようになっています。（スマホで見たときは改行されません。）
そして、文章の下にはカスミソウの花束の画像があります。これはimgというタグで挿入しています。srcに画像の場所を指定することで、ここにはこの画像を表示してね、という命令をしています。
htmlを書いただけではただ要素があるのみで、装飾がされていません。デザイン通りの装飾をするために必要なのがcssファイルです。
cssは例えばこんな感じです。
これは、先ほどのh2タグを装飾するためのcssの記述です。
まず上のh2ですが、こちらで文字の大きさ、太さ、色、仕様するフォントの種類などを指定しています。またpaddingというのは余白の記述です。h2で囲った要素があったら、上を120px、下を30px開けてね、と指定しています。
そして、デザインではそれぞれの見出しの下に線が入っています。これを表現するために必要なのがh2::beforeの部分です。
こちらは分かりやすいようにコメントを入れてみました。h2を基準にした時に、どの位置にどの大きさのどんな色の線を引くか、という風に指定しています。
h2の場合はタグに直接装飾を指定しているのですが、divなどページの中でたくさん使うために、直接指定しない方がよいタグもあります。
そのために使うのがclassです。例えば先述のbrは、PCでもスマホでも同じく改行したい場合と、PCでのみ改行したい場合があったので、PCでのみ改行したいものにクラスをつけて指定していたという訳です。
そして、もう一つ大切なファイルがあります。jsファイルです。
jsはJavaScriptという言語で書かれたファイルで、サイトに動きをつけるときなどに記述します。
例えばこのお花屋さんのページだと、上の白い3本線をクリックするとメニューが出てきます。
こういったメニューの動きだったり、トップへ戻るボタンが途中から出てくる動きをつけています。
「100pxスクロールしたら表示」されるようにjsファイルで記述しているので、最初に読み込んだ時はこの右下のトップへ戻るボタンは現れません。
伝わったのか
どれくらい伝わったか分かりませんが…こんな感じで日々コーディングに勤しんでいます。実際の業務では新規のものだけでなく、改修や修正のお仕事も多いです。
私は半年間の職業訓練に通っていたのですが、そのうちの2ヶ月くらいがコーディングの基礎について学ぶカリキュラムでした。プラス独学でWordPressや、PHPというまた別の言語についても少し勉強したりして、なんとか内定にこぎつけました。（独学部分がないときは転職活動で詰んでた。）
私はコーディングはものづくりでもあり、問題解決でもあると思っています。このデザインを表現するためには、どうやってコードを書くのが良いかな…という風に、いつも解決方法を考えています。修正や改修も、どうやったら最小限の手数でできるだろう、と考えることもあります。
また、同じ結果を出すとしてもやり方は一つとは限りませんし、後から更新しやすいように、他の人も見やすいようにコードを書けた方が良いので、より良い書き方ができるように考えるのがベストです。（まだまだ無駄が多いけど。）
言語の記述方法は人によってルールが違ったり、癖があったりするので意外と個性が出ます。シンプルで見やすいコードを書けるようになりたいものですね…
さてさて、今回なぜこんな風に仕事のことを書こうと思ったかというと、無職の時期に書き溜めた下書きをそろそろ出そうかなと思ったからです。
無職だった時期の後半に、少しだけ（2〜3ヶ月分くらい）ですが、書いていた日記があって、noteの下書きにずっと入っています。せっかく書いたしやっぱり出そう！と思いまして。
ただ、コーダーという職種や、コーディングというものについてなんとなくでも分かっていた方が読みやすいかなと思ったので、こんな記事を書いてみました。近いうちに出せたらいいなー。
最後になりますが、この記事は諸事情によりあえて読みにくい書き方をしているというか、（特にスマホでは）読みやすくしなかったので、閲覧された方はしんどかったのではないかと思います。すみません。
長くなりましたがここまで読んで下さった方、本当にありがとうございました。