§ Qiita初投稿、故に、はじめまして

Qiitaランドにお住まいの皆様、はじめまして。

Qiitaって偉人がたくさん集まっているような気がしたのであまり投稿する気持ちが湧きませんでしたが、何かしらアウトプットをしていきたいと思い、投稿してみることにしました。

何卒お手柔らかにお願いします。

ちょっと自己紹介（題名と全く関係ないので読み飛ばしていただいて結構です）

当方、現時点(2020/04)で某大学3年生の情報工学科所属です。大学入るまでは「プログラミング、何それ美味しいの？」というスタンスでしたが、授業でJavaのオブジェクト指向プログラミングを一旦学び終え、今は「へぇ、プログラミングって骨が折れるわぁ」って思ってます。あまり学校ではプログラミングというより、アルゴリズムだったり、情報理論、OS、コンピュータアーキテクチャ、ディジタル回路とかの低級のお話だったりすることが多いので、コードを書くことが実はあんまりないですね。コード書くのはほぼ趣味。というわけで、Web開発を独自でやって、コードをかく訓練をしていこうじゃないかと思った次第です。

§ About

この記事では、初心者としてWebアプリ開発を初めてみた人が、どのような手順を辿っていったら、乱暴なコピペを脱出して自分で理解しながらガリガリとコードをかけるようになるかを、私が考えて記した物です。

§ 環境

私はPython系のWebフレームワーク(Django , Flask)を使用して学習しています。以下詳しい開発環境。
- Macbook Pro macOS Catalina 10.15.4 13-inch
- Python3 3.7.7
- Flask 1.1.2
- Django 2.2.2

§ 私の学習ソースとその内容

学習した順に書いてみます。

• 情報工学科の授業で学習した内容でWeb開発に関係ありそうな物

  • Javaでのオブジェクト指向プログラミング(特にフィールド、コンストラクタ、インスタンス、クラスの継承の理解)

• みんなのPython 第4版 第8刷 (published by SBクリエイティブ)

  • 基本演算
  • データ型の違い
  • クラスの継承

• これからWebを始める人のHTML&CSS、 JavaScriptのきほんのきほん (Kindle, たにぐち まこと著)

  • HTMLの構造
  • JavaScriptの基本(Vanilla JS、jQuery, Vue.jsの基礎)

• Progate HTML, CSSコース(無料分のみ)

• 動かして学ぶ! Python Django開発入門 (published by 翔泳社)

  • Webアプリケーションがどのように動作しているのか
  • Python, Djangoの環境構築
  • バックエンドの仕組み(ルーティング、ビュー、DBとのやりとり)
  • フロントエンドの仕組み(HTML, CSS, JS)
  • 本番環境へのデプロイ

• Webを支える技術 -- HTTP, URI, HTML, そしてREST (Kindle, 山本陽平著)

  • Webの設計思想
  • URI(URL)の実装方針
  • Hypertext Transfer Protocol(HTTP)の設計思想
  • その他諸々(まだちゃんと読めてない)

学習ソース、たくさん並べましたけど、これ全て完遂するのに、まあ、2年弱掛かっちゃってるんですよね・・・・。いけません。

目的を定めないで基礎技術を固めていったことが最大のミスなんですが。

§ つまづきとその対処法

もしWebアプリを開発したい！という強い想いをお持ちで、何をしていったらいいかわからない！っていう方々がいた場合には、ぜひこの分量を、かかって一年ぐらい、できれば半年で終わらせる意気込みでいた方がいいと思います。前のめりになって学習してほしい！

以下、自分がこの学習を通じて思ったつまづきとその対処法を以下。

●つまづき1● 全て網羅するには学習する技術が多い。

大方の人はこれに頭を悩ますと思います。HTML, CSS, JS, Python, Django, HTTP,・・・。Webの仕組みって、いろんな技術がいろんなフィールドをカバーしている、いわゆる総合芸術であるとやり始めてから私は思いました。ちなみに、列挙した技術では不十分です。少なくともセキュリティ、データベースなどが十分ではないのですから。


