2022-05-01

【WEBアプリ制作記 #1】題材を決める

WEBアプリ制作記 vol.1

制作の経緯
既出のアプリケーション。参考資料もたくさんある
手を動かしながら必要なものだけ学ぶ

制作の経緯

先日、Twitterで知り合った現役のwebエンジニアが主催していたもくもく会に参加した。

実務的な話を伺うことができ、非常に有意義な会となった。

バックエンド志望の初学者である私の今後の方向性を話しいく中で、「やはり手を動かしていくのが大切」だという結論に行きついたので、今のレベル感で作れそうなアプリを考えることとなった。

閃いたのがルーレットアプリである。

いつだったか、TwitterのTLで何となくそれらしきものを見かけたのが着想のきっかけだが、「課題を解決する」アイデアを考えたとき、スキマ時間に英語学習を行なっている自分自身の課題を思い出した。

言語学習は勉強するべき項目が多い。文法、単語、発音、スピーキング、ライティング、リスニング、リーディングなど色んな方面での学習が必要（何を目指すのかにもよる）。

自分が取り組んでいたのは主に英会話を目的とした、初歩的な文法だったのだが、その日の気分で勉強する内容を変えられたらいいな、と思ったりしつつもそこを自分自身で判断するのも少し、ストレスというか、ほんのりと罪悪感がつきまとうので、何かしらのツールでランダムに決めてもらって「じゃあたまには別の勉強をしてみるか」というような感覚で使えるものがあればいいな。という程度の軽い気持ちで決めた。

既出のアプリケーション。参考資料もたくさんある

ググってみたら、やはり既に欲しい機能を実装し、公開されているアプリはたくさんあった。以下のリンクは、今回制作するWEBアプリの参考にさせてもらうルーレットアプリ。

exe.tanidaiz.com

そして、製作者の技術ブログ

tanidaiz.com

なんとYouTubeで解説動画もアップされている。

www.youtube.com

さらには制作者がGithubでソースコードも公開している。

github.com

非常に優れた資料が用意されているので、思いっきりパクる形になってしまうが、製作者の胸をお借りする気持ちでWEBアプリケーションの制作をさせていただく。

手を動かしながら必要なものだけ学ぶ

実は私はJavaScriptを書いたことがない。変数だとか関数の概念はVBAを長年業務で使っていたので分かる程度。

解説動画ではjQueryや他のJSライブラリなども登場しているので、いいこいつらを学ぶいい機会だと思って制作に取り組む。

2022-04-27

【第１・２週】プログラミング学習振り返り（2022/04/10 ~ 23）

ブログプログラミング学習の振り返り

プログラミング学習第１、２週目（2022/04/10 ~ 23）を振り返る

学習記録
使用した教材
模写コーディングに取り組んだ感想「見通しが甘かった」

学習記録

2週間（14日）で53.8h(約53時間50分)

1日の平均学習時間は大体で3時間50分くらい。

第2週に入っていきなりサボったり体調不良に見舞われ、学習時間がかなり短くなってしまった。

目に見える形で残しておくと戒めにもなるので、私は全てをオープンにしていくことにする。

使用した教材

第１週(2022/04/10 - 16)

Progate(HTML&CSS 全コース)
HTML&CSSとWebデザインが 1冊できちんと身につく本

第２週(2022/04/17 - 23)

マーベルドラマ『ムーンナイト』- Disney+で配信中のドラマシリーズ公式サイトの模写コーディング

Progate(HTML&CSSコース)

HTMLで要素を作って、CSSで大きさを指定したり、色を付けたりする。楽しく、かつ分かりやすく学習できる。

以下のリンクは、Progate HTML & CSS 学習レッスン初級編へ飛びます

prog-8.com

HTML&CSSとWebデザインが 1冊できちんと身につく本(教本)

実際に閲覧されることをを想定した架空のWebサイトを作る教本。

以下のリンクは、私が実際にこの教本に着手し、一周した感想を記事にしたものです。

garbage-tech.hatenablog.com

マーベルドラマ『ムーンナイト』模写

こちらのページの模写コーディングを行おうとした

disneyplus.disney.co.jp

全く進んでいないが、私のリポジトリを掲載しておく。 GitHub - Garbage-soft/moonknight_copy: HTML&CSS practice copy_coding

