2019-05-15

現状について振り返ってみた

〜してみた

こんにちは、チャビです。スクールでのカリキュラムが終わり、今後について悩んでいるところです。考えの整理も含めて振り返りをしてみたいと思います。

スクールを終えて

今、私が目指している理想はフロントからバックエンドまでをこなし、誰かの役に立つサービスを提供できるようになることです。

現時点の評価ですが・・・

圧倒的に力不足！！！

これはスクールのせいだとは思っていません。むしろスクールにはITワールドのスタート地点に立たせてもらったと感謝しています。

（決して安くはなかったけど笑）

悲しいかな、私の力不足で明らかに基礎的な理解がまだまだ足りないと実感。

今の現状を振り返る

わかったこと、できるようになったこと

コードを書くということがどのようなことか分かった
webサイトの模写が少しできるようになった
勉強をする習慣ができた
「webサービスに関わる知識や技術」がどういうものか少し分かった（言語、DB、開発、環境構築、アルゴリズム、ネットワーク、パソコン etc）

やりたいこと、やってみたいこと

webサービスの開発
アプリの作成
40才までに転職活動（年齢：38才　状況：妻子もち、住宅ローンあり、からかなり厳しい道であると自覚）
IT技術で稼ぐ力をつける

気になっていること

オラクルマスター
Linux技術者認定試験（LPIC）
TechCommit（オンライン学習支援サービス）
ProtoOut Studio（プロトアウトスタジオ）
Shibajukuってなに？ | Shibajuku 　 3期生で入ろうと思っていたら定員に達していて入れず・・・

足りないこと

圧倒的にスキルが足りない（Ruby、Ralis、html、css、javascript、mysql、AWS、linux、ネットワーク、アルゴリズム、etcの基礎）
スキル別にどんな案件があるかをしっかりと把握していない

どうやってギャップをうめていくか？

カリキュラムの復習　⬅︎今このへん
ドットインストールとProgateで基礎固め　⬅︎今このへん
エージェントで情報収集しスキル別の仕事内容をしっかりと把握する　⬅︎これ大事！早よやれっ！
Rails チュートリアル
ポートフォリオ作成
Udemyで勉強
デザインの勉強（webサイト、UIデザイン）
ec2サイトの作成
webサイトの作成
勉強会へ参加し情報収集と人脈作り

まとめ

転職は難しいかもしれないが動いて情報収集はしてみたい
スキル別の仕事内容をしっかりとリサーチする
本業はあるので焦らずコツコツとできることを積み上げて選択肢を広げていく
細かすぎる目標はおかず方向性や軸を明確にしスキルや経験を積み上げていく

2019-05-06

本日の学習 Vol.5

勉強 html css

こんにちは、チャビです。今日はhtmlとcssの復習についての備忘録です。

aタグのhref="#"

topに移動。忘れてた。。

aタグのtarget="_blank"

リンク先を新しいタブで開くようにできる。

`display : table;`で要素を並び替える

横並びに要素を並べる時に活用できる。

書き方

横並びにする要素を囲うブロック要素へdisplay : table;
横並びにする要素へdisplay: table-cell

参考url

app.codegrid.net

box-sizing: border-box;でブロック要素をレスポンシブに対応

要素の高さと幅にpsddingとborderを含めることができるようになる。レスポンシブ対応する際にborderの指定pxを気にしないで良くなる。

参考url

saruwakakun.com

2019-05-02

本日の学習 Vol.4

勉強 html

こんにちは、チャビです。今日はhtmlの復習についての備忘録です。

表の作成

web上で表を作る方法です。

書き方

表にする部分をtableタグで囲う
見出し部分をtheadタグで囲う
本体部分をtbodyタグで囲う
それぞれの行をtrタグで囲う（trはtable rowの略）
見出しのセルをthタグで囲う（thはtable header cellの略）
本体部分のセルをtdタグで囲う（tdはtable data cellの略）

サンプルコード