これの解決法は、ずばり、困難は分割せよ。（伝わるかな、なつかしのルロイ修道士です）


全ての開発を全て自分で行う(フルスタックエンジニアと言います)のは正直入門者にとって無理です。

全ての技術を学習するのは時間がかかる上に、そもそも圧倒的な知識量の山に心がおれます。私は結構折れてます。

もしプロダクトの完成を目的としているのであれば、目的を達成する手段に時間をかけ続けるのはよくないと私は思います。
いろんな専門分野を持つ人間を組み合わせたチームで行うのがもっとも良いと思います。
自分に担当できる技術が何もないと感じているのであれば、どの分野でもいいですから、入門書を一つやり切って、何か別のプロダクトをその入門書の数字を変えてみたりするだけでもいいので作ってみましょう。一歩一歩前進です。

そうではなく、Webアプリケーション周辺の技術の習得を目的としているのであれば、ぜひいろんな技術側面に触れて、たくさんエラーを出して苦しみましょう(急に鬼)。それがあなたの最短の技術習得の術と思われます。お互い頑張りましょう。

●つまづき2● 初心者で何からやっていけばいいのかわからず途方に暮れる

私個人の考えとして、やはりフロントエンド側をまずやっていく方が気分が乗ると思います。HTMLやCSSってバチっと決まるとすごく気持ちがいいので。さらにハッカソンなどでもフロントエンドかけるとすごく仕事をこなした感じになると思うので。

バックエンドは言語に慣れた上に加えてフレームワークの使い方を勉強するということで、二重に学習することがあるので勉強し始めてから実際にプロダクトを作れるまでに時間がかかるかと思います(もちろんフロントエンドは勉強せずにできると言っているわけではありません、個人的には今一番勉強したい分野になりつつあります)。

さらに何で勉強していくのがいいかというと、お勧めは環境構築の必要がなくブラウザ上で完結し、かつ変更点がすぐに反映されるProgateとかがいいと思います。

本もいいですけど、出版日が少し前のやつとかになるとCSSの書き方が古かったり、フレームワークのバージョンが上がっていて対応していないこともあるので、出版日が古くないかどうかだけは確認しておいた方がいいかなと思います。

●つまづき3● 言語の選び方がわからない

これは正直私も分かりません（なぜならRubyなど他の言語及びフレームワークを現時点で触ったことがありません）が、一つ言えることは、自分が慣れ親しんだ言語を選択することが精神衛生上いいと思います。

私はWebアプリ系を触り始めた頃にちょうどPythonをいじっていたので、Python系のフレームワークを採用しました。基本的に開発では一から自分でコードを書くことはなく、他の人が書いたコード(ライブラリ)をうまく活用して行うのでその言語の独特な記法などに慣れておいた方が気が楽です。

開発中にエラーが大量に出ることは覚悟です。そのエラーの対処をする時に、あまり慣れていない言語だと何が原因かを探るのに慣れている言語より3倍ぐらい大変かと思いますので。

どの言語も触ったことがない人は、私はPython系は正直あまりお勧めできない(特にFlask)です。なぜならWeb上の情報量が圧倒的に少ないです。(Qiitaの検索ヒット数でもRails 33401件, Flask 2346件, Django 4588件（2020/04/14現在）で圧倒的にPython系フレームワークの弱さが出ているかと思います。)この情報量の差は開発スピードに響くので、一度も触ったことがない場合には、Ruby on Rails > Python Django > Python Flask　の順でお勧めします。

●つまづき4● 実装方法がたくさんありすぎてどれを選択すればいいかわからない

これは、ネットでググりながらやっている人あるあるだと思います。あのページではこうやって書いてあるけど、こっちはこうやって書いてある、っていうことはよく起こります。

こんな時、実は一番役に立つのが、公式ドキュメント, または名著と呼ばれる本です。

公式ドキュメントは開発者やそれに類する人の言葉が乗っており、最も簡潔かつ要点を整理した、図星なワードセンスで説明されていることが往々にしてあります。ちなみにPython系のWebアプリフレームワークのDjangoの公式チュートリアルは神です。ググりまくるより、公式チュートリアルを騙されたと思って一度走破してみてください。説明するステップが初心者にとってつまづきやすいところ全部で刻んであります。

