CODEBASE School 4week(2月5日週)

今週は JavaScript について。JavaScript 基本的な構文、フレームワーク、歴史、昨今のJavaScriptを取り巻く環境についての講義があって、そのあとjQueryの雛形を参考に手を動かしながらサイトに動きをつけて学習した。

CODEBASE School 4week

  • JavaScriptとは
    • JavaScript のメジャーなライブリやよく参照されるドキュメントについての記事。

qiita.com

qiita.com

  • JSの書き方
  • jQueryの書き方
  • SPAとは
    • SPAでは、ページ全体をレンダリングする代わりに、変更する部分だけ書き換えます。それによってサーバー内でのデータ結合における負 荷軽減、クライアントへの通信量削減、ブラウザでのレンダリングの 負荷軽減が実現し、相当のスピードアップが可能になるのです
    • SPAいまいちよくわからなかった。

qiita.com

qiita.com

  • Webpactとは

qiita.com

qiita.com

  • JSのデバック方法

JavaScriptが出来ること

  • フロントエンド、PC web, mobile web
  • サーバーサイド Node.js
  • デスクトップアプリ(Windows, macOS, Ubuntu) Electron
  • ネイティブアプリ(iOS, Android) ReactNative, Ionic, Weex

SPAフレームワーク勉強

今回の講義では細かく触れなかったけど、SPAフレームワークが気になった。オススメの勉強方法が共有されてたので備忘メモ。

  • プロゲートやドットインストールでJavaScriptの文法などを理解する
  • JavaScriptの概念を理解する →開眼JavaScriptという本がオススメです。 https://www.amazon.co.jp/s/?ie=UTF8&keywords=%E9%96%8B%E7%9C%BC+javascript

  • SPAやAjax通信の仕組みを理解する →主に下記の単語はSPAで開発するにあたって、事前に調べて意味を理解しておくと良いと思います。 ・npm ・node.js ・gulp ・webpack ・コンポーネント志向 ・SPA(シングルページアプリケーション) ・Ajax通信 など

  • Vue.jsのチュートリアルをやる →いきなり、Railsと合わせて開発し始めると、そもそも、Vue.jsで何をやっているのかわからなくなるので、まずは、Vue.jsだけで簡単なものを作る事をオススメします。

  • Vue.js + Rails(Laravelなどでも可能)でSPAのアプリを作成する

kakakakakku.hatenablog.com

qiita.com

まとめ

フロントエンドの技術は進化のスピード早い、あと色々と登場人物(BowerとかGulpとかWebpackとか)が多くて、それらがどいう役割を持っていて、どんな感じで使うのかなど、いまいち理解できなかった。使うレベルに達していないから、説明してる記事を読んでもピンと来ないのかもしれないけど、理解できるようしたい。今週でフロントエンドのお勉強は終わりで来週からはサーバーサイドのお勉強。

CODEBASE School 3week(1月29日週)

今週は先週学んだ HTMLとCSSとBootstrapを使ってオリジナルサイト制作をした。

CODEBASE School 3week

  • オリジナルサイト制作
  • gulpでコーディングを効率化
    • これはめっちゃ便利だった。

gulp · GitHub

qiita.com

qiita.com

ワイヤーフレーム作成

サイトを作るときにはまずはワイヤーフレームを書いて、どんな感じのものを作るか考えるのが大事。ふわっとしたまま進めると、何作ろうとしてたんだけ???みたいな感じになるので要注意。ワイヤーフレームを書いたりするのにオススメのサービス->Prott

prottapp.com

オリジナルサイトを公開してみた

今回の講義で作ったサイトは、家族に作って欲しいと言われたのがきっかけだったというのもあって、世の中に公開してみた。個人でドメインとって、公開するのは初めてだったのでよい経験。

母乳育児相談室 春

qiita.com

qiita.com

1000時間積む話

講義の中で、プログラミングを習得するのに必要な時間についての話があった。だいたい1000時間。プログラミングはセンスとか才能とか全然不要で、本当に取り組んだ時間に比例して上達するので、自分がプログラミングに対して1000時間投資するためにどうやって時間を抽出して、計画するかを考えるのが重要とのこと。例えば、月に100時間プログラミングの勉強したとすると習得するのに10ヶ月かかるし、月に50時間だと20ヶ月かかる。計画して時間を積んでいくのが重要。ただ、時間ベースだとどれぐらいのスキルがあるかどうか不明なので、目安としては、400〜500時間で、世の中に自作のWebアプリケーションを公開できる技術を持っているのが目標設定として良くて、このWebアプリケーションを世の中に公開できるっていうのは、

  • 最低限のHTML, CSS, JSを理解している
  • Webの最低限の仕組みを理解している
  • DBの最低限の仕組みを理解している
  • サーバー、ドメインなどの知識を最低限理解している

が担保されるので評価される感じとのこと。今までコードを書くことにすごく苦手意識があったので、めちゃめちゃ励みになる。

