新規サイトコーディング ~駆け出しエンジニアの成長記録~

近藤 嗣春 近藤 嗣春
WEBプロダクション・コーダー
公開日:2024/12/12
 

今月もやってまいりました。

9月中にあったことや学んだことなどの所感を今回も綴っていければと思います。

私ごとではありますが、9月は個人の活動も落ち着いていて、根詰めすぎることなく終わりました。が、とんでもなく吸収した月だったため、その時の心情や、具体的に何を吸収したのかをお話します。


新入社員研修


実務的なお話の前に、まずは残り少ない研修についてお話します。

台風の影響などで予定がずれ、研修10日目はまさかの1人で行くことになり、ド緊張で行った次第です。

僕はコミュニケーションが得意な方ではなく、そのうえ人混みも苦手なため、かなり神経を使った1日でした。

よく「そんなことない」と言われますが、全然そんなことあって、他人より体力消耗が激しいのです。そのため1日が終わった時はぐったりしていました。

 

物件王のプレゼン作成と発表


...余談はこの辺りにして、今回の研修はプレゼンの作成と発表でした。実践が中心で、"学んだ"という内容は少なかったかもしれませんが、吸収は多くありました。

自分は、他社から参加している1人の子と一緒に取り組みました。少人数での作成が難しい内容だったため、内容は他社の方に考えてもらい、自分は全スライドのデザインを作成しました。

デザインに関しては強い自分。それはもう黙々と作業しました。

内容は物件王に関することで、HPを見て色々と調べながらまとめました。

前回の研修で作成した資料をもとに作った物もあり、見つめ直すことができたのは良かったと思います。また、物件王に所属していますが、不動産や建築に関しての知識が豊富ではない自分にとって、新たな発見も多くある作業でした。

時間の都合上、プレゼンは先延ばしになったものの、次回しっかりと物件王の良さや伸び代を語っていきたいと思います!

当日少しバタついたこともありましたが、それとなく乗り切ることができて良かったです!

 

たくさんの文章たちと向き合う


9月上旬は、日々の業務をひたすらレポートにまとめ、資料を作成するという作業をしていました。

今まで生きてきた中で、こんなにもレポートを作成したことはなく、若干のゲシュタルト崩壊もしましたが文章力は上がったと思います。

特に大きいのは、レポートと資料の大きな差について、自分自身で感じることができたことです。

 

資料は ”情報を共有するもの” という再認識


今までは、「読み飽きて欲しくない」という思いで綴っておりました。

それこそ、デザイン学校ではそういう点に重きを置き、そこへ更にデザインやアート表現を取り入れて、面白い内容を意識して作っていました。が、今作成している物のほとんどは、 "資料" と名のつくものたち。

ですから、読み飽きない、面白い文というのはストレートに言うとあまり需要がありません。むしろ欲しい情報を供給できていないに等しい。

そんなこともあり、自分自身、書くのが辛くなった時もありました。

そこで今一度、文章...というか、文字について考えてみることにしました。

"小説" などは、一文字一文字を踏石のように歩んで行くものですが、 "資料" に目を通す場合は、どちらかというと飛び石。

単語や文章の流れから内容を予測しつつ、補完する言葉を目に入れることで、解釈の違いを防ぎ、必要でない情報は排除し、必要な情報は記憶されていく。そんなイメージを自分の中に作りました。

その上で、ノーコードツール "Studio" についての資料をまとめることにしました。

すると、文章の中で省くべきところや、効率の良い見せ方など、多くのことが見えてきました(まだ未熟ですが)。

自分が作業をしていて「あれをしたい」と思って資料を見たとき、どこにその情報があり、欲しい答えがあるかを考えながら作成することが、段々とできるようになりました。

徐々に字面も資料っぽくなり、改めて自分で見返した時も、欲しい情報をピンポイントで抑えられる資料を作成することができました。

 

資料とレポートの違い


資料とは情報を共有するもの、ということを踏まえてこのような成長記録レポートを書くと、それこそ、何を一番伝えたいか?を考えながら書くことができるようになっていたし、より伝えたいことが具体的になり、文章の内容がレベルアップしました。

