今回は前回作成したタブ切り替えメニューをWAI-ARIAに対応させていきます。 実際のコード See the Pen WAI-ARIA対応タブメニュー by naomi homma (@naomi-homma) on CodePen. HTMLの実装：role属性とaria属性の追加 <div class="tab"> <ul class="tab__list" role="tab-list"> <li class="tab__item"> </li></ul></div>

先日、「HOW TO MAKE A WEBSITE REAPONSIVE」というタイトルのツイートを見つけました。webサイトをレスポンシブにする上で、16(くらい)の注意点が挙げられていました。 基本的な内容ですが、大事なことが書かれていたので英語の勉強も兼ねて翻訳してみまし…

だいぶ久しぶりの更新となってしまいましたが、 今回はJavaScriptでTabメニューの実装をしていきます。 仕様 タブは3つ以上ある クリックすると切り替わる 表示されているタブは色が付く 同じタブモジュールをページ内に複数設置することが可能 ポイントとし…

だいぶ久しぶりのブログとなってしまいました...2020/10/5にエンジニアとして入社してから、実力不足を痛感し現場についていくための勉強を優先させておりました。 (ブログでのアウトプットは非常に大事なんですけどね！心の余裕が...)というわけで早速、202…

VSCodeを立ち上げた際に以下のメッセージが出て作業できないことがありました。「Extension host terminated unexpectedly.」発生する時としない時があり、何が原因か分かりませんでした。VSCodeを一度閉じて、再起動すると問題なく操作できる時もあったので…

今回は、create-react-appで構築したアプリへTypeScriptを導入する方法を解説していきます。 ※作成済みのアプリがある前提となります。ちなみにcreate-react-appの場合、最初からTypeScriptのサポートが含まれているので、 環境構築の際に以下コマンドを実行…

今回は、自身のポートフォリオで実装している「複数のモーダルを設置する方法」を解説していきます。モーダル一つだけというのはよく見かけますが、複数の場合の記事が少なかったので初心者の方でも実装できるように分かりやすく解説していきたいと思います…

今回はWebページが表示される仕組みの第二弾です！第一弾ではユーザーがページをリクエストしてから、ブラウザが指定されたサーバーへ辿り着くまでをまとめました。第二弾の今回は、ブラウザとサーバーのやり取りからまとめていきます。 ブラウザとサーバー…

今回はITの基礎学習のために、Webページが表示される仕組みをまとめていきます。この仕組みの理解は業務において必須でありますが、意外と初学者が見落としがちな部分なのでしっかり理解していきたいと思います。本記事はムーザルちゃんねるさんの動画と「We…

Reactでリプレイス中のポモドーロタイマーをGitHub Pagesにデプロイしました。GitHubリポジトリの設定を変更するだけでできるだろうと思っていましたが、 少しだけ手間がかかったので、その方法を紹介していきます。※Reactアプリが既に完成した前提で説明を…

以前、JavaScriptでポモドーロタイマーを作成しましたが、現在そのアプリをReactへリプレイスしています。React版でもユーザーが作業時間や休憩時間を設定できる機能を追加したのですが 実装までに苦戦したので、記録として残しておきます。ただ、今回紹介す…

git revert：過去のコミットの打消しコミットを新たに作る 過去のコミットに対して打消しコミットを作成し、変更を相殺させることでコミットを取り消すコマンドです。コミットを追加して過去のコミットを取り消しているので、「コミットを修正した」という履…

gitをコマンドで扱うようになってから、リモートにpushした後に branchを切るのを忘れてそのまま作業してしまうことがしばしばありました。その際に使えるのが「git stash」というコマンドです。今回はこの「git stash」の使い方をまとめたいと思います。 gi…

Github Pagesにアップロードしたポートフォリオサイトに、「formspree」というサービスを使い、お問い合わせフォームの実装を行いました。導入自体は難しくはありませんでしたが、解説されている記事が古いものばかりでしたので同じように困っている方に向け…

前回、git resetを使って目的のcommitまで戻すという作業を行いました。この際にgit resetにある3つのオプション「--soft」、「--mixed」、「--hard」について調べたのでまとめます。 まずは前提知識の確認 ～リモートリポジトリ変更までの流れ～ 変更をリモ…

アプリ作成中に、以前のcommitへ戻りそこから作業を始めたいという場面に遭遇したので、記録として残しておきます。 ①戻りたいcommitのハッシュ値を調べる git log //ハッシュ値を調べる上記コマンドを打つとコミット毎に以下のような表示が出てきます。 com…

前回までで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に切り替わ…