プログラマー日本語教師への道

Web制作・プログラミング未経験の日本語教師がプログラミングを独学で勉強し、独立するアウトプットの場

ProgateのHTML・CSSコースを終わらした率直な感想

とうとうProgateのHTMLCSSコースを終わることができました!!

が、この次に何をして良いのか全く分からず、迷子状態になりました。

なぜそうなったのか、そしてProgateのHTML・CSSコースってどうなの?って知りたいこれからの初心者のために率直な感想を書いていきます。

 

ProgateのHTML CSSコースは初心者には神

全くの知識ないような私にはWebページってなんか難しそう・・・

文字列並んでて、なんかハッカーみたい。

 

そんなイメージしか持っていなかった私ですが、Progateを初めて2週間ほどでHTMLCSSコースを終わらせることができました。

 

ぶっちゃけた感想としては、超分かりやすい!分かり易すぎて、自分かWeb制作してる気になって来ちゃいます。

そして、簡単ジャンと!錯覚を起こすレベルまでに分かりやすい説明と手順で、初心者のなんか難しそう・・・の壁を取っ払ってくれました。

 

どこにコードを書けば良いのか、何を書けば良いのかなど迷いがちな場面も多々ありましたが、ほぼ説明通り・指示通りの作業を行えば簡単に次のステップに進むことができました。

 

これは、初心者の私に取っては本当にありがたいことで、諦め癖がある私。難しいと思ったらすぐ諦めてしまう私ですが、最後までやり遂げることができました。

やり遂げると言うよりは、やらされている・ひっぱって行ってもらっている。に近いような感じがします。

 

指示に従っていれば、次に進むと言うステップは受け身の姿勢になってしまい、勉強というよりは、やらされている学校の授業というような感覚でした。

 

しかし、私のような未経験・無知識の者には、どう勉強して良いか、どう手を動かせば良いかも分からないので、まずは最初のステップとしては素晴らしい物だと思いました。

 

逆に言えば、Progateだけでは実力はつかないとも言えます。

 

なので、Progateでは学校で言う、勉強の仕方を教わり、ノートに書き写した状態で、

Progateが終わった今は、練習問題やテストなどはしたことがないような状態になった気がします。

VScodeにセミコロンの自動入力追加して消してみた

f:id:ryo1192:20210206030847p:plain

ProgateのHTML CSSコースが終わり、ドットインストールでHTML CSSを勉強し始めて、自分でコードを書くことに若干興奮するコーダー初心者ですが、

Progateから入った者としては、VSCodeでCSSのコードを書く際にセミコロンが自動で入力してくれないという、ちょっとした一手間にぶち当たりました。

 

あれ、おかしいな。。。

あ、セミコロン入ってないわ・・・

 

なんてことドットインストールを始めてからやたらこの問題にぶち当たるので、Progateのように自動で入力してくれないかと調べてみました。

VScodeにセミコロンの自動入力追加

調べてみると、追加機能にセミコロンを入力するショートカット があるようです。

 

Visual Studio Codeで行末にセミコロンを入力するショートカット – アウトプットしながら学ぶ

 

実際に追加してみましたが、結論から言うと、セミコロンを押す手間とショートカットを押す手間がほぼ同じだったので、追加してから即アンインストールしました。

 

ショートカットボタンを押すことでセミコロンを入力しても、結局ボタンを押すという作業は変わらない。。。

ノータッチの自動入力機能なんてないものかと、とりあえず初心者の私は忘れないように押そうと決意するのでした。

HTML CSS の省略英単語が気になって集中できない

HTML CSS の省略英単語が気になって集中できない

f:id:ryo1192:20210206025636p:plainHTML CSSを勉強し始めて、はや2週間となりました。

タグやコード?を書き加える際に、英単語の省略文字を多用しており、

この英単語は何?SRCって何?

としばしばなるのです。

 

海外に住む私は、コードをそのまま覚えるより、何の英単語を使っているのかを知る方が覚えやすいので、調べてみました。

 

HTML CSS の省略英単語

もちろん、コードは覚えるつもりはないですが、

私のような初心者がProgateとドットインストールでよく見かけるコード等をしっかりと理解するためにいくつか調べてみました。

 

  • src → source 画像のURL
  • img → image 画像
  • href  → hyper reference
  • → anchor
  • alt →Alternative text  画像の説明
  • div   → division 境界や仕切り
  • h  → heading 「表題」「見出し」
  •       paragraph
  • ul        unordered list
  • li        list item
クラス名

自分でクラス名をつける際に、何でも良いみたいですが、分かりやすいようにクラス名を英単語でつけると言うのもまた混乱します。

調べてみると、オススメのクラス名をまとめてくれている方がいたので、シェアしたいと思います。

webabc.hatenablog.jp

HTML CSSの学習に切り替えました

f:id:ryo1192:20210130192346j:plain

Python学習を辞めHTML CSS

Pythonを勉強し始めましたが、果たして超初心者がPythonを学習し始めて大丈夫なのかと不安になり、いろいろと調べてみると、

  • Python学習は一年かかる
  • 案件はあまりない

