男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

MERN client行ってみよう

MERN行ってみる? MERN client準備編 目次 コンポーネントの雛形作成 スタイル適応の準備 reducer作成 前回の続きです。 今回はクライアントの処理を書いていきます。 今回作成していくもの コンポーネントの雛形作成 ターミナルでclientに移動してパッケー…

MERN serverセットアップ

MERN行ってみる? MERN Server処理準備編 目次 routeの作成 controllerの作成 modelの作成 server/一覧表示・投稿処理の作成 前回の続きです。 今回はサーバーの処理を書いていきます。 今回作成していくもの routeの作成 まずはserverディレクトリにroutes…

MERN環境構築

MERN行ってみる? MERN環境構築編 目次 参考動画 環境構築 今回からMERNスタックについて書いていきます。 MERNとは MongoDB Express React Node の略です。これらを使用して簡単なアプリケーションを作っていきます。 今回学習に使用させていただいた動画が…

children().children()とかやってないよね?

jQuery jQuery備忘録 Vol.2 目次 children().children()とかやってないよね? 今回は子要素以下の特定の要素を取得する方法です。 find() index.html <body> <div> <p>children().children()とかやってないよね?!</p> <div class='content'> <ul class="ul_1"> <li id='1'>1</li> <li id='2'>2</li> <li id='3'>3</li> </ul> <button class="button">はいっ!</button> </div> </div></body>

jQueryでHTML要素を作成

jQuery jQuery備忘録 Vol.1 目次 jQueryでHTML要素を作成 ご無沙汰になってしまいました。今回は業務中に使用したjQueryの備忘録となっています。 全く更新していなかったのですが、ちょこちょこアクセスがあるようで・・・ありがとうございます。 頑張って…

JavaScript input要素の操作・セレクトボックスの操作

JavaScript DOM編 vol.4 JavaScript備忘録 Vol.15 目次 input要素の操作 セレクトボックスの操作 今回もJavaScriptの記事になっています。 input要素の操作 ここではinput要素に入力された値をリストに追加していきたいと思います。 index.html <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScri</title></meta></head></html>…

JavaScript カスタムデータ属性、要素の追加・複製挿入・削除

JavaScript DOM編 vol.3 JavaScript備忘録 Vol.14 目次 カスタムデータ属性 要素の追加 要素の複製・挿入 要素の削除 今回もJavaScriptの記事になっています。 カスタムデータ属性 まずは最初の段階のindex.htmlとmain.jsの中身です index.html <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScri</title></meta></head></html>…

JavaScript 要素の属性を操作・クラス名で操作

JavaScript DOM編 vol.2 JavaScript備忘録 Vol.13 目次 要素の属性を操作 classNameを取得 classList( ) 今回もJavaScriptの記事になっています。 今回もDOMの操作を見ていきます。 要素の属性を操作 まずは最初の段階のindex.htmlとmain.jsの中身です index…

JavaScript DOM要素の操作

JavaScript DOM編 vol.1 JavaScript備忘録 Vol.12 目次 要素の操作 複数の要素を取得 要素の取得方法 addEventListner( ) 今回もJavaScriptの記事になっています。 まだオブジェクト編は残っていますが、今回はDOMの操作を見ていきます。 要素の操作 まずは…

JavaScriptでランダムな整数値を生成する・日時の取得・alertとconfirm

JavaScript オブジェクト編 vol.8 JavaScript備忘録 Vol.11 目次 ランダムな整数値 日時 alert( )・confirm( ) 今回もJavaScriptの記事になっています。 ランダムな整数値 ここではランダムな整数値の出力してみましょう 前回の記事の Math.random( )を使っ…

JavaScript いろんな関数

JavaScript オブジェクト編 vol.7 JavaScript備忘録 Vol.10 目次 join( ) split( ) Math.floor( ) Math.ceil( ) Math.round( ) toFixed( ) Math.random( ) 今回もJavaScriptの記事になっています。 今回は様々な命令のみの記事になっていますのでサクッとい…

JavaScript オブジェクトにループ処理(おまけ: 文字列の操作)