学習内容としての優先順位が下がったために中断しているが、そのうち完成させたい。

模写コーディングに取り組んだ感想「見通しが甘かった」

ここでは自発的に行った学習として、模写コーディングに取り組んだ感想を述べていく

簡単そうに思ったがかなり難しかった。今回題材に選んだ、『Disney+』というサービスはとても複雑な構造をしている。

これまでにやった作業を箇条書きにすると、

要素のサイズや余白が不明だったのでPSやXDにスクショを貼り付け、直線ツールで長さを測った
検証ツールで一つ一つの要素に適用されているCSSを確認した
HTMLが凄まじい入れ子構成になっており、クラスの命名規則も不明であり、複数のCSSファイルからスタイルを適用している
どのファイルがどういった役割をしているのか確かめるべく、WEBサービスのディレクトリ構造を全てDL、模倣した

コードを書くことよりも、そのほかの作業時間の方が長くなってしまっていた。

バックエンドを志望していて、既存の静的なページを時間をかけてでも形にすることができるの（調べたらわかる程度に理解がある）なら新しい知見を手に入れるべく、次のステップにいくべきでは？という指摘もTwitter上で頂いた。

以下のリンクは学習の継続・習慣化に向けて参考にどうぞと、紹介いただいた記事である。

lukesilvia.hatenablog.com

note.com

ご指摘を素直に受け止め、作りたいものを作る大胆な方向転換

昨日まで模写をやっていましたが、大胆に方針変更して
アプリ作ります

覚悟の準備としてgithub公開しておきますhttps://t.co/tiDL9O9FcV

ルーレットアプリです。
各セグメントにテキストの反映を、
ルーレットには回転させるJSを
まずはそれぞれ実装していきます#駆け出しエンジニアと繋がりたい pic.twitter.com/a6pgm18s1t
— がべーじ＠WEBエンジニア志望 (@garbage_salbage) 2022年4月25日