表の代わりにカレンダーを作ってみました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="chabi_ym.ico">
    <style>
        header h1 {
          text-align: center;
          color: dimgray;
          font-family: 'Times New Roman';
          background-color:silver;
          margin: 0;
        }
        body {
          height: 100vh;
          margin: 0;
        }
        .calender {
          background-size: cover;
          background-image: url(https://image.shutterstock.com/image-photo/woman-sitting-on-top-skyscraper-260nw-326054666.jpg)
        }
        table {
          width: 100%;
          height: 100vh;
          margin: 0 auto;
        }
        td {
          text-align: center;
        }
        .public-holiday {
          color: orangered;
          font-weight: 800;
        }
    </style>
  </head>  
  <body>
    <header>
      <h1>May 2019 Calendar</h1>
    </header>
    <div class="calender">
        <table>
          <thead>
            <tr>
              <th>日</th>
              <th>月</th>
              <th>火</th>
              <th>水</th>
              <th>木</th>
              <th>金</th>
              <th>土</th>
            </tr>
          </thead>    
          <tbody>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td class="public-holiday">1</td>
              <td class="public-holiday">2</td>
              <td class="public-holiday">3</td>
              <td class="public-holiday">4</td>
            </tr>
            <tr>
              <td class="public-holiday">5</td>
              <td class="public-holiday">6</td>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td>10</td>
              <td>11</td>
            </tr>
            <tr>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
              </tr>
            <tr>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
              </tr>
          </tbody>
        </table>
      </div>
  </body>
</html>

こう書くと、

f:id:chabikun:20190502235217p:plain

こうなります。

2019-04-30

本日の学習 Vol.3

勉強 html

こんにちは、チャビです。今日はhtmlの復習についての備忘録です。

ページ内リンク

サイトによくあるクリックするとページ内の任意の場所に飛ぶ機能ですね。

書き方

飛ばしたい場所にidを設定

<h1 id="number1">1番</h1>
<h1 id="number2">2番</h1>

クリックする場所に「#id」を設定

<ul>
  <li><a href="#number1">1番へ</a></li>
  <li><a href="number2">2番へ</a></li>
</ul>

これで完了。

こういうやつね、よくある！

f:id:chabikun:20190429235828g:plain

2019-04-29

本日の学習 Vol.2

勉強 html

こんにちは、チャビです。今日はhtmlの復習についての備忘録です。

リストの作成

箇条書き、順番のあるリスト、入れ子のリスト、などが作成できます。

1. 箇条書き

<ul>
  <li>どんな仕事をしたいか？</li>
  <li>そのために必要なことは何か？</li>
</ul>

こう書くと

● どんな仕事をしたいか？

● そのために必要なことは何か？

こうなります。

ulは「unorderd list」の略

liは「list item」の略

2. 順番のあるリスト

<ol>
  <li>どんな仕事をしたいか？</li>
  <li>そのために必要なことは何か？</li>
</ol>

こう書くと

1. どんな仕事をしたいか？

2. そのために必要なことは何か？

こうなります。

olは「orderdl ist」の略

liは「list item」の略

3. 入れ子のリスト

<dl>
  <dt>どんな仕事をしたいか？</dt>
  <dd>クリエイティブな仕事につきたい</dd>
  <dt>そのために必要なことは何か？</dt>
  <dd>専門分野の知見</dd>
</dl>

こう書くと

どんな仕事をしたいか？

　　クリエイティブな仕事につきたい

そのために必要なことは何か？

　　専門分野の知見

こうなります。

dlは「description list」の略

dtは「description term」の略

ddは「description detall」の略

2019-04-28

本日の学習 Vol.1

勉強 html css

こんにちは、チャビです。フロントから復習を始めたので備忘録を残していきたいと思います。今日はcssについてです。

色の指定

３パータンの方法で指定することができる。（以下は赤色の指定）

1. 色名で指定する

h1 {
color: red; *指定
}

2. `rgb()`で指定する

h1 {
color: rgb(255, 0 , 0); *指定
}

引数が順番に「赤、緑、青」。

色の濃さを指定する。

絵の具で混ぜるようなもんですね。

3. 16進数で指定する

h1 {
color: #ff0000; *指定
}

該当桁が同一の場合は省略可能で以下のように指定しても同じ。

数字２桁ずつが、それぞれ「赤、緑、青」を指す。

h1 {
color: #f00; *指定
}

今思うと2番目と３番目の書き方の理解が不足していたのは10進数以外をしっかりと理解していないからでした。

いやぁ本当に恥ずかしい。

ネットワークの本を読んだりしている内に2進数や16進数の理解がほんのちょっとだけ進みました。

親要素の設定を引き継ぐ

inheritで指定する

body {
color: red; *指定
}

と親要素がなっている場合は

a {
color: inherit; *指定
}

で親要素のプロパティを引き継ぐことができる。

指定するタグを限定する

1. 親タグ半角スペース子タグで記述

header h1 {
color: red; *指定
}

header以外に配置されているh1タグは影響を受けない。

2. より細かく指定する

header li > a {
color: red; *指定
}

header内のli内の直下にあるaタグに指定することができるので、header内の直下にあるaタグは影響を受けない。

marginの相殺

上下で隣接するタグにそれぞれmarginが設定されている場合は設定値が大きいタグの値が優先される。

あまり、意識しないでガチャガチャとコードをイジってました。

あぁ反省。

2019-04-28

スクールの最終課題を終えて

こんにちは、チャビです。

最終課題を終えて、少しホッとしているところですが、学習内容の振り返りと感想を残しておきたいと思います。

最初に先ず言えること

「スクールに通ってなければ間違いなく挫折していた」

ここについては本当に良かったと感じています。

「ITスキルゼロの全てが未経験」の私にとって大きかったのは

教室でのサポート体制と雰囲気作り、専属のコーチがついてくれることによりモチベーションの維持ができた点です。

これからも継続して勉強できる土台ができたことはとても大きな価値となりました。

これまでの学習内容

1. html

hamlを使用した記述
メルカリのwebサイトの模写

2. css

sass記法
基礎的な記述（文字、背景、フォント、テキスト、幅、高さ、余白調整表示位置、リストなど）

3. javascript

イベントの発火
良く使うメソッドの記述（on、hide、show、fadeout、fadein、append、remoove、attr、val、this など）

4. ruby rails

twitterを模したアプリとチャットでメッセージ送信と画像投稿機能があるアプリの作成
部分的にメルカリのwebサイトのクローン開発
上記アプリ内にてAjaxを用いた非同期通信機能の実装
上記アプリ内にて自動更新機能の実装

5. デプロイ

AWSで環境構築しデプロイ
capistranoを用いた自動デプロイ機能を実装

6. チーム開発

gituhbを用いたチーム開発を経験
４人でチーム開発を行いAWS環境へデプロイ

現状の課題

1. 継続して学習を進めるための環境を準備するにはどうするか？

通っていた教室が卒業となるので、継続して勉強をしていくにあたり、何をどうやって進めていくかを決める必要がある。また、不明な点を解消していくための手段を決める。（今まではメンターへ相談できる環境のため）

2. 勉強内容の絞り込みをどうするか？

目指すべき方向性を明確にし優先的に勉強すべき内容を整理する。方向性としてはフロントからバックエンド、環境構築までをワンストップで提案できるエンジニアになりたいと考えている。その為に先ずはフロント周りの知見を勉強していきたい。

3. 今まで勉強してきた内容を定着させるにはどうすべきか？

薄塗りで広範囲を駆け足に勉強してきたので、基礎的な部分でもまだ曖昧な部分がある。基礎固めをしっかりとしていきたい。

4. 学習が自走できる状態までレベルアップしたい

これについては地道な積み重ねが必要であると考えている。基礎的な部分をしっかりと理解を進めてその領域を着実に広げていき明確な質問ができるようになりたい。

まとめ

最終課題はチーム開発でしたが、とても有意義な経験となりました。

githubの有用性も肌身をもって体感した
開発は最低限の機能から実装していくのが良い
データベースの設計と理解は大事
デプロイは後回しにすると厄介

本当に始めてみないと分からなかったこと、気がつかないことばかりでした。チームのメンバー、半年を通じてサポートしてくれたスタッフに本当に感謝します。

スクールを終えて

今の現状を振り返る

わかったこと、できるようになったこと

やりたいこと、やってみたいこと

気になっていること

足りないこと

どうやってギャップをうめていくか？

まとめ

aタグのhref="#"

aタグのtarget="_blank"

display : table;で要素を並び替える

書き方

box-sizing: border-box;でブロック要素をレスポンシブに対応

表の作成

書き方

サンプルコード

ページ内リンク

書き方

リストの作成

1. 箇条書き

2. 順番のあるリスト

3. 入れ子のリスト

色の指定

1. 色名で指定する

2. rgb()で指定する

3. 16進数で指定する

親要素の設定を引き継ぐ

inheritで指定する

指定するタグを限定する

1. 親タグ半角スペース子タグで記述

2. より細かく指定する

marginの相殺

これまでの学習内容

1. html

2. css

3. javascript

4. ruby rails

5. デプロイ

6. チーム開発

現状の課題

1. 継続して学習を進めるための環境を準備するにはどうするか？

2. 勉強内容の絞り込みをどうするか？

3. 今まで勉強してきた内容を定着させるにはどうすべきか？

4. 学習が自走できる状態までレベルアップしたい

まとめ

`display : table;`で要素を並び替える

2. `rgb()`で指定する