さらに、Qiitaでも「この本は絶対読むべき」と推されている本がいくつかあります。基本的にそう言った記事のなかで、複数の記事で絶賛されている本は基本的に良い本です。Amazonのレビューなどをあてにするより、そうやって本を探した方が良いと思います。

もし実装方法に悩んだ時には、一度 開発の手 と ググりにいこうとする手 を止め、そう言った公式ドキュメントや名著と呼ばれる本を時間をかけて読んでみるべきです。

頭の中の混沌が気持ちのいいように整理され、実装方法に道が開けます。(すごい宗教くさいですね、でも本当です)

驚くほど、勉強になります。これはマジです。

私のお勧めは上記でも挙げた、Webを支える技術 -- HTTP, URI, HTML, そしてRESTが本当にお勧めです。
バックエンドを進めていて、なんでWebのGET, POSTばっかり使うんだろうって思ったりしませんでしたか？その答えはこの本に書かれています。必読です。

●つまづき5● 作り始めて中盤ぐらいになって急にだるくなってきた

一人でやっていませんか？

サービスって利用者がいてなんぼだと思うので、できれば開発は人のいる場所で行った方が気分が乗ります。

全国各地にエンジニアやデザイナーが集うコミュニティが用意されていると思います。もしそういうのが苦手な人でも、もくもく会でもなんでもいいので行ってみるといいと思います。もし合わないと思えば信頼のおける友達一人連れてファミレスでやってみてもいいと思います。

私の住んでいる地域ではこの春にエンジニアやデザイナーが集うコワーキング施設が誕生しまして、そのヘビー利用者です。

ぜひ一人ではなく、誰かと一緒にやるといいと思います。エンジニアは一人では強くなれないと思っているので。

§ 私が考えた初心者向けWebアプリ開発ロードマップ

どちらかと言うとスピードを無視した、地盤を固めて進んでいきたいタイプの人向けかもしれません。
大雑把に言うと、フロントサイド→オブジェクト指向プログラミング→バックエンド→公式ドキュメントor本 と言う順序で学んでいる感じです。

1. HTML, CSS, JavascriptをProgateなどのWeb上で学べるサービスで学んでみる
(無料体験分をして気に入れば購入してみるのがいい)
2. シングルページのHTMLを自分で書いてみる
(執筆ネタは自己紹介ページ, アーティストの紹介ページなどなど)
3. オブジェクト指向プログラミング言語を一つ選択して入門書をやりきる
(できれば静的型付言語(Java, Swift)を選択した方が後々のためにいいけど、そうじゃなくてもいい)
4. Webアプリ開発を題材にした本を一つやりきる
(正直コードの意味がわからず大変ですが、わからないところが合っても写してやりきる)
5. 自分で作ってみたいプロダクトをググりながら作り始めてみる
(おそらくログイン機能とかもコピペになるけどそれでいい)
6. 詰まった瞬間に手を止めて公式ドキュメントor本を探して丸々読む

以下5, 6を繰り返す感じです。

なぜ型を宣言する静的型付言語がいいかと言うと、型と言う概念を強く意識しておかないとなぜコードが動かないのかわからないことが多いと思われるからです。基本的にWeb系の言語(Ruby, Python)では動的型付言語が多い(ような感じ)ですが、型と言う概念を隠すことで便利になっているのは型のことを知っている人間だけだと思っています。優しい顔をした大人が実は怖い人だったみたいなことです。これは正直賛否両論ありそうですが、私はこう思っていると言うことです。

最後に

意外と長くなってしまいました。力入れすぎましたかね。

実はあまり初心者に優しくない記事になっていますね、これは。

わからない言葉はぜひGoogleに検索をかけてみて欲しいです。すみません。

でも、私がつまづいたところで同じように悩んで欲しくないので、ぜひ皆さんには頑張って欲しいなぁと思っています。

読んでいただきありがとうございました、また何か書こうと思います。