エンジニア歴1年未満でもサイト変換ができる！？その壱

初めてのブログ投稿

初めまして、2015年入社の小野です。
昨年の4月から働き始め、9ヶ月が経ちました。

今回初めてブログを投稿します。
私が書くブログは、題して、

「エンジニア歴1年未満でもサイト変換ができる！？」

です。

全部で3本立ての、自分自身の成長記をストーリー仕立てでお送りしたいと思います。

今回はその1本目をお伝えしたいと思います。

元々大学時代は文学部でした。

ITにとくに敏感なほうではなく、SNSを使うくらいのごく普通の学生でした。

そんな私がITのベンチャー企業で働くことになりました。
入社初日のパソコンの設置からあたふたしていました。

社内の業務の1つに、PCサイトを変換してスマホサイトに作り変えるサイト変換というものがあります。
その際に自社製品のジーンコードを使って行っています。

サイト変換とはざっくり言うと…

PCブラウザ向けに作られたサイトを、スマートフォンのような小さい画面でも見やすくなるように、PC側のシステムやプログラムは変えずに見た目だけを変える手法、です。

プログラミング言語を何一つ知らない私がサイト変換なんてできるようになるのか…と不安な気持ちでいっぱいでした。

ある日、ジーンコードIDEのチュートリアルの改修のお手伝いをしました。チュートリアルの仕事をするのにやったことがないのはまずいと思ったので、やってみることにしました。

全く理解できませんでした。

チュートリアルといっても、ウェブサイトを作ったことがある人向けの説明だったので、ウェブサイトなんて作ったことがなかった私にはさっぱり分かりませんでした。

ジーンコードIDEとは…

サイト変換の際の統合開発環境という専用ツールで、PCサイトにある要素をクリック1つで選択して、スマホサイトに作り変えるというもの、です。

仕組みは頭で分かっていても、今何をしているのか、どこが変わったのか、これは何をするために書いているのか…。
チュートリアルの中で出てきた単語やコードの意味が分からず大混乱でした。

ジーンコードは便利なものだと聞いていましたが、全くそうは思えませんでした。

幸先が悪い中私の研修は始まりました。

まず、HTMLとCSSの基本は本を使って勉強しました。

ウェブページとはどんな仕組みなのか。どういう言語で書かれているのか。

全てが新しい知識でした。

なんとなく大まかな知識は頭に入ったという頃に、簡単なウェブページを一枚作ってみるという研修がありました。
題名と画像1枚と画像の説明文という3つの要素があるだけの、今思えば簡単なページです。

初めてエディターにHTMLを書きました。

まず、<head> タグがあって <body> タグがあって、というのを本を片手に書いていきました。題名には <h1> タグだな、画像を読み込むタグは <img> タグだな…。

<div> タグと <p> タグどっちを使うのか、<div> タグはそもそもいらないのか？違いはなんだろう…。分からないことは先輩に聞いて教えてもらっていました。

CSSの感覚をつかむのも難しかったです。

マージンやパディングの概念が分からず、自分が予想していた動きと実際は違ったり、画像を読み込む際のパスの概念が分からなかったり…。ひとつひとつプロパティの意味を、本とにらめっこしながら確認していきました。

このように本で得た知識をアウトプットしていきました。そうすることで半日かけて以下のような簡単なウェブページが完成しました。

文字をひたすら書いたら、デザイン通りのものがブラウザで確認できたので面白いなと感じました。
HTMLとCSSをもっとすらすら書けるようになりたい、基本をもう一回覚えなおそうと思うきっかけになりました。

次回は初めてお仕事として製品のティザーサイトをゼロから作った体験等をお話ししたいと思います！