前述したブログ記事(#次のステップ)にも似たようなことを書いたのだが、例えば、ギターやピアノが弾けるようになりたいと考えたとする。まず何をするか？　それはおそらく、好きな曲を弾くことから始めるだろう。極めるには基礎練が大切だったりもするが、ギターキッズはやはり好きなバンドの好きな曲を弾く。好きなロックバンドの曲を弾きたくてギターを買ったとしたなら、いきなりジャズやカントリーを弾こうとは思わない。オリジナル曲を作曲するならどこかで音楽理論を勉強する必要はあるし、他ジャンルの要素も欲しくなるかもしれない。さらにはベースやドラムなどとのバンドアンサンブルも考えなくてはならないが、そう。必要な知識は必要になってからなのだ。

31歳のおじさんの私もそんなギターキッズと同じ感じで作りたいと思うものを作ってみることとします。

方向性が明確になったのでDisney+の模写は一旦お休みします。*1

*1:MARVELドラマ『ムーンナイト』はMCUドラマ史上最高傑作だと個人的には感じております。めっちゃ面白い

2022-04-27

【HTML&CSS】「HTML&CSSとWebデザインが1冊できちんと身に付く本」を完走した話

HTML & CSS 教本レビュー

アイキャッチ

プログラミング学習、第１週目(2022/04/10 ~ 16)にやった教材の感想

結論「Progate学習内容の補足」
身に付いた考え方
次のステップ

結論「Progate学習内容の補足」

非常にわかりやすい教材だったと思う。 特にProgateでHTML＆CSSに取り組んだ後にやるテキストとしては程よい難易度だと感じた。

CSSは作るページによって考え方・書き方が大きく変わってくると思うので、デザイナーを目指している方は、この教材を一周した後に、完成形をいじってみるのも良いと思うし、さまざまなWebサイトを模写してみたり、自分でWebサイトを作ってみたりするとセオリーが見えてくるかもしれない。

私は、サーバーサイドエンジニアを志望している。なので、この先の学習ではフロントエンド方面は一旦切り上げることにして「Webページ制作」ではなく、「Webアプリケーション開発」の方向性に舵を切る。

ポートフォリオを作るときには、使いやすさ・見やすさを意識したデザイナー的な視点が必要になってくると思うので、その時にまたフロントエンドの学習をしていこうと思う。

身に付いた考え方

自分が教材を通して学んだ考え方を書いていく

なんでもdivタグで書けばいいということではない

Progateとこの教本の内容を比べたときに、しっかりとHTMLタグが使い分けられていて、「なぜ適切に使い分けることが必要なのか」その理由もしっかりと学ぶことができる

ProgateのHTML＆CSSコースはとにかくdivタグを使いまくっている。 見た目だけを完成させるのであれば、それでも十分。

だが、実際に利用されているwebページはそうではない。

クローラーという「検索順位を決める要素を収集する」プログラムの存在

Googleなどの検索エンジンを提供している企業は「クローラー」という自動巡回プログラムを運用しており、これがwebページの情報を集めている

検索結果に表示されるには「検索エンジン」というコンピュータに対して情報を知らせる必要があります。検索エンジンは、インターネット上のWebサイトを巡回してデータを集めていきます。この巡回システムを「クローラー」といい、そのWebサイトがいつ作られたのか、どんな言語で書かれているのか、などあらゆる情報を収集します。この情報をデータベースに蓄積することを「インデックス」と言い、インデックスされたWebサイトのなかから、検索窓に入力されたキーワードに対して最適なWebサイトを表示させる、というのが検索のしくみです。つまり検索結果に正しく表示してもらうには、検索エンジンが正しく理解できるようにコードを記述する必要があります。 HTML&CSSとWebデザインが1冊できちんと身に付く本 P.18 より引用

俗にいうSEO対策である。

Webページを作るときに大切にしたいのが「Webページはユーザーだけが見るものではなく、検索エンジンも閲覧している」という認識だ。

ページ共通部分の部品化「common.html」

Webサイトというのは大体こういった構造をしていると思われる

複数のページをからなるWebサイトは ヘッダーとフッターが共通のレイアウトになっていて、 メインの中身がそれぞれ違う という構成である場合がほとんどだと思う。

なので、Webサイトを作る際、あらかじめ各ページに共通する内容は「common.html」というようなファイルを作っておき、それをテンプレートとして各種ページを作っていくとラク。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>サンプルページ</title>
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <!-- header始まり -->
    <header>
      <div class="logo">
        <a href="index.html"><img src="images/logo.png"></a>       <!-- ロゴにリンクをつける -->
      </div>
      <nav>
        <ul class="global-nav">
　　  <!-- ナビゲーションリンク -->
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <!-- header終わり -->

    <!-- wrap始まり -->
    <div id="wrap">
      <div class="content"></div>
    </div>
    <!-- wrap終わり -->

    <!-- footer始まり -->
    <footer>
      <!-- フッター内容 -->
    </footer>
    <!-- footer終わり -->
  </body>

</html>

次のステップ

前述の通り、Webアプリケーション開発を行う。ちなみにJavaScriptやバックエンド周りの知識も必要とされる見通しだが、Progateでの基礎学習などの予習はゼロでやっていく。

Twitter上で知り合ったエンジニアの方から以下の記事を紹介された

遅延評価勉強法である

lukesilvia.hatenablog.com

遅延評価勉強法とは、「その知識が必要になった時に初めて勉強する方法」です。もっと言えば、「○○を学んだから××をやってみる」ではなく、「××をやりたいから○○を勉強する」と定義できます。ハッカーと遅延評価勉強法 - LukeSilvia’s diary より引用

興味のあるところから手をつけていくやり方の方がモチベーションを保てるというのはゲーム、モンスターハンター（モンハン）シリーズにハマったことのあるプレイヤーならわかると思う。

モンハンで必要な装備を作るために特定のモンスターを狩りまくって素材集めを頑張るときの精神状態に当てはめて考えるとスゴく納得できる。

狩る必要のないモンスターを狩りにいくとき、モチベはゼロに近いはず。ダラダラやったり、プレイも雑になったりしがち。

必要な装備（ポートフォリオ）を作るための素材集め（学習）には特定のモンスター（課題）が必要で、そこをピンポイントに攻めてみるやり方として、この遅延評価勉強法というものを試していこうと思う。

2022-04-17

技術的な記事はQiitaの方に書いていくことにする

ブログ

題名そのまま。技術的な内容、主にソースコードを書き込むような記事はQiitaの方で記事にしていく。

サイドバーに見出しが表示されたり、Markdown記法での描きやすさ、特に公開したときのソースコードの見やすさがはてなブログとは比べ物にならないのだ。

こちらブログには学習内容のまとめや、学習中のメンタル面などそういった振り返りを記事にしていきたい所存。

qiita.com

2022-04-15

【CSS】clearfixの考え方とやり方

HTML & CSS

clearfixとは？
やり方
- floatプロパティについて（別記事に記載）
１．floatプロパティの性質
２．clearfixで回り込みを解除する
3．完成系
- ソースコード

clearfixとは？

clearfixとはfloatプロパティを使って横並びになっている要素をdiv要素などでボックスの中に内包し、その外側に回り込みの影響が出ないようにするテクニックのこと

やり方

親要素にclearfixクラスを用意
↓
clearfixをセレクタにして疑似要素:afterを使用 ( .clearfix::after {} )
↓
contentプロパティに空の値を指定 ( content: ""; )
↓
displayプロパティに「block」を指定 ( display: block; )
↓
clearプロパティを使用して、floatを解除 ( clear: both; )

floatプロパティについて（別記事に記載）

floatプロパティの動作については下記の記事にサンプルを記している

garbage-tech.hatenablog.com

１．floatプロパティの性質

１−１．通常、親要素の高さは内包する子要素の高さに合わせて伸縮する。

ソースコード

<!-- sample.html -->
<div id="wrap">
  <div class="parent">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
</div>

/* style.css */
  #wrap {
    width: 300px;
    padding: 0 10px;
  }

  .parent {
    background-color: #cccccc;
  }

  .child {
    height: 200px;
    width: 200px;
    text-align: center;

  }

  .child:nth-child(1) {
    background-color: yellow;
  }

  .child:nth-child(2) {
    height: 100px;
    width: 100px;
    background-color: aqua;
  }

