ここ最近、React/Node/Express/MongoDB/FirebaseでECサイトが作れるぐらいには成長したので、何してきたかここに備忘録書いときます。
完全にただの日記です。悪しからず。
ECサイト作れるようになるまでの道のり・振り返り
ステップ0：プログラミング言語に触れる
たまたま取った統計データ解析の授業でR言語を使って解析してました。
振り返ると、if文, for文、型・モジュールのインポートなんてのはここで初めて身につけました。
このくらいの時期に基本情報技術者取った気がします。
ステップ1：フロントエンドに入門
HTML・CSS
ウェブサイト作成チュートリアル系の本を3冊やりました。前から順にまねしていけば、それっぽいウェブサイトができるので成果がわかりやすいし、知識も身につくのでけっこう楽しいです。JavaScript
- 競プロ。Node.jsでちょっとだけ、ほんのちょっとだけやってみました。3週間ぐらいでやめちゃいましたが、後々役に立ちました。
- 本。今度は体系的に知りたくなったので、ハンズオンJavaScriptという本を買って半分ぐらい読みました。「半分しか読めてない」ではなく「半分も読めた」とポジティブに捉えたい。Pythonの本は1/4しか読んでないので...
ステップ2: アルゴリズムをたくさん書く
HTMLでサイト書けるようになって満足していた僕でしたが、電情の授業で転機が訪れます。
2年生後半にとったプログラミング系の授業は4つ：
「ソフトウェア1/2」(Cでいろいろ作る)
「プログラミング基礎演習」（C/Pythonの文法学習）
「データサイエンス超入門」(Python/Rでニューラルネットワーク)
「Pythonプログラミング入門」(Pythonでアルゴリズム)
この中でも一番重かったのがソフトウェアの授業でした。週に一個コンソールアプリを作らされるため、毎週20時間ぐらいは使ってた気がします。物理シミュレーションとか、絵画アプリとか。けっこう必要な機能が多かったので時間はかかりましたが、思ったようにちゃんと動くのが楽しくて夢中でした。
こうして徐々に長いコードがかけるようになり、コード書くために一日中机に向かうのが苦にならなくなりました。
ステップ3: いろいろなウェブの基本概念を知る
静的なページvs動的なページ、フロントエンドvsバックエンド、クライアントvsサーバー
プログラミング始める前までは、なんもわかってなかったことたち。HTML,CSSが一通りわかるようになってきたぐらいの時に、やっと気になってググり始めました。
ステップ4: フレームワークの存在を知る
成り行きで誰かが書いた動的なサイトのコードを全部見る機会がありました。
いろいろなファイルがごちゃごちゃしてるのが衝撃的でした。「ただのウェブサイトなのにこんなにファイル作ってんの」という印象だった記憶。
後日それがCodeIgniterっていうPHPのフレームワークなのだと知り、そんなに便利なのかと思いながらも、動的なサイトを作るにはそういうのを使うものなのかと勝手に納得してました。
ついでにそのサイトを僕が修正・追記しなきゃならなくなったのでいろいろいじり、フレームワークってのはこういうファイル配置/役割分担なのかと知るいい機会になりました。
そのあと、Laravelのコードをデバッグする機会に恵まれますが、正直あんまりPHP好きじゃないです...
ステップ5: 自分もなんかフレームワークを勉強するか、とReactを始める
RailsとReactで迷いに迷って、Railsはポピュラーすぎたのを嫌がってReactを始めます。加えて、将来的にはReact/NodeでJavaScript一本でフルスタックにいけるのが魅力的でした。
なお、Pythonそんなに好きじゃないのでDjangoは最初から却下。
Reactに入門するために、いろいろ読んで、とりまやってみるという戦略を取ります。
怪しげなサイトからダウンロードした英語のチュートリアル本に乗ってた投票アプリ
ここでやっと公式ドキュメント
大学で作ったミニゲームをReactに移植してデプロイしてみる
海外の大学のオープンコース教材
これはまじでおすすめです。まだ全部読んでないけど...。あとで絶対全部読みます
目次：- Introduction to React
- Communicating with server
- Programming a server with NodeJS and Express
- Testing Express servers, user administration
- Testing React apps
- State management with Redux
- React router, custom hooks, styling app with CSS and webpack
- GraphQL
- TypeScript
- React Native
- CI/CD
ステップ6：サーバーサイドもやってみる
サーバーサイドどうしようか迷ったけど、Node/Expressを選びました
- 某有名プログラミング教育系サイトに登録
- 無料キャンペーンやってたので、ReactとJavascriptとNodeの関連コース一週間で全部やってさっさっと退会することで課金0で済みました。
ステップ7：えいや！とフルスタックでECサイトを作ってみる
もちろん自分で無からECサイトを錬成することはまだできるようなレベルではありません...
Udemyがセールやってて、24,000円のコースが1,500円で思わず買ってしまいました。
そのコースの通りに勉強していると、いつの間にかECサイトの作り方が本気で理解できちゃうという優れもの。（宣伝じゃないです）
軽いインドなまり英語のおっさんの動画講義（43時間）でしたが、まじでわかりやすかったのでお勧めです。
なまりは聞いてるうちに気にならなくなります。英語の勉強にもなって一石二鳥。
これ：React Redux Ecommerce - Master MERN Stack Web Development
よう考えたら43時間って東大の二コマ授業一セメスター分ですね。
続く
2021年3月時点までにやってきたことはこれでだいたい全部です。
案外少ないですね...
これからも、時間をつくってはいろいろオリジナルに開発していこうと思います。
思い付きで書いた記事なのでここまで見ていただいた方はいないと思いますが、もしもなにか参考になるようなことをかけてたら幸いです。