まとめ

簡単なサイトだけど自分で作って誰かが喜んでくれる体験は嬉しいなあと思った。もっとできる範囲を広げていきたい。あとは1000時間を積むためちゃんと計画するっていうのはかなり重要だな思った。

CODEBASE School 2week(1月22日週)

今週はHTMLとCSS をメインに簡単な講義があり、手を動かして学習しました

CODEBASE School 2week

  • HTMLとは
    • HTML要素リファレンス

developer.mozilla.org

  • CSSとは
  • HTML・CSSの書き方
  • 開発ツールの使い方

www.buildinsider.net

  • Bootstrapとは
  • Bootstrapの書き方
    • paddingとmargin の違いがいまいちよくわからなくなったりした。「Bootstrapのサンプルがシンプルな構成でわかりやすいCSSになってるので、これらのページの要素をブラウザの要素を検証のツールで見て行くと雰囲気掴める」などアドバイスもらったのでやってみたり。

getbootstrap.com

coliss.com

まとめ

HTMLやCSSについて、HTMLはページの構造や文書の内容を記述していて、それに色つけるのがCSSっていうざっくりした理解だったので、手を動かしながら学ぶことで理解を深めることができた。特にCSSは、要素間の間隔だったり、想定していないところに影響があったり、想定した通り反映されなかったりで苦戦したが、そのぶん学びは多かったと思う。来週は、今週学んだ HTMLとCSSとBootstapを使って、オリジナルサイト制作

CODEBASE School 1week(1月15日週)

2018年 1月16日(火)からCODEBASE主催のプログラミングスクールに通っています。毎回かなり学びが多いので、これまで学んだことの振り返りを時系列にまとめていきたいと思います。まずは1week。(全部でおよそ2ヶ月間のスケジュール)

peraichi.com

www.protosolution.co.jp

僕が参加した理由

まずはじめに、僕が今回のプログラミングスクールに参加しようと思った理由について少し話をしておきます。僕自身、普段はサーバー管理者とかインフラ周りのお仕事をしていて、この業界にいて、これから先もエンジニアとしてキャリアを続けていくなら、もっとコードを書いてお仕事できるようになりたいなあと思ったのがきっかけです。

現時点の僕自身のキャリア

これまでの僕のキャリアを振り返ると、

  • 地元沖縄の大学でサンゴ礁の研究をする
  • 新卒で上京してSIのお仕事をする会社に入社。金融系業務システムのミドルウェア/インフラ周りの構築/運用を担当して2年
  • 地元沖縄に戻って AWSなどのインフラをベースに自社製品のサービスを運用する会社に転職して2年(イマここ。社会人になって4年目。)

というような感じで 普段は、システムのインフラ部分やサーバー管理者のお仕事をしています。

これから積み上げていきたいキャリア

これから先、エンジニアとしてキャリアを考えてた時、僕に足りていないものは?って考えるとソフトウェアエンジニアリング力がめちゃめちゃ弱いと思っていて、エンジニアを続けていくなら、便利なものを作って誰かに喜んでほしいし、楽にお仕事できるようしたい。あと、やっぱり自分で動くものを作るのは楽しい。今回のプログラミングスクールでは、コード力を鍛えて、自分に足りない能力を伸ばしていけるようにしていきたいと思っています。

CODEBASE School 1week

  • オリエンテーション

    • 自己紹介、進め方説明など
  • 環境構築

    • プログラミングスクールで使うツールの導入など
    • PHPStorm
    • Slack
    • Facebook group
    • Drop paper
      • Drop paperはめっちゃ便利。UI良い。
  • Webの仕組み

    • この辺りはまあまわかる話だったけど、改めて説明を受けると、クライアント側の視点での話など、そうなんだーって思ったりすることあって、勉強になった。

developer.mozilla.org

f:id:shimabukuromeg:20180224112217j:plain

  • ググり方(Learn to Research)
    • ここの話はめっちゃ勉強になった。知らなかったことがめっちゃあって勉強になった。
    • MDN web docs(HTML, CSS, JavaScript)

developer.mozilla.org

  • スキルセット。トレンド。自分がどういったスキルを身につけるべきか考えるのにいいなーと思った

github.com

  • Mac環境作業効率化

qiita.com

  • Progate
    • 今回のプログラミングスクールでは、無料でProgateをできるようにしていただいていて、基本的なコードの構文とかは、Progateで各自終わらせましょうというスタイル。Progateは終われせてる前提で授業は進む感じ。個人的にHTML&CSSのコースが、思ってたより難しかった。

まとめ

公式ドキュメントが大事なのはめっちゃわかる。いろんな分野の公式ドキュメント的な正しい参照先 Learn to Research を教えてもらったのはすごくありがたかった。講義の雰囲気としては、みんなワイワイしてて、学生に戻った感じですごく楽しいです。2ヶ月間限定なので、集中してスキルつけていきたい。