前回まででTodoの追加・表示ができるようになったので 今回は以下2つの便利機能を実装していきます。 ①入力フォームの入力内容をクリア 現状では、Addボタンを押しても入力値がそのままなので Addと同時にフォーム内を空にする。②Todoを削除 終了したTodoを…

前回は見た目を整えるところまで行ったので、今回はTodoリストを追加するプログラムを実装していきます。 どのコンポーネントで何を管理するか Reactのプログラムを書く上で大事なのがStateの管理場所とその内容だと思います。今回は次のように設定します。A…

今回からReactの学習記録をスタートさせたいと思います。Reactを選んだ理由は、以前作成した「ポモドーロタイマー」を 最終的にReact/Reduxにリプレイスするためです。 そのためには、React自体の理解が必須です。 まずは、簡単なアプリの作成を通して理解を…

前回で一旦完成したポモドーロタイマーですがGitHub Pagesで公開したところ、効果音が発生するタイミングで次のようなエラーが出てしまいました。 ①「ファイルが見つかりません」という内容のエラー ※エラー内容をメモしておくのを忘れてしまいました....②Un…

私はこれまで、SourceTreeを使いソースコードの バージョン管理を行っていました。ですが、先日、私が所属する「もりけん塾」にて開催されたGitの勉強会 に参加したことを機に、Gitコマンドで操作をすることにしました。 コマンドの操作は難しいですが、エラ…

ポモドーロタイマーvanilla JS編は前回の⑦で、機能自体はほぼ実装完了しました。前回の記事はこちら。naomi-homma.hatenablog.com 最後にhtml/CSSを整えていきます。完成品はこちらです。 (タイマー表示部分とユーザー編集部分) CSSによるスタイリングとhtml…

以前、ナチュリエのハトムギ化粧水の成分を読む機会がありましたのでせっかくならブログに残しておこうと思い、まとめてみました。 普段はプログラミング学習の内容を書いているブログなのですが前職で化粧品メーカーの研究開発をしていたのでたまにその分野…

私は現在、SourceTreeでGitの操作を行っております。ただ、SourceTreeだと誤った操作を行った後のリカバリーが難しいため、コマンドでの操作に慣れる必要があるなぁと感じておりました。 そんな折、私が入塾している「もりけん塾」にてGitの勉強会が開催され…

前回の記事でSourceTreeとGithubの連携方法について書いたのですが最近、Githubで大きなミスとちょっとしたミスを犯してしまったので備忘のため残しておこうと思います。 参考までに前回の記事はこちら naomi-homma.hatenablog.com まずは早速大きなミスから…

私はポートフォリオの作成を機に、ソースコードをGitで管理するようにしました。最初はコマンドラインでの操作を試みましたが、難しかったため一旦やめ....まずは原理や方法を学ぶことを目的に、Gitを視覚的に操作できる 「SourceTree」を使うことにしました…

今回も前回に引き続き使いやすさを改善するために 以下2つの機能を実装していきます。 ①各ターン終了後に効果音を鳴らし、終了を知らせる②chromeタブにカウントダウンを表示させる ※画面を見ていなくても確認できるようにするため 参考までに前回の記事はこ…

今回は、ポモドーロタイマーの作業時間や休憩時間をユーザーが編集できるように編集部分の実装を行っていきます。イメージはこのような感じです。 設定時間の表示とユーザー編集部分 ユーザー編集部分の追加 編集できる内容は次の4つとしました。 ・作業時間…

今回は、前回実装した自動サイクル部分のリファクタリングと START、STOP、RESETボタンをクリックした際の動きを実装していきます。 前回の記事はこちら naomi-homma.hatenablog.com 自動サイクル部分のリファクタリング 前回のコードでは各ターン毎に関数を…

前回からの続きになります。前回は1秒ごとにカウントダウンを行い それをタイマー領域に描画するところまで実装しました。今回は、作業と休憩のサイクルを自動的に回す実装を行っていきます。イメージはこのような感じです。workから自動的にbreakに切り替わ…

前回要件定義を行ったので今回はそれに従い、まずはVanilla JSで基本の動きを実装しました。 ※最終的にはReact/Reduxにリプレイスしますが JavaScriptの勉強も兼ねてまずはVanilla JSで書くことにしました。 表示領域の作成とDOM操作 まずは、index.htmlの作…

ポモドーロタイマーの作成にあたり ・どのような機能が必要か？ ・表示画面に必要な項目は？ ・どのような機能を持たせたいか？ などを整理しました。 いわゆる要件定義というものを行いました。 そもそもポモドーロタイマーとは？ ポモドーロテクニックとい…

みなさん、こんにちは！ 30代未経験からフロントエンドエンジニアを目指しているnaomiです！ 今回は、転職を成功させるために一歩を踏み出し そして、その先のロードマップを考えたので、 その内容を書き記していきます。 独学に限界を感じ、オンラインサロ…