JavaScript オブジェクト編 vol.6 JavaScript備忘録 Vol.9 目次 Object.keys( ) 変数 文字列の操作 今回もJavaScriptの記事になっています。 Object.keys( ) 例えば、オブジェクトのプロパティを全て取り出したいとします。 ですがオブジェクトにはforEach( …

JavaScript プロパティとオブジェクトの操作

JavaScript オブジェクト編 vol.5 JavaScript備忘録 Vol.8 目次 プロパティの操作 オブジェクトの操作 今回もJavaScriptの記事になっています。 プロパティの操作 ここではオブジェクトのプロパティの操作方法を見ていきます。 const fruit = { name: 'orang…

React 基礎編

React 基礎編 React備忘録 目次 ReactDOM.render( ) JSX Component 今回はReact.jsの記事になっています。 Reactの導入についてはいろんなとこで紹介されているので今回は省略させてもらいます。 今回はこんなのを作っていこうと思います。 各色がクリックさ…

JavaScript mapメソッドとfilterメソッド(おまけ: オブジェクトの生成)

JavaScript オブジェクト編 vol.4 JavaScript備忘録 Vol.7 目次 map( ) filter( ) オブジェクトの作成 今回もJavaScriptの記事になっています。 map( ) 例えばこんな配列があって const prices = [100, 200, 300, 400]; この配列のそれぞれの金額を50円ずつ…

JavaScript スプレッド構文と分割代入

JavaScript オブジェクト編 vol.3 JavaScript備忘録 Vol.6 目次 スプレッド構文 分割代入 forEach( ) 今回もJavaScriptの記事になっています。 スプレッド構文 2つの配列があったとします。 const price1 = [500, 600]; const prices = [100, 200, 300, 400]…

JavaScriptで配列の要素を変更する

JavaScript オブジェクト編 vol.2 JavaScript備忘録 Vol.5 目次 配列の要素変更 今回もJavaScriptの記事になっています。 配列の要素変更 今回は配列の要素を変更する方法を見ていきましょう unshift() push() shift() pop() splice() 全て例文で見ていきま…

JavaScriptで配列を作る・ループ処理を行う

JavaScript オブジェクト編 JavaScript備忘録 Vol.4 目次 配列を作る 要素にアクセスする ループ処理との組み合わせ 今回もJavaScriptの記事になっています。 配列を作る 例えば商品の金額を管理したい場合 { const price1 = 120; const price2 = 110; const…

JavaScript 基礎編 Vol.3

JavaScript基礎編 Vol.3 JavaScript備忘録 Vol.3 目次 アロー関数 スコープ 今回もJavaScriptの記事になっています。 アロー関数 まずは前回の記事でも使用した例文 const sum = function(a, b, c){ return a + b + c; }; const total = sum(1,2,3) + sum(3,…

JavaScript 基礎編 Vol.2

JavaScript基礎編 Vol.2 JavaScript備忘録 Vol.2 目次 関数 引数 return 関数式 今回もJavaScriptの記事になっています。 関数 関数はJavaScriptの基本的な構成要素のひとつです。 JavaScriptの処理__つまり、タスクや値計算を実行する文の集まりです。 まず…

JavaScript 基礎編

JavaScript基礎編 JavaScript備忘録 目次 if文 switch文 for文 while文 今回もJavaScriptの記事になっています。 if文 前回の記事にも出てきましたがif文を見ていきます。 そこまで難しくは無いのでサクッと まずは例文 const score = 60; if(score >= 80){ …

JavaScript 簡単宝探しゲーム

宝探しゲーム JavaScript備忘録 目次 HTMLファイルにCSS・JavaScriptを書き込む方法 宝探しゲームの全体のコード 各部解説 今回はJavaScriptの記事になっています。 HTMLファイルにCSS・JavaScriptを書き込む方法 以前2記事に渡ってHTMLについて書きました…

Ruby べき乗

べき乗 Rubyメソッド(備忘録) vol.12 目次 べき乗 今回も備忘録としてRuby関連の記事になっています。 数値をべき乗する 2の4乗を出力する input = 2 result = input**4 puts result # 出力結果 16 2×2×2×2の結果が出力されます。 学習初めて半年経ってから…

Ruby 文字列に使用できる便利なメソッド

文字列に使用する便利なメソッド Rubyメソッド(備忘録) vol.11 目次 .chop! .gsub! 今回も備忘録としてRuby関連の記事になっています。 文字列の最後の1文字を取り除く マウスの「ス」を取り除く str = 'マウス' result = str.chop! puts result # 出力結果…

Ruby 特定の文字を数える

特定の文字を数える Rubyメソッド(備忘録) vol.10 目次 .count() 今回も備忘録としてRuby関連の記事になっています。 文字列の中に特定の文字がいくつあるのか数える mmmTECHmmmという文字列にmがいくつ入っているのか数える str = 'mmmTECHmmm' result = st…

Ruby nまでの和

nまでの和 Rubyメソッド(備忘録) vol.9 目次 nまでの和 今回も備忘録としてRuby関連の記事になっています。 nまでの和 数値nまでの数字を足した合計を出力します。 n = 10 result = n*(n+1)/2 puts result # 出力結果 55 1~10を合計した値が出力されます。 1…

Ruby 文字列を反対から出力する

文字列を反対から出力 Rubyメソッド(備忘録) vol.8 目次 .reverse 今回も備忘録としてRuby関連の記事になっています。 reverseメソッド 文字列を逆転させることができます。 input = "abcdef" str = input.reverse puts str # 出力結果 fedcba 逆転された文…

Ruby 奇数か偶数か調べる

奇数か偶数かを調べる Rubyメソッド(備忘録) vol.7 目次 .even?/.odd? 今回も備忘録としてRuby関連の記事になっています。 evenメソッド 数値が偶数かどうかを調べるメソッドです。 input = 6 result = input.even? puts result # 出力結果 true 偶数の場合…

Ruby 文字列を切り取る

文字列を切り取り Rubyメソッド(備忘録) vol.6 目次 .slice 今回も備忘録としてRuby関連の記事になっています。 sliceメソッド 文字列から任意の文字を切り取ることができるメソッドです。 いくつかの使い分けができます。 まずは input = "abcdefghijklmnop…

Ruby 絶対値を取得する

絶対値を取得する Rubyメソッド(備忘録) vol.5 目次 .abs 今回も備忘録としてRuby関連の記事になっています。 absメソッド こちらは単純、数値に使用できるメソッドで絶対値を取得することができます。学生の頃は絶対値とか何に使うん?!って思ってましたけ…