この成長記録の場合、読んでもらうことを前提とするため、どうすれば飽きないかや、起承転結などを意識して綴っていますが、それらを用いる場所や方法が鮮明になりました。

最後に、資料を作成する中での進め方も良くなりました。

今自分がどこを書いていて、次にどこを書きたいのかを分かりやすくすると、読者も読みやすく、後で自分が追記する時も、何を書きたいかが鮮明になります。

目次やタイトルなどの目立つ要素を存分に活用し、自分自身も楽に文章が書けるようになり、まさにWin-Winな感じで制作することができています。

少し余談ですが、毎日の社内日報も、自分も他人も分かりやすいようにまとめることができたのは大きな進歩かなと思います。

今後もちょくちょく、この成長記録を綴っていく予定です。

"資料" は参考までに、この記事のような "レポート" は時間があるときや、僕のことを知りたい方などに読んでいただければと思います。

 

新規サイトのコーディングを開始


そんなレポートを書いたり、資料を作成する毎日でしたが、それだけではモチベーションというものは正直保ちにくかったです。

そこで、新規サイトのコーディング(練習)をやってみることになりました。

 

初めてコーディング作業をしてみて


新規サイトのコーディングは、正直、不安でした。

というのもやはり、勉強で学んだことは抜け落ちていくのはもちろん、理解したつもりになっていた部分が多かった印象があります。

困った時に見返して「あぁ!そうだ!」となることは少なく、「...で、どうすればいいんだ?」となることが多かったです。

書き方や管理が違うのももちろんですが、触った経験値がない状態でそのことを考えて手を加えていくのは勇気も入りますし、結構ストレスのかかるものでした。

そんなタイミングでの作業だったため、緊張しながら進めることとなりました。

社内コーダーさんに助力いただきながら最初の簡単な対応を終え、実際にSCSSなどを触っていく工程へ中旬から入りました。

 

パーツリストの編集


物件王のサイトには「パーツリスト」と呼ばれるものが用意されています。

これはテキストやボタンなどの各種パーツを一括で編集することができるもので、仮想ページなどにも同じ変数、クラス名が使用されています。

そのため粗方ここで作ってしまえばデザインを汎用して使用できるということです。

パッと見た作業内容は高難度のものは少ない印象でしたが、結構な量があり、未知数だなと感じながら作業開始。...ですが、CSSでの編集が学校の時と全然違う!って感じでした。

具体的にいうと以下のものが新鮮でした。

  • フォントファミリーの変更

  • フォントサイズの変更

  • 各種パーツの設定場所

  • アイコンなどの設定


他にも細々とありましたが、こんなところを最初は新鮮に感じつつ馴染めずに作業していました。

各種サイズ設定が特に新鮮で、「静的コーディングで1から書いている時と比べてラク〜」と感じていました。

すでに定義されている変数で管理されているため、どこの何の要素なのかが、記述で理解できるのがとても効率的だなと感じました。

ただ、これらの便利機能や「分かりやすい + 可読性のあるもの」にも "馴れ" が必要でした。

最初は、自分が経験したことのある "静的コーディング" の知識しか手札がなく、少し戸惑いながら作業していました。基本問題なく変更を加えることはできていましたが、それによって動かなくなってしまっていたものや、後々困る内容のものが多数。

もちろん今も、完璧に対応できている訳ではありませんが、ある程度セオリーが理解できるようになりました。過去に自分が対応した作業の影響で修正依頼がくると、「な〜にやってんだぁ〜」と過去の自分に愚痴をこぼすこともしばしば。

このように、パーツリスト後半は修正も対応して、四苦八苦していました。

あとは、アイコンの画像を挿入するのに、専用のサイトがあるのもいいなと感じました。

学生時代は、そもそもアイコンデザインもサイト制作の一つで、「imgのファイルにあるだろう」という固定概念が拭えず、「このアイコンどこにあるんだ?」となったりしました。

ですが、不動産サイトでは、アイコンを挿入できる記述を使用してアイコンを設定していたため、はじめは戸惑いましたが、慣れると便利でした。

 

パーツリストで一番大変だったこと


そんなこんなで助言もいただきつつ終わらせたパーツリストでしたが、一番大変だったのは "ボタン関連" でした。
多数の箇所に併用するボタンは、変更を加えるのが難しかったです。

