【プログラミング】Progateとdotinstallから始める

プログラミングってどう勉強するの?転職やら副業やらで稼げるって聞くけどやったことないから何から始めればいいんだい?

まったくプログラミングに触れたことがないなら『Progate』と『dotinstall』をおススメするよ。今回はこの2つについてみていこうか。

  • 「これから始めるよ」という方
  • 「始めたけど全然わからない」という方
  • 「何を準備すればいいの?」という方
  • こんな方に見てもらえればと思います。

    nbsp;

    これから始めるきっかけとしてはここからスタートするのがいいのではないかなと思います。

    ※ここでは『これから始める全くの初心者』に向けてお話していきます。知識がある方からすると「HTMLってプログラミング言語じゃなくてマークアップ言語やんけ!!」という話ですが、私も勉強を始める時は違いが分かっていませんでしたし知識がない人にそんな説明してもチンプンカンプンですので暖かい目でみてください。


    何をしたいのかで勉強内容が変わる

    何をしたいって言われるとすごい漠然としていますので、例を考えてみましょう。

    やりたいこと 学ぶもの(言語)
    サイト(すべての基礎) HTML/CSS
    サイト(動的・本文以外の機能・応用) JavaScript/jQuery
    サイト(サーバーについて) PHP
    サイト(Webアプリ) Ruby
    アプリ作りたい Swift
    ゲーム作りたい Unity
    AI作りたい Python


    まずはやりたいこと、やってみたいことから決めていくのが良いです。そして、もちろん途中で変わってもいいと思います。何かしらの勉強には繋がってますので。では実際にやってみたい事を決めたらProgateとdotinstallについて見てみましょう。


    Progateとは?

    Progateなら初心者が必要となる導入部分のコースでが無料なので、無駄なく進めることが可能です。

    また、レベルアップなどの要素もあるので少しずつ成長しているのが目に見えるのもやっていて楽しめます。

    Google Play Store URL:
    Screenshots

    スマホ版

    スマホ版だと、「下記の語群から選択」といった形になります。

    メリット

  • 電車通勤・通学中でも出来る
  • どのように構文ができているか理解しやすい
  • デメリット

  • 悪い意味でミスしにくい
  • 対応言語がPCより少ない
  • 非常に簡易的なのでスライドごとに「〇〇すると□□になる」というのがわかりやすい構造になっています。

    一方で、キーワード選択なのでスペル間違いや入力漏れが起こりづらく実際にやってみるとスペル間違いなど凡ミス連発でつまづくといったことがあります(経験済み)。

    なので『スマホ版やったから出来る』ではなく『PC版の予習』ぐらいで考えるといいですね。

    ↓PC版

    PC版だとスライドごとにコメントでやることのヒントを教えてもらいつつ、自分で入力をするのでちゃんと理解しやすいです。

    メリット

  • 自分で入力するので初心者が起こす入力漏れなどの練習になる
  • 幅広い言語にも対応
  • デメリット

  • 特になし

  • やはり対応言語の種類も含めてPC版のほうが使い勝手がいいです。ちなみにアカウント同期をすればスマホとPCの進行を同時に管理することもできるので上手く使い分けてみましょう。

    追記:2018年10月時点で無料コースで17レッスン、月額980円(税込)なら全68レッスンが受講可能です。月々1,000円以下で出来るのは非常にお買い得ですね。


    dotinstallとは?

    Progateで知識を最低限身に付けたら、今度はdotinstallで動画学習しながら実際に自分で作ってみるのがおすすめです。


    なお、dotinstallで勉強を始める前にテキストエディタというものを用意しておきましょう。(動画内でも解説していますが)


    実際にdotinstallの動画でも使用されている『Atom』というテキストエディタでいいと思います。

    Atomのダウンロードはこちらから。

    A hackable text editor for the 21st Century
    At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We c...

    テキストエディタって?

    テキストエディタはコードを書くのに最適化されたメモ帳のことです。

    試しに、この画面で右クリックして『ページのソースを表示』を押すと以下のような画面が出てきます。

    PCに付属しているメモ帳でもできなくはないですが、Atomのようなテキストエディタには言語向けに様々なショートカットや機能があるので100%必須のものです。準備しましょう。

    ショートカット一覧も紹介しているのでご活用ください。

    【Atom】超便利!!項目別ショートカット【Windows版】
    テキストエディタのAtomのショートカットをまとめてみました。漏れがあるかもなので気付き次第追加していきます。 なお、Windows版なのでご了承ください。Mac買ったらMac版も作ろうかと… Atomのダウンロードはこちらから。 ...


    dotinstallの具体的な説明に移ります。

    実際の管理画面です。

    dotinstallでも動画視聴をしたあとに

    未完了(動画画面では完了)ボタンを押すと

     ⇒ 

    このように完了済となります。

    そして進捗部分も

    このように、どのぐらいレッスンが進んでいるか可視化できるのでモチべが保ちやすいです。

    また、Progateでは扱っていない項目についても一部あつかっているのも優れたポイントです。
    (例:wordpressなど)


    まとめ

    まずはProgateで練習してから、dotinstallの動画と同じものを作ってみるところがスタートになると思います。

    早い人なら1ヵ月掛からずにできてしまうのでサクッと始めてみましょう。