１−２．親要素の中にある子要素がfloatで配置されると、子要素を包んでいる親要素の高さがなくなってしまう

親要素（parentクラスの高さがなくなったことでグレーの色が消えている）

ソースコード

/* style.css */

  .child:nth-child(1) {
    background-color: yellow;
    float: left;  /* 追加 */
  }

  .child:nth-child(2) {
    height: 100px;
    width: 100px;
    background-color: aqua;
    float: right; /* 追加 */
  }

１−３．floatの影響でセクションの下に文書を追加するとレイアウトが崩れる

左右のボックスの段差に文章が回り込んでいる

ソースコード

<!-- sample.html -->

<div id="wrap">
  <div class="parent">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
  <p>aaaa</p>  <!-- 追加 -->
</div>

/* style.css */

  p {                 /* 追加 */
    color: red;
    font-weight: bold;
  }

２．clearfixで回り込みを解除する

２−１．親要素(parentクラス)にclearfixクラスを追加する

ソースコード

<!-- sample.html -->

  <div id="wrap">
    <section class="parent clearfix">  <!-- clearfixクラスを追加 -->
      <div class="child">子要素</div>
      <div class="child">子要素</div>
    </section>
　<p>aaaa</p>
  </div>

２−２．疑似要素「:after」を使う

疑似要素について

要素の前後にテキストや画像を追加したり、要素内の特定箇所に対してスタイルを指定することができる記述方式

/* style.css*/

  .clearfix:after {
    /* ここに必要なプロパティと値を記述していく */
  }

contentプロパティに空の値を指定

contentプロパティは、:before または :after の擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用する

/* style.css */

  .clearfix:after {
    content: "";  /* contentプロパティを追加。 値は空 */
  }

displayプロパティで「block」を指定

疑似要素:afterで生成されるボックスはインライン要素として扱われるので、displayプロパティでブロックレベル要素に指定する

/* style.css */

  .clearfix:after {
    content: "after";  /* わかりやすくするためにテキストを入れている */
    display: block;     /* ブロックレベル要素に指定 */
  }

２−３．clearプロパティを使ってfloatを解除

clearプロパティは、インライン要素に他しては無効となる
なのでブロックレベル要素として扱う必要がある

/* style.css */

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

3．完成系

ソースコード

<!-- sample.html -->
<div id="wrap">
  <div class="parent clearfix">
    <div class="child">子要素</div>
    <div class="child">子要素</div>
  </div>
  <p>aaaa</p>
</div>

/* style.css */

#wrap {
  width: 300px;
  padding: 0 10px;
}

