開発時のエラー例(二か月)

アプリの開発時に
躓いたところ(二か月目)

最初は
基本的なhtmlやｃｓｓのＵＩと
呼ばれる描画について
勉強を始めました。

現在では私は
コンピューターが理解しやすい部分と
人間が視覚的にとらえて
理解できるところを
分けて考えます。

これができるようになるのに
二か月ほどかかりました。


最初はフロントエンドやＵＩと
呼ばれるところについての理解から
進めるのがよいと思います。

最近はjavescriptの開発も
しようと考えているので三か月目には
取り掛かることになるとは思いますが
基本的にプログラムというのはこのjavascriptのことを指すと
私は考えています。

ホームページの作成からhtmlやcssの理解を深めていくのですが
基本的には部分的な変更をしながら使えるＣＳＳをネット上から切り貼りする
つぎはぎで構わないので描画が崩れないように理想とするＵＩを作っていきます。



最初に作ったものがこちらで現段階ではまだ完成ではないです。

最初の一か月目にできたものがこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/e4206283-ff6b-0cc7-2dc9-8383c1824116.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/40ca29e2-cdef-488c-d7d5-a512371e5ace.png)

バックエンドの機能は知り合いが作ったもので基本的には
アンドロイドで開発環境を整えるものでした。

<pre>
<code><body><div style="background-color: #EDF7FF;">一緒にHTMLを学ぼう！
  </div></code></pre>

<pre>
<code> body{background-color: 色の指定;}</code></pre>

UIデザインの変更を行うために背景色background のcssの変更をしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/37417658-c52f-7154-3b76-12d581b4bdd1.png)

次にメニューを追加しました。





<details><summary>メニュー
</summary><select name="month">
<option value="jan">1月</option>
<option value="feb">2月</option>
<option value="mar">3月</option>
<option value="apr">4月</option>
<option value="may">5月</option>
<option value="jun">6月</option>
<option value="jul">7月</option>
<option value="aug">8月</option>
<option value="sep">9月</option>
<option value="oct">10月</option>
<option value="nov">11月</option>
<option value="dec">12月</option>
</select></details>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/6957c01c-ec7e-5e0e-1e26-0d75b4e1cb93.png)






![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/44d7fc7b-a0c4-7f6b-66bb-44c8af9880e0.png)

コンテンツとしてキャンバスを追加したり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/9713d1cb-6dbb-d814-57a7-cf40970c280a.png)



 


キャンバスをお絵描きできるように変え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/ec62564e-6f09-1e34-448d-924c0fc70315.png)

メニューのデザインを変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/d585f38d-c606-54da-007e-39ad1f157724.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/60bfc52e-1e53-45d8-5aba-79cd4b42092d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/8bca95be-53c7-198a-1f43-58707e97dab9.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/b1e01ae5-5bd9-b412-eeac-02a41edfc763.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/cfde9519-dd19-2d56-8895-83d9b43bf4ee.png)

この辺りは基本的にCSSを変更してます。

メニュー蘭を細かく変更してます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/51e0dedd-5300-20e0-43c2-c148026f2db0.png)

ここでjavascriptに興味を持ち出しました。約一か月目くらいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/35a385b2-4629-0ec7-aac3-bff32aa5c35f.png)

そして現在のアプリの形式に変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/ae87aeb5-47d2-01e3-2061-bf49888a1dc8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/ea414646-7463-9a1b-d978-542acd83edbe.png)

javascript開発のために
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2231259/d460db36-3723-ddeb-a233-b04b6a205119.png)

開発環境を整えました。
くわしくはこちら。https://www.youtube.com/watch?v=MeqS1BCrRZI