など結構不安になるようなことばかりが書いてあり、超初心者の私は何を信じていいのかわからない結果に。。。

 

そこで、超初心者はまず基礎を固めて、Web制作で稼げるようになったら、徐々にプログラミングに手を出していこうという事にしました。

何事にもメンター・参考にする人・目標にする人などが必要なので、以下の方たちを目標に始めていきたいと思います。

shogo-log.com

kino-code.com

 

特にしょーごログさんはフリーランスとしてWEB制作を行っているとのことで、月50万も稼ぐつわもの(動画内で言っていた)

なので、Pythonで稼ぐよりもWEB制作で稼げるようになった方が一番夢があるんじゃないかと思い、急遽勉強内容を変更することにした。

 

Progateで勉強

引き続きProgateを使い有料課金を することにしました。

学習内容の切り替えを決めてから3日ほど経ちましたが、ProgateでHTML CSSの上級編までは終わることができました。

中級まではポンポンと進むことができましたが、上級からレベルが段違い!!

RPGでいう、初期装備で最初の村周辺の魔物を殺しまくってたけど、次の村から魔王が待ってるみたいな

それほど、難しい。こんなのを完璧に理解してWEB制作の仕事を受けられるのかと正直不安になっています

 

さらに道場コースが段違い

さらに自分でコードを書いてWebページを書かせられる道場コースはマジ魔境

自分でクラスを与えて0から書かないといけないので、どこがどれと繋がっているのか、ちょっと気を抜いたらパニックに。

 

何週もしてはいけないと多くの方が言っているので、とりあえず、もう一周ぐらいして他の事をしていこうかと思います。

【Day1】Python学習|Progate勉強内容まとめ・問題ミス

f:id:ryo1192:20210115112311j:plain

Pythonの学習一日目【Progate】

覚えることが多くて大変。

ブログを使って、ここに学習内容を記載し、Progateで間違えた問題をミス部分と一緒に記載

 

コンソールへの出力方法

まず初めに、

printを用いてコンソールに出力する

print('hello')のように括弧内に文字を入れていく。

文字を入れる際は ' (クオーテーション)または " (ダブルクオーテーション)を文字の前後に入れなければならない

これらを入れないと何も表示されなくなる。

 

#メモ

#を書くと何も表示されないメモ書きのような扱いになる

 

数値を出力するとき

数字を出力するときは文字の場合と異なる

Print(4)のように'(クオーテーション)の必要がない

 

文字計算

文字を計算する際には

+ 足し算

- 引き算

* 掛け算

/ 割り算

% 割り算のあまり

を使い数字に割り当てていく

 

print( 5 + 3)

のように表記する。

ポイントは二つ

  1. 同じくクオーテーションは使わない
  2. 記号前後はスペースを空ける

1クオーテーションを使うと文字として認識されるので

print('5+3')だったら

5+3という文字として出力される

 

2の記号前後のスペースは問題で何度も間違えたので、記号を入れたらスペースのように無意識に打つようにした方がいい

 

変数と値

HTML・CSSのように同じくタグのような考え方があり、

好きな名前の箱・タグ(変数)を作り、その中に物(値)を入れる

name  = 'jose'

=(イコール)を使って、右側の変数に左側入れるよ!という表記の仕方をする

これを変数名nameにjoseを代入する

と呼ぶみたい。=は同等という意味ではなく、Pythonでは代入する(右に左を入れる)

という考え方なので、同等と思わないように気をつけたい

 

数値、文字の場合も上記のようにクオーテーションを忘れないように!

 

変数名を出力

printで出力する際に、変数名を括弧の中に入れれば、変数名に代入した値を出すことができる

 

name = 'jose'

print(name)

 

のように書くと、joseが出てくる

※括弧内にクオーテーションは使わない!!

使うと、文字になってしまうから

 

変数名は英語

変数名は好きな名前と書いたが、英単語を使わなければならない

数であればCountなど。

しかし、変数名の中にはプログラムの名前で使われているものもあるので、知らないといけないよう。

まだ、始めたばかりでほとんど知らないので、存在するものをひとつずつ見ていくしかない

 

変数名同士の計算も可

足し算・掛け算・・・・

などの計算方法も直接使うことが可能

print(apple_count + orange_count)など

※ここでも注意しておきたいが、計算式の前後スペースが必要かもしれない。

正直わからないが、Progateの問題で答え合わせで間違い部分としてでていたので、一応わかるまでは空けておこう。

 

上から下へ更新される

変数名を常に更新することができるので、下に書いてあるものが、最新のものになる

上から順にみていけばいい。

 

データ型

これ結構苦手

文字と数字を区別しなければならず、一緒に出力ができない。

例えば、「今日は3回水を飲んだ」は

  • 今日は・回水を飲んだ
  • 3

の二つに分けて考えなければいけない。

 

文字→文字列型

数字→数値型

 

この二つを一緒に出力するにはどちらかを同じ属性に変える必要がある。

変換器を使うようなものかな?

それを型変換と呼ぶ

 

数値型→文字列型str()

文字列型→数値型int() 

 

price = 3

print('今日は水を' + price + '回飲んだ') これはダメ!数字と文字が混合してるから

 

