Web製作跟博客

###### tags: `Web` `FrontEngineer` `BackEngineer` `Beginner` # Web製作跟博客 ## 博客選擇 :arrow_right: [ブログ作成サービスのおすすめ10選](https://www.xserver.ne.jp/blog/blog-service-recommended/) 這篇有簡單的介紹日本人常用的博客提供參考依照你的需求如果只需要單純寫博客這篇就可能就找的到你想要的了 --- ## WEB製作但如果你是想要從頭製作的話 :arrow_right: [Progateから実務までにやるべきこと](https://shogo-log.com/after-progate/) 這篇可能適合你但他文章有提到的"[Progate](https://prog-8.com/dashboard)" 是需要付費的如果你嫌棄的話你可以改用 :arrow_right: [FreeCodeCamp](https://www.freecodecamp.org/) 它是免費的然後如果你覺得教材不夠 :arrow_right:[プログラミングチュートリアル](https://www.youtube.com/channel/UCNTxclE0N4qsUuirssL_D8w) 這個youtuber的教材也可以試試 --- ## 編譯器及開發環境你寫程式的時候你需要有編譯器原因是電腦他看不懂程式編譯器的作用就是幫你做翻譯成電腦看得懂的形式下載編譯器及安裝寫程式需要的軟件我們稱這一連貫的程序為**開發環境** 這邊會教你怎麼下載編譯器及如何開發環境 :arrow_right:[VS Codeの使い方講座！](https://www.youtube.com/watch?v=csOaPNMDEwg) --- ## 公開網站這邊會教你怎麼把你寫的網頁公開到全世界 :arrow_right:[ウェブサイトを世界中に公開する方法](https://www.youtube.com/watch?v=bWXHzFGG5z0&t=921s) --- ## 發問平台然後如果你有遇到問題的話 [stackoverflow](https://stackoverflow.com/) [teratail](https://teratail.com/) [qiita](https://qiita.com/) 都是很好的發問平台當然你也可以把問題發上來一起討論(~~不要問我~~ 開玩笑的XD) 應該就這樣了希望這篇對你有幫助 --- ### 我自己的學習歷程 1. HTTP/CSS 基礎 2. JS 基礎 3. **ポートフォリオ制作(製作個人網頁)** 4. CSS設計（ＣＳＳ進階） 5. JS進階 6. React 7. **網頁製作** 8. Ｇit/Github 9. Web安全知識 10. TypeScript 11. **網頁ＡＰＰ開發** **-粗字是實作的部分-** --- # 可參考專家的學習歷程 --- ## 前端 :arrow_right:[前端](https://tech-parrot.com/engineer/frontend-engineer-roadmap-and-skills/) ### 1. Internet 參考書籍： [Webを支える技術-HTTP、URI、HTML、そしてREST](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=PBOOQRA5NPHT&keywords=ReactWeb%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST&qid=1664433909&qu=eyJxc2MiOiIwLjg4IiwicXNhIjoiMC4wMCIsInFzcCI6IjAuMDAifQ%3D%3D&sprefix=reactweb%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-http+uri+html+%E3%81%9D%E3%81%97%E3%81%A6rest%2Caps%2C170&sr=8-1) ### 2. HTML/CSS framework 參考書籍： [1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.amazon.co.jp/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Mana/dp/4797398892?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&qid=1621642902&sr=8-5&linkCode=sl1&tag=techparrotcom-22&linkId=360f699a9f5c21992091a71e0401da73&language=ja_JP&ref_=as_li_ss_tl) [Bootstrap 4フロントエンド開発の教科書](https://www.amazon.co.jp/Bootstrap-4-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%AE%AE%E6%9C%AC-%E9%BA%BB%E7%9F%A2/dp/4297100207?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=37DY9CXNBC3NY&dchild=1&qid=1621642784&sprefix=boots,aps,297&sr=8-1&linkCode=sl1&tag=techparrotcom-22&linkId=e0e9a4cb99443d46cb42802b8174b530&language=ja_JP&ref_=as_li_ss_tl) ### 3. JavaScript/TypeScript 參考書籍： [JavaScript コードレシピ集](https://amzn.to/2WBOodw) [プログラミングTypeScript（スケールするJavaScriptアプリケーション開発）](https://amzn.to/3mMKsSo) ### 4. Package Manager * npm * yarn ### 5. JavaScript framework * React.js/Next.js * Vue.js/Nuxt.js 參考書籍： [モダンJavaScriptの基本から始める　React実践の教科書　](https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%EF%BC%88%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C%EF%BC%89-%E3%81%98%E3%82%83%E3%81%91%E3%81%87%EF%BC%88%E5%B2%A1%E7%94%B0-%E6%8B%93%E5%B7%B3%EF%BC%89-ebook/dp/B09BV2HGN3/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=19D4H0FET82GG&keywords=React&qid=1664433839&qu=eyJxc2MiOiI0Ljk1IiwicXNhIjoiMy45NyIsInFzcCI6IjMuNzIifQ%3D%3D&sprefix=react%2Caps%2C170&sr=8-4) [これからはじめるVue.js実践入門](https://www.amazon.co.jp/gp/product/4815601828/ref=ox_sc_act_title_5?smid=A3GD8DRWAUBYL1&psc=1) ### 6. Test Code 參考書籍： [フロントエンド開発入門](https://www.amazon.co.jp/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%81%AA%E9%96%8B%E7%99%BA%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A8%E8%A8%AD%E8%A8%88%E3%83%BB%E5%AE%9F%E8%A3%85-%E5%AE%89%E9%81%94-%E7%A8%9C/dp/4798061778/ref=sr_1_8?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=jest&qid=1621644683&sr=8-8) ## 後端 :arrow_right:[後端](https://tech-parrot.com/engineer/backend-engineer-roadmap-and-skills/) ### 1. Internet 參考書籍： [Webを支える技術-HTTP、URI、HTML、そしてREST](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=PBOOQRA5NPHT&keywords=ReactWeb%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST&qid=1664433909&qu=eyJxc2MiOiIwLjg4IiwicXNhIjoiMC4wMCIsInFzcCI6IjAuMDAifQ%3D%3D&sprefix=reactweb%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-http+uri+html+%E3%81%9D%E3%81%97%E3%81%A6rest%2Caps%2C170&sr=8-1) [キタミ式イラストIT塾基本情報技術者令和03年](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1&qid=1618146749&sr=8-5&linkCode=sl1&tag=techparrotcom-22&linkId=544b145528319408076d4b1247fb84d9&language=ja_JP&ref_=as_li_ss_tl) ### 2. OS 參考書籍： [Linux+コマンド入門](https://www.amazon.co.jp/Linux-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E5%85%A5%E9%96%80-%E2%80%94%E2%80%94%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%A8%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%80%81%E5%9F%BA%E6%9C%AC%E3%81%AE%E5%8A%9B-PRESS-plus/dp/4297120240?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=linux+%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89&qid=1618147360&s=books&sr=1-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEyNkk4T0ZZVU9RWlVDJmVuY3J5cHRlZElkPUEwNDg3MTU0MTUyS1ZNSlk0Q1hWSiZlbmNyeXB0ZWRBZElkPUExRzRFNlRSU0g1VUJYJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ%3D%3D&linkCode=sl1&tag=techparrotcom-22&linkId=1ad32f9cb2e0aac7d71970c0bf908b18&language=ja_JP&ref_=as_li_ss_tl) [Javaで学ぶデザインパターンマルチスレッド編](https://amzn.to/3kwiNlG) ### 3. DataBase 參考書籍： [スッキリわかるSQL入門](https://amzn.to/3BoXwRL) [SQLアンチパターン](https://amzn.to/3jtuL0g) [達人に学ぶDB設計徹底指南書](https://amzn.to/3yvX7eo) ### 4. API * REST API * HTTP method 參考書籍： [Web APIの設計](https://amzn.to/3BslhIG) ### 5. Programing * Ruby * Go * JAVA 參考書籍： * Ruby [たのしいRuby 第6版](https://amzn.to/3kGbBn8) [現場で使えるRuby on Rails速習ガイド](https://amzn.to/3yBe07S) * Go [改訂2版みんなのGo言語](https://amzn.to/3sXNKTG) * JAVA [スッキリわかるJava入門](https://amzn.to/2Y2eNSq) [Effective Java 第3版](https://amzn.to/3mIAbGR) ### 6. Web Security 參考書籍： [(おすすめ) 安全なWebアプリケーションの作り方](https://amzn.to/3BtHpCq)