diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..2e1fa2d --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +*.md \ No newline at end of file diff --git a/.vite/deps_temp_fd9f78cc/package.json b/.vite/deps_temp_fd9f78cc/package.json deleted file mode 100644 index 3dbc1ca..0000000 --- a/.vite/deps_temp_fd9f78cc/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "type": "module" -} diff --git a/README.md b/README.md index 183cbd7..2c1a1b6 100644 --- a/README.md +++ b/README.md @@ -38,5 +38,5 @@ memos in https://github.com/pss-aileen/TIL/tree/main/documents - [ ] 月毎のレポートをページを作る（何を何時間作業したかのログ） - [ ] 月毎の振り返りレポートのコメント json を作る - [ ] スマホでの見た目の調整 -- [ ] 先月の勉強時間と、今月の勉強時間が何時間多いか比較（6月10日だったら、5月10日までの合計と比較） -- [ ] 勉強時間の小数点以下2桁を表示させる \ No newline at end of file +- [ ] 先月の勉強時間と、今月の勉強時間が何時間多いか比較（6 月 10 日だったら、5 月 10 日までの合計と比較） +- [ ] 勉強時間の小数点以下 2 桁を表示させる diff --git a/documents/00_TopicsToLearn/FimgaToWebSiteResources.md b/documents/00_TopicsToLearn/FimgaToWebSiteResources.md new file mode 100644 index 0000000..0214ec5 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/documents/00_TopicsToLearn/README.md b/documents/00_TopicsToLearn/README.md new file mode 100644 index 0000000..27dddc4 --- /dev/null +++ b/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) + +
+なぜ、TypeScriptと作るのか？ + +- JavaScript でもよくないか？基本的なやり方を学ぶのであれば +- TypeScript と React を使うのはなぜか？ +- TypeScript で市場価値をあげるため？本当にそうなのか？ + - TypeScript はよく書かれている、ベテラン勢としてはいつか必要になる + - 即戦力になるには必要 +
+ +## MERN ? + +目的: もとめられる React、Node、MongoDB を使った技術を習得するため + +- [ ] TODO List(Basic CRUD) +- [ ] ShinCode MERN Udemy 講座 +- [ ] それか自分で作る + +## JQuery + +目的: 全く触ったことがないので 1 つ簡単なプロジェクトを作って JavaScript との違いを知る +目的: JQuery を使って、思い通りに簡単な Web サイトの仕組み（メニューバーとか、スライダーとか）を作れるようになる + +
+ +なぜ、PriotiryLowなのか？ -> 再検討の余地あり -> 再検討済み、きちんとやることにした + +- なんとなく、ドキュメント見れば使えるようになりそうな気がするから +- ナビゲーションやメニューのアニメーションは JQuery +- 大規模アプリは React だから +- でも、そうなると、ベーシックなサイトの動きは JQuery を使って実装できたほうがいい、では習得できるようになったほうがいいかも +
+ +- [ ] よく見るやつを 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) \ No newline at end of file diff --git a/documents/00_TopicsToLearn/recruit-responsibilities.md b/documents/00_TopicsToLearn/recruit-responsibilities.md new file mode 100644 index 0000000..c657841 --- /dev/null +++ b/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/ \ No newline at end of file diff --git a/documents/2024/00_summary.md b/documents/2024/00_summary.md deleted file mode 100644 index d6c1fee..0000000 --- a/documents/2024/00_summary.md +++ /dev/null @@ -1,79 +0,0 @@ -# 2024 SUMMARY - -## 2023年のまとめ（集計2023年11月18日から） - -- 勉強時間合計: 116.75h - -## 勉強時間 - -- 1月: 93.75h/ 210.50h -- 2月: 95.25h/ 306.25h -- 3月: - -## 勉強したこと・したこと - -### 1月 - -- ドットインストール - - JavaScriptでカレンダーを作ろう - - JavaScript 日時操作編 - - JavaScript タイマー編 - - JavaScriptでスロットマシンを作ろう - - JavaScriptで数字タッチゲームを作ろう - - JavaScriptでTodo管理アプリを作ろう - - React入門 - - ReactでTodo管理アプリ -- Udemy - - 【Node.js入門】Node.jsとMongoDBを連携してTodoアプリを1から構築してみよう: 完走 - - 【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK！ ゼロからわかるWebシステム開発 - - Dockerのセクション - - モダンJavaScriptの基礎から始める挫折しないためのReact入門 - - セクション4 - - 【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 - - 60% - -### 2月 - -- paizaレベルアップ問題集 - - Cランク獲得問題、標準出力、標準入力、データセット、算術・代入演算、論理演算、文字列処理 -- 本 - - Docker&仮想サーバー - - 導入あたりだけ - - AWS運用入門 - - 導入あたりだけ -- YouTube - - [【Typescript入門】本当の初心者からTypescript×Webpackの開発環境構築までをハンズオン形式で学ぼう](https://www.youtube.com/watch?v=ECc1EXnx7VQ) - - [Todoリストを作りながらTypescriptとReactを触ってみよう Typescript入門](https://www.youtube.com/watch?v=ANcopd8Bmao&t=29s) -- Udemy - - 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 - - pokemon-app何回かハンズオン - - ブログ作成 -- その他 - - TypeScript勉強開始 - - Midjourneyを触る - - GSAP公式見て勉強 - - React Foundations @ Next.js Website - - Next.js公式のブログチュートリアル - - astroチュートリアル（途中まで） - - Three.js Journey 少し - -## 作成中、作成済みのもの - -### 1月 - -- 簡易ポートフォリオサイト作成 - - Next.js、Vercelデプロイ - - PCのみ -- project-study-language - - ホスティング、技術で悩んで保留 - -### 2月 - -- ポートフォリオサイト - - ブログ追加 - - AppRouterからPageRouterに変更 -- project-personal-wordbook - - ログイン機能の実装まで - - - diff --git a/documents/2024/06_June.md b/documents/2024/06_June.md index 1c2f756..f788f57 100644 --- a/documents/2024/06_June.md +++ b/documents/2024/06_June.md @@ -1,5 +1,16 @@ ## Todo +[ref](../../documents/00_TopicsToLearn/README.md) + +- Figma to Website using Bootstrap: https://www.figma.com/community/file/1009459550594687156 +- practice-typescript-apps + - issueにあるやつを2つはやりたい + +
+ + old plan + + - **Programming** - first-contributions-ja - こちら優先で作業すすめる @@ -22,10 +33,11 @@ - PHP 入門 基礎文法編 done - PHP 入門 制御構造編 done - **English** - - ## **TOEIC** + - **TOEIC** - **Phonics** ---- +
+ ## 2024/06/01 @@ -109,10 +121,6 @@ ## 2024/06/05 -- **Study Time** - - Programming: / - - English: / - - Total: / - **Programming** - **First Contributions JA** - プルリク確認 @@ -152,12 +160,12 @@ - プルリク確認、修正 - **practice-typescript-apps** (1h) - simple-modal - - mainにプッシュしたら自動でデプロイできるように設定した。最高🍻 + - main にプッシュしたら自動でデプロイできるように設定した。最高 🍻 - **English** ## 2024/06/08 -- とりあえず、これからメモと計画はこっちでかいて、最後にjsonに追加していく。続けばいいな...。 +- とりあえず、これからメモと計画はこっちでかいて、最後に json に追加していく。続けばいいな...。 - 「エンジニアが知っておきたい思考の整理術」を購入。言語化力とか、論理的思考力が本当に欠落しているので買ってみた...。 - **Programming** @@ -167,198 +175,82 @@ ## 2024/06/09 -- **Study Time** - - Programming: / - - English: / - - Total: / - **Programming** - **English** + - 金フレする、ひたすら音読 +- **Memo** +- どのジャンルでもいいからといった会社選びでいこうとしたけど、それだと無限にやることがある +- Laravel、PHP でバックエンド...と思ったけどどれも果てしない +- 全部はてしなくて、総合的にじわじわ底上げをしている感覚だと、永遠にたどりつかない +- 現状の目標を整理しなおす必要がある + - 「教えてもらう気」は捨てる、でもわからないことは聞く + - 情報を 1 つ 1 つ確認して、覚えていく、TIL にきちんと結論やまとめを残して見返せるようにしておく + - 求人情報でもとめられているものを確認する、自分はどうやったら戦えるのか考える ## 2024/06/10 +- リーダブルコードを時々読む +- 息抜きに本を読もう +- ひとまず、TypeScriptのプロジェクトをすすめる +- Figma To Bootstrap +- なんか計画的にやろうと考えすぎて、今からやるそれが正しいかを悩みがちだと感じたので、とりあえずTypeScirptやりつつ、FigmaToBootstrapで経験を増やそう -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/11 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/12 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/13 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/14 210/365 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/15 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/16 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/17 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/18 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/19 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/20 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/21 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/22 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/23 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/24 220/365 全てお休みで OKDAY -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/25 全てお休みで OKDAY -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/26 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/27 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/28 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/29 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** ## 2024/06/30 -- **Study Time** - - Programming: / - - English: / - - Total: / -- **Programming** -- **English** diff --git a/documents/2024/README.md b/documents/2024/README.md new file mode 100644 index 0000000..21790dd --- /dev/null +++ b/documents/2024/README.md @@ -0,0 +1,13 @@ +# 2024 SUMMARY + +> [!IMPORTANT] +> 2024/06/09思うこと: 1000時間超えたら時間測るのやめる！ + +# Table Of Content + +- [2024年1月](./01_January.md) +- [2024年2月](./02_February.md) +- [2024年3月](./03_March.md) +- [2024年4月](./04_April.md) +- [2024年5月](./05_May.md) +- [2024年6月](./06_June.md) \ No newline at end of file diff --git a/documents/API/README.md b/documents/API/README.md new file mode 100644 index 0000000..5c2a349 --- /dev/null +++ b/documents/API/README.md @@ -0,0 +1,31 @@ +# WebAPI + +## WebAPI とは + +- [Introduction to web APIs - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) +- + +## What is RESTFul API + +ref: [RESTful API とは? - RESTful API の説明 - AWS](https://aws.amazon.com/jp/what-is/restful-api/?nc1=h_ls) + +RESTful API は、2 つのコンピュータシステムがインターネットを介して、安全に情報を交換するために使用するインターフェイス[^1]。 + +## 学習したい内容・作りたいもの + +- [ ] json をかえる API を作る +- [ ] [cheatsnake/emojihub: 😺 A simple & free HTTP API with emojis for your cool apps](https://github.com/cheatsnake/emojihub) + - 基本的な API を取得、表示するだけ +- [ ] [DeepL の API 翻訳 | 機械翻訳のテクノロジー](https://www.deepl.com/ja/pro-api) +- [ ] [Oxford Dictionaries API](https://developer.oxforddictionaries.com/) + - 英語、マレー語（or インドネシア語）、日本語...！！と思ったけど日本語ない + +## 資料 + +- [今すぐ使える無料 WebAPI まとめ #初心者 - Qiita](https://qiita.com/kazuki_tachikawa/items/7b2fead2a9698d1c15e8) + +[^1]: システムやユーザー間での情報や操作をやりとりするための境界や手段のこと + +--- + +# Table Of Content \ No newline at end of file diff --git a/documents/Books/list.md b/documents/Books/README.md similarity index 82% rename from documents/Books/list.md rename to documents/Books/README.md index df8eed8..2a487a7 100644 --- a/documents/Books/list.md +++ b/documents/Books/README.md @@ -7,4 +7,11 @@ - [ ] 体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践 - [ ] フロントエンドの知識地図 - [ ] フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 -- [ ] フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 \ No newline at end of file +- [ ] フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 + +--- + +# Table Of Content + +- エンジニアが知っておきたい思考の整理術 +- リーダブルコード \ No newline at end of file diff --git a/documents/EnvironmentSetup/checkByPhone.md b/documents/EnvironmentSetup/checkByPhone.md new file mode 100644 index 0000000..5d21423 --- /dev/null +++ b/documents/EnvironmentSetup/checkByPhone.md @@ -0,0 +1,11 @@ +# npm run dev してから、スマホで確認する方法 + +https://qiita.com/osa-osa/items/593281b7eb3315bf444d + +## まとめ + +- `package.json` にとくに追記せず `dev: next dev`を、`npm run dev` で実行 +- mac の IP アドレスを確認する + - Wi-Fi > 接続している Wi-Fi の詳細をクリック > TCP/IP で IP アドレスを確認 +- http://{IP アドレス}:{ポート番号} にアクセス + - 例) http://192.168.2.121:3000 diff --git a/documents/git.md b/documents/Git/git.md similarity index 100% rename from documents/git.md rename to documents/Git/git.md diff --git a/documents/GitHub/GitHubMarkdownTips.md b/documents/GitHub/GitHubMarkdownTips.md new file mode 100644 index 0000000..2722c4e --- /dev/null +++ b/documents/GitHub/GitHubMarkdownTips.md @@ -0,0 +1,4 @@ +# GitHub Markdown Tips + +- emoji-cheat-sheet: [ikatyang/emoji-cheat-sheet: A markdown version emoji cheat sheet](https://github.com/ikatyang/emoji-cheat-sheet) +- GitHub Docs: [Basic writing and formatting syntax - GitHub Docs](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#styling-text) diff --git a/documents/HTML-CSS/README.md b/documents/HTML-CSS/README.md new file mode 100644 index 0000000..fc0917e --- /dev/null +++ b/documents/HTML-CSS/README.md @@ -0,0 +1,3 @@ +# Table Of Content + +- [faviconの設定、manifest.json、maskable](./favicon.md) diff --git a/documents/HTML-CSS/favicon.md b/documents/HTML-CSS/favicon.md new file mode 100644 index 0000000..4d88384 --- /dev/null +++ b/documents/HTML-CSS/favicon.md @@ -0,0 +1,25 @@ +# Favicon + +マスクされる用のFaviconを設定してあげる必要があるっぽい？ -> あると思う +[PWAの App Icon 作成でデザイナーが知ったこと ++ Gaji-Laboブログ](https://www.gaji.jp/blog/2023/06/20/16156/) +こちらの記事で確信。あとは試すだけ。 + +PWAとは？ + - ウェブ技術を使用して開発されたアプリケーション形態のこと + - PWAはWebサイトとしてアクセスできる + +manifest.json + +- 今 apple-icon.png はどのようにhtmlで設定されているか？ +```html + + + +``` +- そもそも manifest.json とは？ +> An application manifest is a [JSON] document that contains startup parameters and application defaults for when a web application is launched. +> [Web Application Manifest](https://www.w3.org/TR/appmanifest/#web-application-manifest) +> 「アプリケーションマニフェストは、Web アプリケーションの起動時の起動パラメータとアプリケーションのデフォルトを含む [ JSON ] ドキュメントです。」 + +- [マスク可能なアイコンを使用する PWA のアダプティブ アイコンのサポート  |  Articles  |  web.dev](https://web.dev/articles/maskable-icon?hl=ja) +- [Maskable Icon Generator | Progressier](https://progressier.com/maskable-icons-editor) \ No newline at end of file diff --git a/documents/JavaScript.md b/documents/JavaScript/JavaScript.md similarity index 100% rename from documents/JavaScript.md rename to documents/JavaScript/JavaScript.md diff --git a/documents/Laravel/README.md b/documents/Laravel/README.md new file mode 100644 index 0000000..0050826 --- /dev/null +++ b/documents/Laravel/README.md @@ -0,0 +1,9 @@ +# Laravel + +--- + +# Table Of Content + +- [Try tp Create My Laravel Project(my-portfolio)](./Laravel-my-portfolio.md) +- [Try Laravel With React](./Laravel-with-React.md) +- [30 Days To Learn Laravel](./30-days-to-learn-laravel.md) \ No newline at end of file diff --git a/documents/LogicalThinking/README.md b/documents/LogicalThinking/README.md new file mode 100644 index 0000000..3347807 --- /dev/null +++ b/documents/LogicalThinking/README.md @@ -0,0 +1,23 @@ +# Watch List + +- [ ] [Logical Reasoning: Become A Better Thinker - YouTube](https://www.youtube.com/watch?v=OcCPaSEICTY) + +### 見返したい + +- [ ] [【論理的思考】ってなに？必要？初心者向けにわかりやすく解説！【岡田斗司夫/切り抜き】 - YouTube](https://www.youtube.com/watch?v=V22-bPcaD7I) + +## 悩み事 +- 相談の仕方が下手くそ + - 色々考えた挙句に遠回しな言い方や、なにかおかしなことを提案？言いがち + - 変に対処法を考えないほうがいいのか？対処法は上司に考えてもらうべきなのか + - 自分でもこういった理由でこれをこう改善した方が良いと思ったが、どう思うか？と聞くのが良いのか + - でもなぜかその考えた結果が上司と違うのか...？ + - それは、自分が想定しているものの重要度と、上司が想定している重要なものに違いがあるから + - では、こうすべきですか？と聞きながら、価値判断？を上司にお願いして、それにしたがえばいい + - がんばれ + +--- + +# Table Of Content + +- [【超入門】ロジカルシンキング難しすぎて実践できない人向け 論理的思考術](./intro-logical-thinking-very-simple.md) \ No newline at end of file diff --git "a/documents/LogicalThinking/\343\203\255\343\202\270\343\202\253\343\203\253\343\202\267\343\203\263\343\202\255\343\203\263\343\202\260\345\205\245\351\226\200.md" b/documents/LogicalThinking/intro-logical-thinking-very-simple.md similarity index 100% rename from "documents/LogicalThinking/\343\203\255\343\202\270\343\202\253\343\203\253\343\202\267\343\203\263\343\202\255\343\203\263\343\202\260\345\205\245\351\226\200.md" rename to documents/LogicalThinking/intro-logical-thinking-very-simple.md diff --git a/documents/LogicalThinking/watchList.md b/documents/LogicalThinking/watchList.md deleted file mode 100644 index 4856b11..0000000 --- a/documents/LogicalThinking/watchList.md +++ /dev/null @@ -1,7 +0,0 @@ -# Watch List - -- [ ] [Logical Reasoning: Become A Better Thinker - YouTube](https://www.youtube.com/watch?v=OcCPaSEICTY) - -### 見返したい - -- [ ] [【論理的思考】ってなに？必要？初心者向けにわかりやすく解説！【岡田斗司夫/切り抜き】 - YouTube](https://www.youtube.com/watch?v=V22-bPcaD7I) \ No newline at end of file diff --git a/documents/NextJs.md b/documents/NextJs/NextJs.md similarity index 100% rename from documents/NextJs.md rename to documents/NextJs/NextJs.md diff --git a/documents/PHP.md b/documents/PHP/PHP.md similarity index 100% rename from documents/PHP.md rename to documents/PHP/PHP.md diff --git a/documents/Prettier/prettierignore.md b/documents/Prettier/prettierignore.md new file mode 100644 index 0000000..0ba75f0 --- /dev/null +++ b/documents/Prettier/prettierignore.md @@ -0,0 +1,6 @@ +# マークダウンが Prettier で整形される問題を解決する + +> ![NOTE] +> 1. ルートディレクトリに `.prettierignore` 追加 +> 2. `*.md` を追加 +> 以上 \ No newline at end of file diff --git a/documents/development.md b/documents/SoftwareDevelopmentMethodology/agileDevelopment.md similarity index 71% rename from documents/development.md rename to documents/SoftwareDevelopmentMethodology/agileDevelopment.md index cadb016..19f5e05 100644 --- a/documents/development.md +++ b/documents/SoftwareDevelopmentMethodology/agileDevelopment.md @@ -1,17 +1,16 @@ -# 開発関連 +# What is Agile Development -# アジャイル開発とは - [アジャイル開発入門！スクラムで実践するアジャイル開発のやり方と勉強法とは](https://www.youtube.com/watch?v=Jm3I6QXzjXw) -- *プロダクトバックログ作成、スプリント期間を決める、特定の日に進んだかどうかを確認する、できなかったら次での開発に活かす* -- *スプリント期間1週間でやってみる、金曜日の朝に進捗確認をする* -- 2種類の開発手順: ウォーターフォール or アジャイル +- _プロダクトバックログ作成、スプリント期間を決める、特定の日に進んだかどうかを確認する、できなかったら次での開発に活かす_ +- _スプリント期間 1 週間でやってみる、金曜日の朝に進捗確認をする_ +- 2 種類の開発手順: ウォーターフォール or アジャイル - アジャイル: - スクラム - XP - リーン -- スプリント: 1週間単位 +- スプリント: 1 週間単位 - 計画、開発、リリース - - 毎週毎週やっていく、チームによっては2週間を1スプリントとしたり + - 毎週毎週やっていく、チームによっては 2 週間を 1 スプリントとしたり - プロダクトバックログの作成 - TODO、優先度、詳細的なリストを作る（ほへー） - 工数は見積もらない @@ -28,10 +27,10 @@ - 絶対的な見積もり苦手、相対的な見積もりがやりやすい - なので、相対見積もりをする - ログイン機能とカード決済機能で比べて、それぞれの中で相対的に見積もりする - - 5、8とかは日数ではない - - 1, 2, 3, 5, 8で工数を決める + - 5、8 とかは日数ではない + - 1, 2, 3, 5, 8 で工数を決める - 進捗を確認 - 実装できたか、できなかったか - 合計何ポイント分作業できるかを確認する - ポイント付加を確認して、次の計画を確認する - - 金曜リリースは荷が重いので、曜日とか計画を考える \ No newline at end of file + - 金曜リリースは荷が重いので、曜日とか計画を考える diff --git a/documents/Terminal.md b/documents/Terminal/Terminal.md similarity index 100% rename from documents/Terminal.md rename to documents/Terminal/Terminal.md diff --git a/documents/TypeScript.md b/documents/TypeScript/TypeScript.md similarity index 100% rename from documents/TypeScript.md rename to documents/TypeScript/TypeScript.md diff --git a/documents/TypeScript/random-quote.md b/documents/TypeScript/random-quote.md new file mode 100644 index 0000000..26868b4 --- /dev/null +++ b/documents/TypeScript/random-quote.md @@ -0,0 +1,54 @@ +# Random Quote + +## 学びたいこと + +- 非同期処理の復習 +- ランダムな数値の生成 +- 非同期処理からのデータの取得 + +## まず、データのテスト + +```js +fetch("https://dummyjson.com/test") + .then((res) => res.json()) + .then(console.log); +``` + +- `fetch()`: https://developer.mozilla.org/en-US/docs/Web/API/fetch + - ネットワークからデータを取得するプロセスをはじめるメソッド + - プロミスを返す（レスポンスが有効だと、fulfilledを返す） + - `fecth()` は、リクエストが失敗となった時だけ、rejectする + - 具体例: きちんとしていないリクエストURL、またはネットワークの時にrejectとなる + - 404, 504などを受け取っても、rejectにはならない + - だから、`.then` で、resposeOKか確認して、OKだったら次の動作にいける + - `!response.ok` だったら、エラーを返せばよい [fetch() global function - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/fetch#examples) +- `then()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then + - `Promise` のインスタンス + - 2つの引数をとる + - `fulfilled` の時と、 `rejected` の時にコールバック関数を設定できる + - 実行したらすぐに Promise Objectを返して、チェーンしていく + - Example from MDN +```js +const p1 = new Promise((resolve, reject) => { + resolve("Success!"); + // or + // reject(new Error("Error!")); +}); + +p1.then( + (value) => { + console.log(value); // Success! + }, + (reason) => { + console.error(reason); // Error! + }, +); +``` +- Promise とは + - Promise は非同期処理の最終的な完了、もしくは失敗を表すオブジェクト +- **`console.log` が引数をとらなくていい理由**（理解できてない） + - then メソッドにコールバック関数を渡す場合 + - 普通は？引数として関数を渡すために `()` を使う必要がある + - ただ、引数として渡す関数が、単一の引数を受け取る場合、`()` を省略できる + - `.then((res) => res.json())` は、引数としてうけとったあと、`.json()` としなければいけないので、`(res)` とする必要があった + - でも `console.log` はただ、関数を実行するだけなので、`console.log` だけでいい...? \ No newline at end of file diff --git a/documents/WritingSkills/diff-toc-index.md b/documents/WritingSkills/diff-toc-index.md new file mode 100644 index 0000000..f42ca37 --- /dev/null +++ b/documents/WritingSkills/diff-toc-index.md @@ -0,0 +1,8 @@ +# TOC と Index の違い + +- TOC (Table Of Content): 目次 + - 章や節のタイトルやページ番号の一覧 + - 本文の構成を示す +- Index: 索引 + - 本や文書の最後に付けられる、キーワードや用語の一覧で、それらが本文のどこに出てくるかを示す + - 特定の用語やキーワードを簡単に見つけるのに役立つ \ No newline at end of file diff --git a/documents/mongoose.md b/documents/mongoose/mongoose.md similarity index 100% rename from documents/mongoose.md rename to documents/mongoose/mongoose.md diff --git a/documents/others.md b/documents/others.md deleted file mode 100644 index 1e28ca6..0000000 --- a/documents/others.md +++ /dev/null @@ -1,3 +0,0 @@ -# - -# API、エンドポイント \ No newline at end of file diff --git a/documents/english.md b/documents/others/english.md similarity index 100% rename from documents/english.md rename to documents/others/english.md diff --git a/documents/programming-terms.md b/documents/others/programming-terms.md similarity index 100% rename from documents/programming-terms.md rename to documents/others/programming-terms.md diff --git a/src/database/categories.json b/src/database/categories.json index 2ddbc5c..7e79ad8 100644 --- a/src/database/categories.json +++ b/src/database/categories.json @@ -48,6 +48,12 @@ "id": "p-vue-intro-to-vue3", "name": "Intro to Vue3" } + ], + "Others": [ + { + "id": "o-job-hunting", + "name": "Job Hunting" + } ] } } diff --git a/src/database/studyLog2024.json b/src/database/studyLog2024.json index 5b2868b..d78cfab 100644 --- a/src/database/studyLog2024.json +++ b/src/database/studyLog2024.json @@ -248,12 +248,29 @@ "date": "2024-06-09", "tasks": [ { - "id": "null", - "detail": ["null"], - "time": null + "id": "p-p-first-contributions", + "detail": [ + "プルリクの確認", + "タッチアイコンの画像角丸なし作成", + "ローンチにまつわる記載確認", + "faviconのmaskableについて調査" + ], + "time": 3 + }, + { + "id": "o-job-hunting", + "detail": ["業界調査、求められている技術まとめ", "今後学習する内容、目標の再設定"], + "time": 4 + }, + { + "id": "p-p-typescript-apps", + "detail": ["Random Quote: 非同期処理の復習"], + "time": 1 } ], - "memo": [""] + "memo": [ + "就活に関する情報をまとめなおした。先が長いと感じた。適当にささささ〜とやってしまうので、1つ1つのコードを理解しながらすすむことを意識してやっていく。" + ] }, { "date": "2024-06-10",