print('今日は水を' + str(price) + '回飲んだ') priceを文字型に変える

 

  • 文章が二つなどに分かれる場合は前後にちゃんとクオーテーションを使う
  • 計算記号の前後はスペースを空ける

条件分岐

「もし~だったら」という条件を作ることができる

いくつもの条件を作ることができ、最終的にそれらの条件に当てはまらなかったら、これ。みたいなものをつくることができる

 

score = 100

if score == 100:

    print('OK')

のように書く

覚えるべき記号意味

ここで新しい記号が出てきた

== 等しい

!= 等しくないときTrue

< 

>

<=

>=

より大きい・小さい

より以上・以下

の使い方をする。中学校で習った通りだが、>=は=のあとに>の方がよくない?という突っ込みはしないでおく。

 

大切な注意点

if を使うとき2点間違えやすい注意点

  • 必ず:をifの行に使う
  • printは必ず4スペース空ける

 

条件分岐elifとelse

条件分岐でIfを使う際に、その他の条件、当てはまらない場合。を設定するときに

elif elseを使う。

条件追加はelif

すべて当てはまらないときはelse

 

条件の追加方法はifの時とほぼ一緒

:を忘れないこと!!

 

elseは条件を入れる必要がないので、そのままelse:のように書く。

else:と覚えておけば、どこに:をif elifにいれるのかわかりやすくなるので、このまま覚えた方がよさそう。

 

リスト

一つの変数に何個も代入することができる

name =['jose','maria','john']

のように複数入れられる

print(name)と書くとすべて出てくるので、何個目と指定して個別に出すこともできる

 

print(name[0])のように書く

注意点
  • []で挟むのと書く文字に' と,を忘れないように!
  • 数え方は0から

リストの更新と追加

リストの中身を書き換え・追加することができる

もちろん上から下へ見ていく。

 

name =['jose','maria','john']

のjoseをdaniに更新する場合

name[0] = 'dani'

と記入すると変更されている

この場合文字なので''を忘れないように!

 

リスト.append('追加する名前')

のように書く。するとリストの最後に追加されている

 

 

間違えた問題たち

x = 20
# 変数xが10以上30以下の場合に「xは10以上30以下です」と出力してください。
if 10 <= x and x <= 30:
print('xは10以上30以下です')

y = 60
# 変数yが10未満または30より大きい場合に「yは10未満または30より大きいです」と出力してください。
if y < 10 or 30 < y:
print('yは10未満または30より大きいです')

z = 55
# 変数zが77ではない場合に「zは77ではありません」と出力してください。
if not z == 77:
print('zは77ではありません')

 

数値→文字列にするかと思ったが、いらなかった

より大きいは含まない

以上が含む

 

# apple_priceという変数に数値200を代入してください
apple_price = 200

# countという変数に数値5を代入してください
count = 5

# total_priceという変数に、apple_priceとcountを掛けたものを代入してください
total_price = apple_price * count

# 「購入するりんごの個数は○○個です」となるように出力してください
print('購入するりんごの個数は' + str(count) + '個です')

# 「支払い金額は○○円です」となるように出力してください
print('支払い金額は' + str(total_price) + '円です')

文字列とSTRを組み合わせるときにつながり部分に「'」を必ずつける

 

まとめ

大体2時間ほどで終わることができた

文法をひたすら覚えるので、果たしてこれらがどうアプリ作成に使われるのかチンプンカンプンの状態であるが、とりあえずひたすら覚えていこう

 

勉強時間 2時間

 

 

【初投稿】プログラミング独学スタート

f:id:ryo1192:20210114094721j:plain

日本語教師として働き早5年

日本語教師の限界を感じている日々です。

 

コロナで対面授業は難しくなり、学生数も減り、オンライン授業へ移行したものの生徒数は減るばかり。

 

生徒がいなければ何もできないこの職業に限界を感じています。

0から何か作り上げるものがほとんどなく、あるものをわかりやすいように教える。

 

そんな毎日がコロナウイルスでさらに不安が募ります。

 

そこでこのコロナウイルスを気に人生の転換期にしようと思い、プログラミングを独学で始めてみます。

 

Progateというサイトで少しづつ勉強してゆき、ゆくゆくは自分でサービスの作成・アプリ開発などを目標に行っていきます。

 

インプットだけだと成長も止まってしまうので、このブログにその日勉強したことをアウトプットしていきたいと思います。

 

HTML CSSは2年前にちょこっと独学でかじり、CSSのPadingなどで挫折したので、とりあえずそこには触れず、Paythonから始めてみようと思います。

まずはPythonを使い、データを抽出し統計などをとれるレベルまで行い、そこからクラウドワークなどを使い1万円を稼ぐことを目標にしていきたいと思います。

 

何事にも、ゴールを設定してからスタートする。

これがとても大切だと思っています。

2021日1月14日の今日スタートし、期限は3か月で上記の1万円を稼ぐまで頑張ってみようと思います!

 

アウトプットブログになりますが、このブログにたどり着いたかた、温かい目で応援していただけると嬉しいです!

それではよろしくお願いいたします!