コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

どこまでできるか分からないけどもNをやってみる。

2020年 Nの旅

コロナの影響で某学習サイトが無料開放しているのでできるところまで進めていこうと思ったんでやってみることにしました。

f:id:andron:20200419085049p:plain
てなわけでしてこれやってみることにした。


ちなみに一部のレッスンでの評価となりますが評価としてこんな感じのやつだそうです。別に悪いこといっているやつでもないから魚拓を引っ張ってくる必要は全然ないのですが、僕がこれから書くことと確実に相性悪いから魚拓で載せておきます。
【魚拓】N予備校プログラミング入門コースの難易度がおかしい - Qiita

ネットとかだと絶賛されているこれなんですが、今の時代プログラミングスクールとかでもこのぐらいの内容のカリキュラムが普通になってきていて人材の大量生産と品質確保が安定してきているのでプラスアルファで何かなければここに書いてある採用とかは多分力不足で落とされます。若さでアピールとかならまあチャンスはあるのだろうけど……。具体的にあげちゃうとB社とかR社とかは完全に避けると思う。うん、現実は悲しいね………。

まあそういう話はいいや。

てなわけで、やっていこうと思います。無料で使わせて貰ってる分際でカリキュラムマルパクリなことやると確実に怒られるんである程度好き放題やったりやらなかったりしたやつをこのブログに書いたり書かなかったりしていこうと思います。僕は多分月額1000円払ってもこれで世界が変わるとか代金分の元が取れるとかいう希望が全然見えないんですよね………。コロナの影響だけでなく不況のまっただ中だったりしますし……。まあ、失敗だとして成功だとしてもやってみた人間はこうなるんだよっていうのを残す目的でやろうと思います。


今回やったこと!

まあやりもしないのにうだうだ言ってもアレですしやったことをば……。
f:id:andron:20200419152912p:plain
とりあえず第0章と第1章を。第0章はオリエンテーション的な内容になります。

おおまかな内容はこんな感じです。
1. はじめに
 僕的には超重要なこと書いてあると思ってる。プログラミングの歴史とかコンピュータサイエンスの云々とかでなくフォーラムの使い方とか正しい検索の仕方についてのお話です。はじめにHRT原則とかそういう話をすることでコミュニティがギスギスしないよとかそんな感じの内容になります。まあ、ここのコミュニティが学生コミュニティなんで上から目線のとかなさげな感じしますが……。

HRT*1が何かわからない場合はけものフレンズを見よう!


2. プログラミングを体験してみよう
 ブラウザのデベロッパーツール使ってalert("Hello World")してみようとかそんな内容。


3. はじめてのHTML
 主にVSCodeの使い方な話と基本となるHTMLタグの話になります。
 高浜虚子の俳句
 こんなんつくれるようになります。すっごくシンプル。


4. さまざまなHTMLタグ
 タグについてのお話。tableタグとかliタグとかそういう感じのやつをざっくりと……。


5. HTMLで作る自己紹介ページ
 これまでに学んできたHTMLタグを使ってWebページ作ります。
 Andoの自己紹介
 こんなんつくります。作ったやつはCSSで装飾しちゃってるけどもこれのHTMLをつくっていく内容になります。


6. はじめてのJavaScript
 Document.write() - Web API | MDN
 JavaScriptを実際に書いてみようの話。使っているものはDocument.write()メソッドなのでまだ複雑なことはしないです。


7. JavaScriptでの計算
 円の面積を求める
 四則演算とかの計算してみましょうとかそんな内容になります。上のリンクみたいことやります。


8. JavaScriptで論理を扱う
 チケットの値段を求める
 条件分岐の使い方についての内容になります。上のリンクみたいなことやります。


9. JavaScriptのループ
 FizzBuzz
 ループの使い方についての内容になります。上のリンクみたいなことやります。


10. JavaScriptのコレクション
 コレクションを使ってもとめる
 内容としては上のリンクにあるようなやつです。ざっくり説明しようとするの難しかったんでリンクみて感じ取ってください。まあ配列についての話題やっているって感じになります。


11. JavaScriptの関数
 関数をつくる内容です。

function something(arg){
  return arg;
}

 みたいなやつを自作できるようになろうとかそんな感じの内容です。


12. JavaScriptのオブジェクト
 オブジェクトの使い方についての内容です。
 時間あてゲーム
 上のリンクにあるようなやつつくれます。ところで、ここまで Liveweave 使って例出してみたんですがこのサイトバージョン管理できなくて使いづらいね……。



13. はじめてのCSS
 自己紹介ページの装飾についてやりました。どんな内容化は5の自己紹介ページのCSS見てみて。


14. CSSを使ったプログラミング
 くるくる回してみる
 何をするのかというと上のようなやつ作ります。CSSJavaScript使ってアニメーションさせます。最近のCSSJavaScriptで制御せずともアニメーションできるよとかそういうのは禁句……。


15. Webページの企画とデザイン
16. 診断機能の開発
17. 診断機能の組込み
18. ツイート機能の開発
 あなたのいいところ診断
 ここから3-4回にわたってあなたのいいところ診断(上のやつ)つくります。

 Twitter Publish
 Twitterの埋め込みとかはこういうのあるらしいですね。


第1章はこんな感じの内容になります。んで第8章にあるおまけコンテンツのポートフォリオサイトをつくろうと組み合わせるとこんなんできます。
andou666.github.io
これで章終えるたびにコンテンツを追加する楽しみができました。


感想なんですがGitHubの設定(歯車アイコン)からGitHub Pagesを以下のように設定するだけで静的サイトぼこぼこ量産できることを知ってしまったんで一章の内容あやるのは楽しかった*2
f:id:andron:20200419164202p:plain


余談

実は並行して別のやつもやっていたりします。
f:id:andron:20200419174319p:plain
デザインコースも並行してやってました。こっちは完成版つきだったりするんでやりましたーって報告するのはどうしようか考え中。Webコースと違ってやったらみんなに報告してみようとかいう方針でなさそうだし……。内容的にはブラウザの種類の話*3とか、レシポンシブにどう対応させるのかとか、レイアウトについての話とかそんな感じです。



つづく

*1: 謙虚(Humility) 尊敬(Respect) 信頼(Trust)

*2:GitHubに関しては僕が勝手にやっていることなのでこの章中で説明はありません

*3:ブラウザごとにレンダリングエンジンが異なるのでこっちはブラウザの種類の説明多め