📚 update: daily report 240609

* 1:36

* 12:55

* 15:26

* 15:28

* 16:04

* 16:11

* 16:12

* 18:05

* 23:26

* 23:30

* 23:41

* 23:44

* 23:57

.prettierignore

@@ -0,0 +1 @@
+*.md

README.md

@@ -38,5 +38,5 @@ memos in https://github.com/pss-aileen/TIL/tree/main/documents
 - [ ] 月毎のレポートをページを作る（何を何時間作業したかのログ）
 - [ ] 月毎の振り返りレポートのコメント json を作る
 - [ ] スマホでの見た目の調整
-- [ ] 先月の勉強時間と、今月の勉強時間が何時間多いか比較（6月10日だったら、5月10日までの合計と比較）
-- [ ] 勉強時間の小数点以下2桁を表示させる
+- [ ] 先月の勉強時間と、今月の勉強時間が何時間多いか比較（6 月 10 日だったら、5 月 10 日までの合計と比較）
+- [ ] 勉強時間の小数点以下 2 桁を表示させる

documents/00_TopicsToLearn/FimgaToWebSiteResources.md

@@ -0,0 +1,9 @@
+# Figma to Website Practice Resources
+
+## Using Bootstrap
+- [Medical Functional - bootstrap responsive website templates download for medical | Figma](https://www.figma.com/community/file/1009459550594687156)
+  - Licensed Under CC BY 4.0
+  - 使ってよい
+
+## No CSS Framework...?
+- [Figma Website Template - Landing Page (Free) | Figma](https://www.figma.com/community/file/849342658995967505)

documents/00_TopicsToLearn/README.md

@@ -0,0 +1,84 @@
+# Topics To Learn Master Page
+
+## basic HTML skills with Figma
+
+目的: Figma から Web サイトを作れるようになること
+
+- [ ] Figma to Website using Bootstrap
+- [ ] Figma to Website with React and Bootstrap (Try: React Bootstrap) JavaScript OK
+
+## TypeScriot Only Project
+
+目的: TypeScript に慣れる
+目的: Bootstrap に慣れる
+
+- pick up from [100 js projects](https://www.100jsprojects.com/projects)
+- or create by myself
+- [ ] [Testimonial Slider Project details](https://www.100jsprojects.com/project/testimonial-slider)
+
+## React Project with JavaScript
+
+目的: React を扱えるようになる
+
+## React Project with TypeScript
+
+目的: 実践的、ベテランになるために、即戦力になるために
+
+- [ ] TODO List(Basic CRUD)
+
+<details>
+<summary>なぜ、TypeScriptと作るのか？</summary>
+
+- JavaScript でもよくないか？基本的なやり方を学ぶのであれば
+- TypeScript と React を使うのはなぜか？
+- TypeScript で市場価値をあげるため？本当にそうなのか？
+  - TypeScript はよく書かれている、ベテラン勢としてはいつか必要になる
+  - 即戦力になるには必要
+  </details>
+
+## MERN ?
+
+目的: もとめられる React、Node、MongoDB を使った技術を習得するため
+
+- [ ] TODO List(Basic CRUD)
+- [ ] ShinCode MERN Udemy 講座
+- [ ] それか自分で作る
+
+## JQuery
+
+目的: 全く触ったことがないので 1 つ簡単なプロジェクトを作って JavaScript との違いを知る
+目的: JQuery を使って、思い通りに簡単な Web サイトの仕組み（メニューバーとか、スライダーとか）を作れるようになる
+
+<details>
+
+<summary>なぜ、PriotiryLowなのか？ -> 再検討の余地あり -> 再検討済み、きちんとやることにした</summary>
+
+- なんとなく、ドキュメント見れば使えるようになりそうな気がするから
+- ナビゲーションやメニューのアニメーションは JQuery
+- 大規模アプリは React だから
+- でも、そうなると、ベーシックなサイトの動きは JQuery を使って実装できたほうがいい、では習得できるようになったほうがいいかも
+</details>
+
+- [ ] よく見るやつを JQuery で実装する
+
+## その他
+
+- [ ] API Auth を使ったものの実装
+- https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
+- jsonをかえすAPI
+  - https://sbfl.net/blog/2018/08/25/nodejs-express-webapi/
+
+## 試したいAPI
+
+- [cheatsnake/emojihub: 😺 A simple & free HTTP API with emojis for your cool apps](https://github.com/cheatsnake/emojihub)
+
+## Resources
+- [Flowrift - Banner](https://flowrift.com/c/banner)
+- [Figma and Html Templates for Ecommerce, Services, Medical, Legal and more - Page 1 - figma and free](https://www.captain-design.com/templates/page/1?type=figma&license=free)
+
+---
+
+# Table Of Content
+
+- [FigmaからWebページのコーディング練習ができるサイト](./FimgaToWebSiteResources.md)
+- [採用で求められている事柄の調査](./recruit-responsibilities.md)

documents/00_TopicsToLearn/recruit-responsibilities.md

@@ -0,0 +1,232 @@
+# 求人で求められていることと、達成度整理
+
+フロントエンドだけで調査。
+
+- https://roadmap.sh/ ここで知識を確認していこう
+- https://flowrift.com/c/banner
+- https://www.100jsprojects.com/
+- Figmaのデザイン： https://dev.to/emmanx/free-figma-ui-designs-for-frontend-practice-3ak2
+  - 確定で使っていいやつ: https://www.figma.com/community/file/849342658995967505
+  - https://www.figma.com/community/file/1009459550594687156
+
+## 体系的に学ぶは危険だ
+- 永遠にチュートリアルから抜け出せないので、体系的に学ぶのはさらっとでいい
+- そこからひたすらコードを書く
+- そうなるとどうすればいいか？
+  - HTML使って、BootStrapになれる
+  - JQueryで実装できるものが何か調査して実装する
+  - TypeScriptを使いながらReactの実装
+  - TypeScript, React, MongoDBを使っての実装 MERN?（ShinCode氏のやつを仕上げるべき...）
+  - Node.jsはまだつかいきれていないので体系的に学んだほうがいい
+
+
+## 結論、これをせよ
+
+上から順番に...
+
+- 言語
+  - TypeScript
+    - [ ] 体系的に学ぶ
+    - [ ] 何かしらのプロジェクトでしっかり使い込む
+- フレームワーク、ライブラリ等
+  - React
+    - [ ] React を用いてのプロジェクトの作成
+  - BootStrap
+    - [ ] BootStraop を用いてのプロジェクトの作成
+  - JQuery
+    - [ ] JQuery を用いてのプロジェクトの作成
+- バックエンド
+  - Node.js
+    - [ ] 理解が深くないので、体系的に学習
+- データベース
+  - [ ] データベースの種類を復習
+  - MongoDB
+    - [ ] CRUD操作ができるようになる
+    - [ ] 設計などについて学ぶ
+  - SQL
+    - [ ] 基本的なSQLコマンドを覚える
+    - 似ているものとして "Firebase Firestore" がある、余力があれば比較含めやってみるのもあり
+- テスト
+  - [ ] テストについての調査、理解
+  - [ ] 何かしらのテストの習得？
+- コード品質系
+  - ESLint
+    - [ ] 基本的なインストール、使い方を学ぶ
+    - [ ] プロジェクトで使いこなす
+  - Gitブランチ戦略
+    - [ ] GitFlow、GitHub Flowについて調査、学習計画を立てる
+- デプロイとCI/CD
+  - CI/CD
+    - [ ] 自動デプロイパイプラインの構築と運用について調査、学習計画をたてる
+      - GitHub Actions, GitLab CI, Jenkins?
+  - [ ] クラウドサービスを使って、アプリケーションをデプロイする方法につついて調査、学習計画をたてる
+    - AWS、Azure、GCP
+- セキュリティ
+  - [ ] OWASP Top10 調査、学習計画を立てる
+- パフォーマンス最適化
+  - [ ] パフォーマンス最適化について調査、学習計画を立てる
+    - Lighthouse, WebPageTestでパフォーマンスを測定、改善
+- UI/UX
+  - [ ] 基本的なUI/UXデザインの原則を学ぶ
+  - [ ] 実際にデザインしてみる？
+- プロジェクト管理
+  - [ ] アジャイル開発への深い理解
+  - [ ] アジャイル開発実践
+
+## 求められているもの一覧
+
+"front end developer jobs malaysia junior" で検索して、出てきたワードまとめ。
+これらから自分が今とにかく学ぶべきことを整理する。
+そうすれば必要とされる人間に近づけるはず。
+的外れな言語やフレームワークをやっていても会社には必要ないから。
+
+### フレームワークなど
+
+> [!NOTE]
+> React、Angular が強い
+> 体感的には Angular が多い印象
+> **日本では Angular あまりきかないので、潰しがきくという意味で React 路線で**
+> あわせて TypeScript も
+> TailwindCSS とは聞かず、BootStrap、JQuery も多かったので、最低限 1 プロジェクトは作った方が良さそう
+
+- React: 10
+- ReactNative: 1
+- Redux: 2
+- NextJs: 2
+- Vue: 3
+- Angular: 12
+- Bootstrap: 3
+- JQuery: 4
+- TypeScript: 5
+- Material UI: 1
+
+### バックエンド
+
+> [!NOTE]
+> Node.js が何か、これを使ってバックエンドを構築？することを求められているので理解が必要
+
+- Node.js: 5
+- Ruby: 2
+- Laravel: 1
+- PHP: 2
+
+## テスト
+
+> [!NOTE]
+> わからないけど、テストをひとまず学んだほうが良さそう
+> React と相性がよいものがあればそれを学ぶ
+
+TODO: React と相性の良いテストライブラリの調査
+
+- Jest + React testing Library: 1
+  - Jest is a JavaScript Testing Framework with a focus on simplicity.
+  - It works with projects using: Babel, TypeScript, Node, React, Angular, Bue
+- Mocha: 1
+- Jasmine: 1
+
+### その他
+
+> [!NOTE]
+> Docker が時々書いてあったので、基本的なものはできるとよさそう
+> EsLint は前から理解しないとと思っているのでやること
+
+- Docker: 3
+- Linux: 1
+- Eslint: 1
+- Json: 1
+- CircleCI: 1
+- CICD: 2
+- WordPress: 1
+- AWS: 1
+- SEO Understanding: 1
+- Sass: 1
+- Drupal: 1
+- OOP: 1
+- MVC: 1
+
+### ワード
+
+> [!NOTE]
+> とにかく WebAPI、REST API を作れるように？使えるようになれということかと
+
+- WebAPI: 1
+  - Web 上で利用できる API の相性
+  - SOAP API、REST API、GraphQL API など
+  - データのやり取りが Web 技術を利用して行われる API
+- RESTful API: 4
+  - REST（Representational State Transfer）の原則に従って設計された API
+  - クライアントとサーバーのアーキテクチャに基づく。
+  - ステートレス（サーバーは各リクエストを独立して処理）。
+  - HTTP メソッド（GET、POST、PUT、DELETE など）を利用。
+  - リソースの表現に JSON や XML などを使用。
+  - URI でリソースを一意に識別。
+- REST API: 1
+  - RESTful API とほぼ同義
+  - REST の原則に従って実装された API を指す
+
+### データベース
+
+> [!NOTE]
+> mongoDB をちらちら見たので、こちらを使いこなせるのは必須そうなので学習必須
+
+- mongoDB: 1
+- Redis: 1 （キーバリュー型の NoSQL、要はデータベース、メモリ上で保存されるデータらしい）
+
+### チーム開発
+
+> [!NOTE]
+> 無理な気がしてきたけど英語
+> 日本語でも、きちんと何を伝えたいのか、何が問題なのかを整理して母国語をまともにあやつれるようになること
+> 人間としての面白さを...どうやったら...
+
+- いいチームを作ることへの意識
+- 知識の共有について
+
+### デザイン
+
+> [!NOTE]
+> Figma やイラレなどから Web サイトを作れる力も必要そう...ここが際どい...
+> Figma、Abobe 系は扱えるが不安が
+> 何か練習素材があればそれを使って Web にしてみよう
+
+## 求められてるもの（よく見るもの抜粋）
+
+- Able to handle code optimization in web sites
+- Develop functional and appealing web applications based on usability
+- Cmonnect to RESTFUL API's through server side or with Javascript
+- Write to and from a web orientated database (SQL, Mongo, etc…)
+- Maintain code and write automated tests to ensure the product is of the highest quality.
+- Proficient understanding of DevOps tools. (e.g. Project planning tool, GitHub, Automated Testing Framework, Azure)
+- Conduct thorough testing and debugging of applications.
+- Stay up-to-date with emerging trends and technologies in front-end development.
+- At least 1 year of Front-End Development experience with Vue.js, JavaScript, and TypeScript.
+- Strong understanding of OO concepts, SQL, Web Services, and AJAX.
+- Excellent analytical skills, organizational skills & strong problem-solving skills
+- Experience in Angular / AngularJS / TypeScript / Bootstrap
+- Experience in Figma / UI & UX design
+- Implement 3rd party API software program into websites.
+- Bootstrap
+- Unit/integration testing typical for entry-level JavaScript jobs.
+- Understanding what is needed for a smooth workflow between yourself (Junior Angular Front-End, the front-end developers and designers)
+- Communicate thoroughly with the back-end department to help build a best-practice RESTful API
+- Professional proficiency in oral/written communications in English
+- Able to communicate in Mandarin is an advantage for communication with stakeholders.
+- Certifications: Relevant certifications in front-end development or Angular are a plus.
+- Participate in the software development life cycle (SDLC), all aspects of the software development process.
+- Work with team members to estimate timelines and delegate tasks.
+- Experience with JavaScript framework (React, React Native, Angular, NextJs) CSS, Bootstrap, JQuery, HTLML5.
+- Experience with agile development methodologies (Scrum/Kanban)
+- Familiarity with cloud-based services (AWS/Google Cloud/Azure)
+- Knowledge of database design and management (MySQL, PostgreSQL, MongoDB, etc.)
+- Familiarity with DevOps practices (CI/CD pipelines, testing)
+- Establish connectivity to 3rd party APIs.
+- Work closely with backend developers to integrate clean, maintainable, flexible APIs.
+- Proficient with ReactJS framework and its core principles such as components,
+- Experience working with front-end testing frameworks (e.g. Mocha, Jasmine) is a plus.
+- Frameworks : Knowledge on J2EE – Spring Boot, Hibernate Restful or Any Web framework
+
+## メモ
+- https://www.uopeople.edu/
+  - オンライン大学、どうしても必要そうだったら
+  - https://www.uopeople.edu/
+  - https://www.uopeople.edu/