「こっちを変えればあっちも変わる」が何度も何度もあり、それぞれクラス分けをしないといけない時は、頭の中が忙しくなることが多くありました。

学生時代はそれぞれにクラスを与えて作っていたため、そうなることは基本ありませんでした。しかし、物件王のようなサイト制作では、その方法だとえげつないHTMLを書いていかないといけない点を考えれば、今の物件王のサイト構成が妥当だと感じました。

ですが、自分でも少し驚いていることは、最後の方は自分の力で解決することができたことです。

最初の方はだいぶ先輩方に手助けをいただいたのですが、パーツリストの修正依頼に関してはほぼ自力でやり遂げ、「成長だな〜」と実感することができました。

 

トップページの対応


最後は、トップページの対応です。

パーツリストのおかげで成長した私は、自力で作り上げることが多くなっていました。個人的な自慢ポイントは、図形を画像ではなくCSSで表現し切ることができた点です。

最初は少し手間取りましたが、一度形になった後は結構スムーズに作り上げることができ、僕がコーディングで好きなポイントの「文字でデザインしていく」ができたのは楽しかったし達成感がありました。

タイトルや背景画像など、些細な変更が加わっているデザインのサイトで、難しく四苦八苦もしましたが、デザイン通りに変わっていく過程はやりがいと楽しさがありました。

また、歴史の浅い"SCSS"の書き方も慣れてきて、自分でクラスを設けてデザインに反映させることもでき、プロトタイプの中身の理解度は日に日に上がっていきました。

そうやって作業している中でつくづく思うのは、「すげー管理されているけどこれを1から作るのは大変すぎるなぁ...」ということ。

ほんとに諸先輩方には感謝です。

あとは、この辺りから検証ツールの使い方もだいぶ分かってきました。

一度、検証ツールで編集を加えて思い通りになったら、クラス名などを確認し同様の対応を行います。修正点が出たら、そこを検証ツールで確認し、重複しているCSSが無いかを見て、どこを変えればどうなるかを確認したら実践〜... というルーティーンが自分の中で出来上がりつつあります。

未だに、すぐにファイルの場所などを把握することはできていませんが、この新規サイトコーディング課題をやってよかったな〜とつくづく思いますね。

まだ現時点で修正等は来ていないため、後日対応することになりますが、それも含めスマートに対応できるように成長あるのみです。

そんなこんなでトップページは完遂することができました。

 

9月を振り返って


以上が、9月のまとめです。若干10月の内容も入っていますが、キリが良いところを抜粋しました。

あとがきでは、少しパーソナルな部分についてお話しします。

どんな経験も、無駄なことはない


自分の最終的な目標として、マルチクリエイターとしてのポテンシャルを身につける、という目標があります。

今の業務は、確実にその糧になっていて、目標のためにはどれも欠かせない経験です。超いいカンジです。

そこで、最後に少し語りたいのは「どんなことも無駄なことはない」ということです。

僕のように、直結はしなくとも関係値の高い仕事であれば、このマインドはある程度保てるかもしれません。でも、何か遠い目標や夢がある人にとっては、日常のちっぽけさが辛くなることもあるんじゃないかな、なんて思ったりもします。

僕らが仕事マシーンだったらそんなことも無いと思いますが、人間だから、原動力はモチベーションです。

モチベーションを維持するには根気だ、とかって言うのは、どうしても人を苦しめてしまう所があると思います。

そんな中、自問自答なんてしたら今何のために生きているかが分からなくなったりします。ですが、どんな努力も絶対に、自分を裏切らないのは朝がくれば夜が来るくらい当然のこと。

いつになるかも、どんな風にかも分かりませんが、少しは自分を信用して褒めてあげてください。そうすれば自然と「まぁ、頑張るか」となるんじゃないかな。なんて思います。

しかし、無理をして頑張りすぎるのは良くありません。自分がすり減りそうになったら、周りの目は気にせず休みましょう。(自分はそれが苦手なんですが..w)

というわけで、季節の変わり目は体調が悪くなりやすいです。体を大切に、明日もおはようと言えるように頑張っていきましょう。

そんな9月号でした!!