study TodoListアプリをReactを使用して作ってみました。
少しずつ、制作物を作ってくると点が増えてきてちょっとずつ線になってきたかなと思っていますが、色々調べるとまだまだ奥が深くて点が足りていません。
色々動いていてブログを書くのが遅くなってしまいました。今日は、TodoListア...
study study Redux学習 その3 : Reduxの応用
前回では、
Reducerの結合について
Redux Thunk ミドルウェアについて
を学びました。
今回は、今までの基礎を使っての応用になりそうです。
Redux を使用してカウンター...
Redux Redux学習 その1 : Reduxとは、基礎知識[Store(ストア)、Action(アクション)、Dispatch(ディスパッチ)、Reducer(リデューサー)]
Reactでは、stateを使用することで状態管理を行なっていました。
ただ、stateはそのコンポーネントでしかアクセスできませんでした。
つまり、他のコンポーネントからアクセスができず、同じstateを使用したくても難しい...
Redux Reduxの学習 その2 : Reduxの基礎
前回は、Reduxの役割と基礎知識について学びました。
Reduxは、同じアプリケーション内であれば、状態(state)をどこからでもアクセスして、値を変更できるようした。
Reduxには
Store (ストア) … ...
study React学習 その7 : Reactの応用 part2
前回の記事ではReactの応用として、
if/else文についてJSX内で使用しやすくするため、三項演算子が好まれて使われていること
を中心に学びました。
今回は、
コンポーネントの状態に基づいてインライン CSS...
study JavaScriptとReactでのデータ操作について
最近、ずっとPCと向き合っているので生活環境を変えていかないとな〜と思っています。
今日は、Reactを勉強していて
"Reactでは直接オブジェクトを変更することはしないこと"と学んできました。
Rea...
study React学習 その6 : Reactの応用 part1
前回の記事では、Reactでできることを勉強しました。
復讐としては、
stateからpropsへ値を渡す方法ライフサイクルメソッドでできること(最近のReactでは、フックが使われている)JSXでのインラインスタイルの設定方...
study React学習 その5 : Reactでできること。
1日の中ですることが多くなってきて、一日24時間では足りなくなってきた今日この頃です。
前回の記事では、stateについて勉強できました。
本日は、
state を props として子コンポーネントに渡す
...
study React学習 その4 : stateを作成する(ステートフルコンポーネント)
前回の記事では、propsについて勉強できました。
前回の記事でも冒頭記述したように、復習(忘れないように)でもう一度記述しようと思います。
Props(プロップス)：
propsは、親コンポーネントから子コンポーネント...
study JavaScriptの便利な配列メソッド: map()、split()、filter()
こんにちは、少しずつ暑くなってきました。
今日は、最近よく使用するmap()、split()、filter()について記事にしてみました。
ここ最近Reactを使用してみて感じたことは、 map()、split...
study React学習 その3 : propsについて
前回の記事では、コンポーネントの作成について勉強できました
今日は、Reactのpropsというデータを管理するためのメカニズムになります。
PropsとStateの違いについて
Props(プロップス)：
pro...
study React学習 その2 : Reactでのコンポーネントの作成について
現在、freeCodeCampのReactを進めています。
前回の記事では、Reactの歴史やJSXでの規則、classを指定する時には、classNameを使用するということを勉強することができました。
今回は、
Cr...
React React学習 その1 : Progateでの復習も兼ねて
freecodecamp で学んだことを記事にしていきます。
freeCodeCampを0から進めてます。
今回は、下記の内容までを記事にできたらと思います。
Create a Simple JSX ElementCre...
React React Progate(無料枠)完了
少しずつ、暑くなってきて自宅で勉強するのが辛くなってきました、、、できれば、エアコンのかかったところで、、、と考え始めた今日この頃です。
今日は、React勉強で、Progateの無料枠が終わったのでその備忘録です。
...
study また、少しずつ勉強再開します、、、
かなり感覚が空いてしまいましたが、、,また、少しずつブログを再開できればと考えている次第です。
JSの基礎学習とReactの勉強を再開し始めました。
それにあたって、調べたことや勉強したことをまとめていこうと思います。
...
study もりけん塾 JS課題16に挑戦
もりけん塾 JS課題16に挑戦
もりけん塾にて、JavaScriptの課題に挑戦しています。こちらで挑戦した課題を備忘録としてまとめていきます。
今回挑戦したのは、課題16です。
前回の課題はこちらです。
今回追加...
study もりけん塾 JS課題15に挑戦
もりけん塾にて、JavaScriptの課題に挑戦しています。こちらで挑戦した課題を備忘録としてまとめていきます。
今回挑戦したのは、課題15です。
前回の課題はこちらです。
今回追加した機能
モーダル内に ...
study もりけん塾 JS課題14に挑戦
もりけん塾にて、JavaScriptの課題に挑戦しています。こちらで挑戦した課題を備忘録としてまとめていきます。
今回挑戦したのは、課題14です。
前回の課題はこちらです。
今回追加した機能
課題13で作ったモーダ...
study もりけん塾 JS課題13 に挑戦
もりけん塾にて、JavaScriptの課題に挑戦しています。こちらで挑戦した課題を備忘録としてまとめていきます。
今回挑戦した課題は課題13です
1つ前の課題で挑戦したコードに
ボタンをクリックしたらモーダルを表示するモ...
study 関数の巻き上げ(ホイスティング)
超絶お久しぶりです。
なんとブログを書くのが6ヶ月空いてました笑(笑い事じゃない…)
今日は、関数の巻き上げ(ホイスティング)について勉強したので備忘録として記事にします。
まず、ホイスティングとはなんなのか全くわからな...
study 初出勤！！
今日が初出勤だった僕。
初出勤の感想
大変だったこと
通勤に時間がかかったこと
緊張で…頭痛
良かったこと
今までやってきたことは無駄ではな...
css 単位の重要性について(px,%,em,rem,vw,vh…)
単位の重要性については、最近作品を作り始めて、重要性に気づきました。
これまでは、px,%を多用していましたが、vw,vhを使った方が良い場合が多いですね。
px：10pxだと、画面が小さくなろうと指定した1...
css background-sizeについて
background-sizeは要素の背景画像の大きさを設定します。
一つずつ見ていきます。
値としては、contain：画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。cover...
css cssフォントサイズの指定の違いについて
cssのフォントサイズの設定で使う物は、大きく分けて2つです。1、絶対値：10pxと決めれば10pxになります。2、相対値：親要素のサイズによって変わります。
1、絶対値：px2、相対値：%,em,rem,
1、のpxについて...
study overflowプロパティが効かない…について
結論は、子要素にposition: absolute;があると効かないです。親要素にposition: relative;を加えれば解決します。overflowプロパティについてみていきたいと思います。
overflow:画像がボッ...
HTML a(アンカータグ)タグ 擬似クラスについて
aタグに用いる擬似要素として、挙げられるのが…
:link 未訪問リンク:visited 訪問済みリンク:hover カーソルが重なった時:active クリックしてから離される時まで
擬似クラスはセレクタに続けて指定します。...
css cssで要素を中央に配置する方法
cssを使って、画像を中央に配置したいときどうしますか？今回は、それをいくつか紹介します。
早速行ってみます。
1、text-align: center;を使う(※インライン要素のみ)2、margin: auto;を使う(※ブ...
css background-imageで画像をぼかさずフルサイズにする方法
background-imageで画像をぼかさずにフルサイズで表示する方法。
HTML<div class="img"> <img src=./img/a.jpg alt="" width="" height=""...
css クラス名,id名 命名について
HTML,cssで作品を作っていて思ったのが、意外と、クラス名、id名についての設定で時間をとることが、多くなりました。
ブロックなど親要素で使えそうなclass名
container : コンテナmain : メインglob...
study cssの基本単位として”rem”を使うと便利な件について
ホームページを作るときに、の幅の指定に困りませんか？
今回は、それを解決しようと思います。
width,heightの指定として、楽なのは、remです！！
remとは何か…
ルート要素(html要素)で指定した値を...
Git・GitHub Git GitHub について
Git GitHubでうまくいかなかったので記載しようと思います。ちなみに、今回は、もりけん先生に教えていただいたgit cloneで作成してはいません…次回に記事にします。
gitとgithubの違いについては、以下のリンクで調べ...
study フロントエンドエンジニアになるために
フロントエンドエンジニアになると決めたのはいいけれど…どのように進んでいくのか息詰まったので、整理します。
逆算して…
1.目標として、2021年3月までに就職をする。2.それを達成するために、9月までに、以後記載する(HTM...
JavaScript JavaScript~クイズゲーム 修正2~
今日は、以前のタイピングゲームの修正です。
上記が以前のコードです。
ここの117行目のところが原因で、最後の問題を解いた後に、正常であれば、結果が出るのですが、それがでません。まず、何が原因なのか考えるため、co...
JavaScript JavaScript~クイズゲーム 修正1回目~
JSのクイズゲームでエラーがでたので、先生に質問しました。
問題のコードがこれです。↓↓
エラーを起こすときは、問題をスタートして、ラジオボタンが表示されて、問題に答えるためにラジオボタンにクリックしたときに、ch...
JavaScript JavaScript~LoadとDOMContentLoadedの違い~
今日は、javascriptのLoadとDOMContentLoadedについて記事にします。
先生に質問した時に、先生の解答から調べたもでしたが、意外とブラウザでjavascriptやHTML、CSS、画像等がいつ読み込まれるのか...
study JavaScript~クイズゲーム2~
JavaScriptのクイズゲームを作ってます。今回は、以前の話の3、コードの解説4、わからなかったところ、調べたところ
まず、コードです
3、コードの解説最初はFisher-Yates アルゴリズムについてです...
JavaScript JavaScript~クイズゲーム~
JavaScriptを本気で勉強し始めてから、論理的に筋道立てて考えられるようになってきたような感じがするのは気のせいかな？
作品のほうも、クイズゲームができたので、少しずつ、スライドショーや、ドロワーメニュー、検索ボックス、※ペー...
study React~render( )について~
renderには2種類のrenderメソッドがあります。
ReactDOM.render()はReactエレメントをドキュメント(生成されるHTML等の文書)にレンダリングする役割です。Reactコンポーネントのクラスで呼び出されて...
React React~useStateとは~
useStateの意味がよくわからなかったので、記事にします。
useStateとは、クラスコンポーネントを書かずに関数コンポーネントでstateとほぼ同じ機能ができる機能のようです。
stateの意味の前に、Reactコンポ...
React React~関数コンポーネントの更新関数について~
最近蒸し暑い2020/6/26現在。さらに、色々バタバタしていて、体重増加と、お腹が出てきたT^T
少し、復讐です。
Reactは、JavaScriptで作られた物をまとめたものになります。さらに、Reactを使うことで、SP...
React JavaScript~Node.js(非同期通信)やReact.js Vue.js(ライブラリ)やnmp,yarn(パッケージ)について調べたこと~
お久しぶりです。母がなくなってから1週間を迎えようと言うところ…ふとしたときに実感が湧く、「あぁ、いないんだな」と…本当に不思議な感じです笑
今日は、JSで色々とお仕事を探していると、Node.jsやReact,Vueやnmp,ya...
JavaScript JavaScript~ストップウォッチ完了~
最近、なかなか時間を作ることが難しくなってきました。
今日は、ようやくストップウォッチができたので、記事にします！！（作るまで長かった笑）
基本的な流れをまず記載して、その後、実際のコード、解説、調べたことの順に書いていきます...
study JavaScript~タイピングゲーム findIndexについて~
タイピングゲームもいよいよ後半に差し掛かり？。難易度がアップしています。できるだけ自分で作りたいのですが、分からないところが多いので、先生に聴きながら、また、めちゃくちゃ時間かけて調べてます。今回も、findIndexですが、調べてます笑...
JavaScript JavaScript~先日の記事の？の部分の理解~
なかなかタイピングゲームを作るのが難しい😭でも、先生に聞いたりしたおかげで、つまづいていたfor文のループ条件のところが分かったので記事にしたいと思います。
以前の記事はこれです！
前回質問したときの私のコード...
JavaScript JavaScript~タイピングゲーム ver.2~ 先生の回答
ようやくパソコン(MacBook Pro16 インチ)が届きました。☺️嬉しい♪けど…高い！！
今日は、パソコンがきてから初めてのブログ更新です！！
質問の仕方が悪く、毎回先生を困らせてます。質問の...
JavaScript JavaScript~タイピングゲームver.1~
頼んだパソコンが、不手際でキャンセルされたー...Oh My God...こんなことってあるんですね(´;ω;｀)
気を取り直して、今日からタイピングゲーム制作を始めました。早速躓いたので、記事にします。
まずは、お決まりので...
JavaScript JavaScript~完成(添削なしver)~
ようやく、ストップウォッチが形になりました。ふぅー。
完成がこれです。
今回調べたことは、１、ボタンを一度しか押せなくすること。２、clearIntervalメソッドについて
１、については、ボタン要素.di...
JavaScript JavaScript~setTimeoutとsetIntervalの違い~
ストップウォッチ全然進まなーい．．．
今日はsetTimeoutとsetIntervalの違いです。←これまたムズイ
大まかには、setTimeout(指定した時間に一回だけ動作する)、setInterval(指定した時間ごと...
JavaScript JavaScript~setTimeout()の書き方について~
ストップウォッチのコード書いていて疑問に思ったことがあった。
setTimeout(() =>{ //処理内容}, //待ち時間)
setTimeout(ファンクション処理、待ち時間)
これ何が違うの？MDZにす...
JavaScript JavaScript~onclickとaddEventListenerの違い~
うまくいったと思ったら何か違う...やっていて楽しいからいいけど…
今日は、ストップウォッチの途中経過でわからなかったこと、調べたことを記事にします。
onclickとaddEventListenerの両方ともクリックしたら実...
JavaScript JavaScript~ストップウォッチ~
最近、パソコンのしすぎで首が痛い...
今日は、パソコンが壊れてから、やり直したストップウォッチ制作でわからなかったことを記事にします。
途中までですが、一連の流れとしては、1、ページを読み込んだらその時の時間を取得。2、st...
JavaScript JavaScript~ストップウォッチver２~
早くパソコンが来ないかなーと思い続けています。
以前と比べてだいぶコードがすっきりしましたが、先生曰く、自分のコードは、信憑性に乏しいと教えていただいたのですが．．．
正直、(。´･ω･)?
ただ、詳しく解説していただ...
JavaScript JavaScript~実習編:おみくじ編~
コロナウイルスが終息するまでに、アプリ開発できるまでになりたい。そして、アプリ開発したい。というか、なります。
今日は、おみくじを作ったので、少し紹介させてください。
コードです。
コードの可読性、保守性について...
css CSS ~しまぶーのIT大学~で改めて勉強できたこと
しまぶーのIT大学はわかりやすいです。ただ、完全な初心者向けとは言いづらいのかな？
自分としては、完全初心者向けの参考書で勉強してから見たら、「あぁ、なるほど」となります。
今回は、改めて理解したことを記事にします...
コラム 近況報告です。
コロナの影響で、就職活動ができず、さらに、今後の経済状況によっては就職難になりそうな感じです...(-_-;)
まぁやれることは決まってますけど...
最近やっていることとしては、JavaScriptをやっています。もりけん先...
JavaScript JavaScript ~どちらを選ぶ!?; 配列 vs オブジェクト~
どうも！！最近は、JavaScriptの勉強ばかりしています。早く、コードを書いてアプリや動的なWebサイトを作りたいです...
今日は、配列を使うのか、オブジェクトを使うのか、よくどちらを使うか迷うので教科書で勉強したことを書き込...
JavaScript JavaScript ~今まで出てきたオブジェクトの違い~
最近、生活環境を変えたやすです。
今日は、これまで使ってきたオブジェクト例:(windowオブジェクト、documentオブジェクト、consoleオブジェクト)と、配列のようなオブジェクト例:(let jsbook = {titl...
JavaScript JavaScript 新しいデータの種類「オブジェクト」について
オブジェクトは、配列と同様に複数のデータを1つにまとめて、変数に代入できるものです。ただ、データを1つにまとめるのは同じですが、作り方もデータの読み取り方もだいぶ違うみたいです。
詳しく見ていきます。
<script&g...
JavaScript 配列,for…of文,配列メソッド
教科書を読み進めて、自己満足で終わるこの頃です。勉強自体自己満足か(笑)
今日は配列について書こうと思います。
配列…複数のデータを1つの変数,定数にまとめて管理するのに使われる。
まずは、配列の書き方！let todo...
JavaScript JSの演算子
生活リズムを元に戻そうと奮闘している最近のやすです。
今日は、演算子についてまとめようかと思います。
意外と知らなかったのが、こちら1,a**b2,a%=b3,++a
答えは、1,aのb乗2,a/bの余りをaに代入3,a...
JavaScript JavaScriptオブジェクト、プロパティ、メソッド、パラメーターについて
どうも、ドライアイ👁がかなりひどいこの頃です。
今日は、JavaScriptの本で勉強した。オブジェクト、プロパティ、メソッド、パラメーターについてです！！
以前から、何回も調べては、何がどうだっけ？、docu...
JavaScript JavaScriptの定数、変数について
新しく買ったJavaScriptの本は途中までですが、かなり理解しやすいと感じています。また、紹介できたらなぁと思っています。
今日は、変数、定数についてですが、、、これも違いが分かりませんでした(笑)さらに、驚きが今までvarを使...
JavaScript 新しいJavaScriptの本で学んだこと
最近ネガティブ志向になっています(笑)
今日は、新しく買った、JavaScriptの本で勉強したことを書きます。
まずは、JavaScriptの仕組みからHTML、CSSがブラウザ(ChromeやFirefox,safariな...
コラム 就職活動について
以前、面接を受けた会社で、HTML,CSSのレベルアップ(学生の方が良い作品作るとのこと)。JavaScript,photoshop,illustrator,Xamppの知識があったほうがいい。...等色々教えていただきました。何を今すべ...
Git・GitHub 今日の学び(git)
本を先日購入したのでそれの予備知識として、今日学んだことを書いておきます。
gitの大まかな流れ！！・自分がいじっているフォルダ(ワークツリー)⇩ add・ワークツリーをローカルリポジトリに上げる前のなんのファイルを上げるのか選択し...
JavaScript 漫画で分かるJavaScriptプログラミング講座 コラム正規表現
var res = ('０１23-4５６7-８90１').replace(//g, function(s) { return s.charCodeAt(0) - '０'.charCodeAt(0);});document.write...
JavaScript JavaScript正規表現 ~漫画で分かるJavaScriptプログラミング講座~
正規表現とは、文字を検索、置換するためのルールのこと。
表現方法の仕方:文字列オブジェクト . replace( / 検索文字列 / フラグ , 置換する文字列 )
悩んだところ
var a = "mn abcd aBC...
JavaScript 漫画で分かるJavaScript講座にて(´;ω;｀)
皆さんこんばんはヤスです。本日、やりたいこといっぱいあったのに今回の項目で一日使い果たしてしまった阿呆です(笑)では、何に１日使い果たしたのか見ていきましょう！！
まずは、このプログラムを見てください。
var Seito ...
Git・GitHub githubで分からなかった単語まとめ
README(リードミー)…ソフトウェアを作成する際の説明文のこと。使用する際に最初に読むべきものとされている。リポジトリ…ファイルやディレクトリの状態を保存する場所ローカルリポジトリ…自分のマシン内にあるリモートリポジトリ…サーバーやネ...
JavaScript JavaScript オブジェクト 配列 for in文 代入演算子について
まずは、JSコードについてvar tensuuObj = { 足立: 65, 安藤: 78, 内木: 87};var goukeiTen = 0;var ninnzuu = 0;for (var key in tensuuOb...
study Google Search Consoleについて
本格的にWebサイトを運営？してみたくて、ついにgoogle search consoleの登録、設定しました。比較的簡単な部類ではあるとは思いますが、疲れた😫
google search consoleとは 検索結...
study 先生からの課題
先生にセレクタの質問をした際、課題をいただきました！！！ぜひ、解いてみてください
・section > best・section.wrapper > best・section &.best・section a.best .b...
study セレクタについて
progateのサイト模写をしていて気づいたこと...
<sectionclass="main"><divclass="mainvisual-wrapper"></div>
というHTMLの...
study お疲れ様です！！
最近、勉強より、ツイッター見てる時間長いかもと感じるこのごろです。
今日は、box-sizing:border-boxについて記述したいと思います。(うまく説明できるかな？...)まず、要素を囲むのは内側から順に、コンテンツ...
study 更新遅れてしまった…box-shadow,margin,padding、flexについて
2日に１回ブログを更新しようと決めたのに今回、3日になってしまった。
今日は、progateの上級編の模写をやってました！！なかなかの具合で進んでおります(笑)勉強したこととしては、1、box-shadowの使い方2、margin,...
study display:flexbox;、display:fixed;について
1、flexboxの使い方 2、fixedの使い方を勉強しました。備忘録です。
1、flexboxの利点について✅ナビゲーションは、float,inlineを使わなくてもflexboxで楽にできること。 細かいことは...
study いつものこと…
昨日から頭痛で動けていません。時期が時期だけになにもないことを祈ります。さらに、花粉症のダブルパンチ！！！！はっきり言ってしんどいよね...これは...
少し勉強の話をしようかなと思います...現在、JSを勉強しています。以...
study JSについて続き…
昨日、JSについて書いた記事で、jQueryは重くなるという理由を書きましたが、教えていただいている先生の方から、どのライブラリでも同じ現象が起きる様です。
ライブラリ…汎用性の高い複数のプログラムを再利用可能な形でひとまとまりに...
study JSについて
フロントエンドエンジニアについて、jqueryを先日まで勉強していましたが、実際のエンジニアの方に聞いたこととして、jqueryよりJSを使うべし。
1番、考えるところだったのが、jqueryはJSで作られていること。勉強するならT...
コラム 先日…
先日から、もりけん塾にお世話になることになりました。色々とやることはありますが、とりあえずフロントエンドエンジニアになることを目標に頑張っていきます。
study test2
test2
コラム テスト
テスト投稿