.parent {
  background-color: #cccccc;
}

.child {
  height: 200px;
  width: 200px;
  text-align: center;

}

.child:nth-child(1) {
  background-color: yellow;
  float: left;
}

.child:nth-child(2) {
  height: 100px;
  width: 100px;
  background-color: aqua;
  float: right;
}

p {
  color: red;
  font-weight: bold;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

2022-04-12

【CSS】floatプロパティでの回り込みを解除するclearプロパティ

HTML & CSS

f:id:garbage_tech:20220412014001p:plain

ProgateのHTML & CSSコースを初級〜上級まで全て学習しました。

忘備録として、HTML要素を横並びにする際に使用するfloatプロパティとclearプロパティのサンプルを記事として残しておきます。

floatプロパティの動き
- float: left;
- float: right;
clearプロパティの動き

floatプロパティの動き

float: left;

floatプロパティは、指定した要素を左（left）または右（right）に寄せて、後続の要素を反対側に回り込ませる。
上記は、testのボックスにfloat: left;を指定。

→ testのボックスが左に配置され、後続の「aaa」「bbb」の文字が右に回り込む

ソースコード

<!--CSS-->
<style>
  .main {
    float: left;
    height: 100px;
    width: 170px;
    border: 1px solid black;
    background-color: skyblue;
    text-align: center;
  }
</style>

<!--HTML-->
<div class="main">test</div> 
<p>aaa</p>
<p>bbb</p>

float: right;

上記は、testのボックスにfloat: right;を指定。

→ 後続の「aaa」「bbb」の文字が右に回り込み、testのボックスが左に配置される。

ソースコード

<!--CSS-->
<style>
  .main {
    float: right;
    height: 100px;
    width: 170px;
    border: 1px solid black;
    background-color: red;
    text-align: center;
  }
</style>

<!--HTML-->
<div class="main">test</div> 
<p>aaa</p>
<p>bbb</p>

clearプロパティの動き

clearプロパティは、floatプロパティの回り込みを解除する。 *上記は、testのボックスにfloat: left;を指定し、後続の文字「bbb」にclear: left;を指定。

→ testのボックスが左に配置され、後続の文字「aaa」の文字が右に回り込み、「bbb」の回り込みが解除される。

ソースコード

<!--CSS-->
<style>
  .main {
    float: left;
    height: 100px;
    width: 170px;
    border: 1px solid black;
    background-color: skyblue;
    text-align: center;
  }

  .clear {
    clear: left;
  }
</style>

<!--HTML-->
<div class="container">
  <div class="main">test</div> 
  <p>aaa</p>
  <p class="clear">bbb</p>
</div>

2022-04-11

webエンジニア就職に向けての学習開始

ブログ

webエンジニアに就職するための学習を開始します。

年齢は31歳。現在は無職です。

目指す職種はサーバーサイドです。

学歴
取得資格
なぜエンジニアとして就職したいのか？

学歴

専門学校卒

取得資格

・基本情報技術者

・LPIC-１

・LPIC-２

なぜエンジニアとして就職したいのか？

理由はいくつかある。今のところすぐにはっきりと言葉にできるのは

仕事の成果（成長）を自分自身の手で実感したいから
思考が実現化した時の達成感が好きだから
日々新たな知識を得るのが好きだから（ここが大変だとよくいうがむしろこれが良い）

エンジニアという職業を知ったのは15歳の時（2005年…）

当時プレイしていたMMO内で出会ったギルドメンバーがフリーランスのエンジニアをやっているという話を聞いたことがきっかけ。

彼はバリバリにエンジニアとしてやっていたが、その当時は離島でゆるく働きながら過ごしていたようだ。

自分も何となくそういった道に進みたいと考えていたし、高校の卒業文集には「フリーランスのエンジニアになる！」みたいなことを書いていたが、勉強の仕方が全く分からず、新卒で就職する時もこれから先ずっと続く技術へのキャッチアップにビビって別の職種を選んだ。

大人になり、強く実感したことは「社会に出たからといって勉強をやめて良いわけではない」ということだった。

それまでは事務、接客、製造などアルバイト含め様々な仕事をやってきた。

結局、スキルらしいスキルは付かず年齢だけ重ねていくような現状にかなり危機感を感じ、改めてエンジニアという職種に関心が向いた。

というよくある理由です。