深田

自分用の備忘録が中心です webアプリを作る勉強しています。 https://twitter.com/patch88888 ポートフォリオ https://fukada-portfolio.blog

深田

自分用の備忘録が中心です webアプリを作る勉強しています。 https://twitter.com/patch88888 ポートフォリオ https://fukada-portfolio.blog

マガジン

  • JavaScript基礎

    JSの基礎です

  • LInux 基礎

    Linuxの最低限をまとめました

  • aws

    AWSでwebサーバーを建てるために勉強したことをまとめました

最近の記事

Unity ターン制[No.2]

クリックを検出 name変数を使う prefabを扱う 別のクラスのメソッドを使えるようにする オブジェクトを削除する SEを鳴らす シングルトン コルーチン クリックを検出prefabにコライダーをつける 例Box Collider2D カメラにRAYをつける 例Physics 2D Raycaster prefabにイベントトリガーを付けて関数を紐づける 例Event TriggerのPointer Click 関数の中身は自身につけているがスクリプ

    • React[No.3] firebaseと連携

      メール認証 ルーティング メール認証v9対応 ルーティングnpm install react-router-domインストールしてルーティングを行う

      • Unity基礎[No.1]

        インスタンスを参照できるようにする シーンの移動 シーンの再読み込み ボタンの使い方 オブジェクトの表示/非表示と破壊 プレファブの生成と親要素の変更 セーブとロード 解像度が変わってもUIを固定する インスタンスを参照できるようにするusing UnityEngine.UI; //UI要素を使うとき[SerializeField] GameObject prefab;//エディターでオブジェクトをセットするpublic PlayerManager playe

        • git[No.1] 使い方まとめ

          ファイルの指定方法 diff restore 削除する gitで管理しないファイル ログの確認 ファイルの指定方法.  カレントディレクトリ以下の全てのファイルを指定  ディレクトリ名 そのディレクトリの配下にある全てのファイル diffgit diff ワークツリーとステージングに上がっていない差分を確認する 要するに、ステージングに上げる前に意図しない変更が加わってないか確認できる git diff --cached ステージングと前回コミットとの差分を表示

        マガジン

        • JavaScript基礎
          3本
        • LInux 基礎
          7本
        • aws
          8本

        記事

          React シミュレータを作ったときのメモ

          横スクロールする public配下で画像を表示する AWS S3で画像を公開する タブを使う 横スクロールする.box { //親要素 display: flex; width: 380px; height: 240px; overflow-x: scroll;}.box div { //小要素 width: 90%; margin: 5px; flex-shrink: 0;} public配下で画像を表示するテンプレート文字列を使う {`${pro

          React シミュレータを作ったときのメモ

          Sass基本 scssの文法[No.2]

          ネスト &  セレクタ名を省略 $変数 小要素のみに適用して孫要素には適用しない !important transform position 疑似要素 ネスト セレクタ名とスペースの省略 #container{ btn{ // container btn{ と同じ意味 color: red; }} & セレクタ名を省略 .btn{ cursor: pointer; background-color: white;

          Sass基本 scssの文法[No.2]

          Sass HTMLとCSSの基本[No.1]

          cssの基本 ブロック要素とインライン要素 displayプロパティ 中央揃えにする 詳細度 hover CSSの基本クラス名の前には . をつける ID名の前には#をつける 小要素だけにスタイルを当てるにはスペース空けて小要素を書く↓ .contnet h1{ color: red;} 複数にスタイルを当てるには , で区切る↓ h1, p{ color: brown} 合わせ技↓ .content h1, .content p{

          Sass HTMLとCSSの基本[No.1]

          React JSX記法とhookの基礎[No.2]

          JSXとは React要素を生成する コンポーネントを作る スタイルを指定する props useState hook useEffect hook key Input欄に入力された値を使う useContext hook JSXとはReact要素を生成することができる htmlとJavascriptを一緒に記述できる {}の内部にJavaScriptを記述する React要素を生成する複数のタグを生成する場合は一番親のタグを<>(React.Fragm

          React JSX記法とhookの基礎[No.2]

          React JSで押さえておくところ[No.1]

          モダンJavaScript スプレッド構文 map関数 filter関数 論理演算子 モダンJavaScript ES6=ES2015以降のこと ECMAScriptという規格があり年に1回更新される 以下詳細 モジュールバンドラー JSファイルを本番用に一つにまとめたもの webpackなど トランスパイラ 古い記法のJavaScriptに変換してくれるもの Babelなど テンプレート文字列 `文字列${変数}文字列`; アロー関数 引数が1つだと()が

          React JSで押さえておくところ[No.1]

          Node.js express入門[no.3]

          インストールの仕方 nodemon htmlファイルを読み込む フォーム情報を送信 コアモジュール インストールの仕方とりあえずサーバーを建てる↓ const express = require('express')const app = express()app.get('/', function (req, res) { res.send('Hello World')})app.listen(3000) http通信とは リクエストとレスポンスの1往復のこ

          Node.js express入門[no.3]

          Node.js 基礎入門[No.2]

          グローバルオブジェクトとは 遅延実行 アロー関数 モジュールの使い方 json形式でファイルを読み書きする グローバルオブジェクト Node.jsの場合はglobal ブラウザの場合はwindow グローバルの配下にあるグローバルオブジェクトはどこからでも実行可能でglobalを省略可能 プロパティ例 __dirname 実行中のソースコードのデイレクトリパスを取得 __filename 実行中のソースコードのファイルパスを取得 遅延実行非同期処理の一つ 指定し

          Node.js 基礎入門[No.2]

          VS Codeでデバッグ

          ブレークポイント 続行 ステップイン ステップオーバー ステップアウト ブレークポイント ブレークポイントを設定することで、 その行の処理を実行する前の状態で停止する 続行(▷) 次のブレークポイントまで処理を進める ステップイン(↓ボタン) プログラムを1行進める 関数の中に入る ステップオーバー(→ボタン)  プログラムを1行進める 関数は実行して中に入らない ステップアウト(↑ボタン) 関数にいた場合は残りの行を実行して呼び出し元の次の行へ移動する い

          VS Codeでデバッグ

          Node.js 準備と前提知識[No.1]

          Node.jsとはJSの実行環境npmとは Node Package Managerの略 プロジェクトで利用するソフトウェアを管理する仕組み Node.jsの特徴 シングルスレッド(前の処理が終わらないと次の処理が始まらない) ノンブロッキングI/O(インプット/アウトプットの際にブロックしない=メインスレッドの動きを邪魔しない) 例)サーバーへのリクエストとレスポンスの際にスレッドプールで処理することで、シングルスレッドでも非同期処理ができる(メインスレッドはどんど

          Node.js 準備と前提知識[No.1]

          JavaScript DOM入門

          イベント処理 フォトギャラリーを作る イベントとは ボタンがクリックされる、キーが押されるなど イベントハンドラとは イベントに対して行う処理のこと イベントリスナ イベントとイベントハンドラを紐づけているもの イベントリスナの構文 要素オブジェクト.addEventListener(イベントの種類, (e)  => { イベント処理 }, false); イベント処理の部分は関数として外に出すこともできる (例) const sayHelloButton

          JavaScript DOM入門

          Linux プロセス・ジョブの管理

          プロセス 現在実行中のプログラムの事 OS毎に管理されている ジョブ 1つのコマンドが1ジョブ パイプラインで書いた複数の処理も合わせて1つのジョブとして扱い複数のプロセスとしても扱う シェル毎に管理されている 実行中のプロセスを表示する ps ps u プロセスの詳細も表示 ps aux -がないオプション 全ユーザーの全プロセスを表示 バックグラウンド シェルの画面内でコマンドを実行することをフォアグランド 画面外で実行する事をバックグラウンド ジョブはフォ

          Linux プロセス・ジョブの管理

          Linux 管理者権限

          全てのファイルにはオーナーとグループが設定されている ls -l 権限とオーナー、グループを確認できる 権限 ファイルの権限は-rwxr-xr-x.このように表す オーナー、グループ、その他のユーザーの順に表す rは読み取り、wは書き込み、xは実行 -は権限が付与されていない事を示す 一番左は-がファイル rがディレクトリ lがシンボリックリンク 権限を変更するコマンドchmod chmod [ugoa] [+-=] [rwx] <ファイル名> u 所有者 g グルー

          Linux 管理者権限