Vue.js について簡単にまとめてみた

Vue.js とは Vue.js の重要な技術 コンポーネントシステム リアクティブシステム レンダリングシステム Vue.js の基本操作 Vue インスタンスのマウント データの定義 データの変更検知 テンプレート構文 フィルタ 算出プロパティ ディレクティブ 条件付きレ…

vue チュートリアルをやってみる

Vue とは Vue コンポーネントの2つのスタイル Vue アプリケーションの作成 前提条件 テンプレートを作る アプリケーションのインスタンスを作る アプリケーションのマウント 参考 Vue とは 説明は次のように書かれている。 Vue (発音は /vjuː/、view と同様…

JavaScript:オブジェクトを持つ配列のソート

基本構文は次のようになっている。 // アロー関数 sort((a, b) => { /* … */ } ) ソート方法をアロー関数内に書き、昇順降順は次のように、アロー関数内の比較結果によって変わる。 a, b の返値 ソート順 > 0 a を b の後に並べる(昇順) < 0 a を b の前に並…

JavaScript:非同期処理②

非同期処理の流れ Async Function が返す Promise の種類 await 式はエラーを throw する 参考 非同期処理の流れ 下記のコードと図がとてもイメージしやすく、理解しやすい。 function taskA() { console.log("タスクAを実行 at " + Date.now()); } function…

npm パッケージを公開する

npm を公開するために npm レジストリを使用する。以下に使用するための流れをまとめておく。 アカウント登録 npm レジストリを使うためにアカウント登録を行う。 登録ページ にアクセスする。手順はこちらが参考になる。 アカウント確認 コマンド上で npm l…

JavaScript でHTMLページのソースを取得する

async/await を使う場合は次のような感じ。async 関数はプロミスを返すので、受け取り側で値を取るときには、.then で受け取ればいい async function GetHtml(url) { const promise = fetch(url) // Promiseを返す const response = await promise; // fetch…

スクラムがうまくいっていないと感じる時の改善術

ゾンビスクラムサバイバイルガイドを読んだので、大事だと思ったところをまとめる。 スクラムの目的 なぜステークホルダーを巻き込むのか? ステークホルダーは誰か? 健全なスクラムチーム ステークホルダーが求めるものを作る 早く出荷する なぜ早くするの…

技術書の読み方

見つける 出会い方 本の選び方 トレンドを知る 読み方 読書にかける時間 本の価値を時給換算する 読書の目的をはっきりと持つ 手を動かす アウトプットは最大の成長 なぜか? どうするか? 参考 見つける 出会い方 まず、『何を読んだらいいかわからない』と…

JavaScript:非同期処理①

コールバック関数 コールバック関数とは コールバック地獄、破滅のピラミッド promise イベントと処理を結びつける イベントを受け取る コールバックとの違い Promiseチェーン Promise での例外対応 再スロー reject を未処理にしない Promise API Promise.a…

JavaScript:ガベージコレクション

ガベージコレクションは、JavaScriptのメモリ管理の仕組みで、使用されなくなったオブジェクトを削除し、メモリを解放する。 実行は、ガベージコレクタと呼ばれる、バックグラウンドプロセスにより自動的に実行される。ガベージコレクタはオブジェクトを監視…

コミュニティ参加できない人に送る一言

この記事はフィヨルドブートキャンプ Part 1 Advent Calendar 2022 - Adventar 9日目の記事です。パート2もあります 昨日はharuna tsujitaさんの『自作サービス、ボツにしたサービス案たちをご紹介』という内容でした。色々なアイディアがあって、個人的に…

ESLint、Prettierを使ってコード一貫性を実現する

ESLint ESLint とは ESlint をコマンドラインで使ってみる ESLint を VSCode で使ってみる Prettier Prettier とは? Prettier をコマンドラインで使ってみる Prettier を VS Code で使ってみる 参考 ESLint ESLint とは ESLint は、コードの一貫性を高め、…

GitLab-CE バックアップ、リストア、アップグレード

実行環境 バックアップ リストア バージョンアップグレード 実行環境 項目 内容 OS WSL2:ubuntu2020 ミドルウェア Docker-Desktop バックアップ GitLabのバックアップでは、3種類のファイルをバックアップする。 GitLab GitLab のデータ本体。コマンドは下…

npm 概要

npm とは npm を使ってみる 参考 npm とは npm(Node Package Manager) は、JavaScript 系のパッケージを管理するツール。インストール時に依存関係を考慮してインストールしてくれる。 OS系パッケージ管理だと、 apt, dpkg, Homebrew のようなもので、言語系…

nvm と Node.js を使ってみる

nvm って? nvm(Node Version Manager) は Node.js のバージョンマネージャ。コマンドラインにて異なるバージョンの node を使えるようにできる。node については後述。 下記のような感じで、コマンドライン上で node の切り替えやインストールなどができ…

JavaScript入門〜ブラウザ操作とフォーム〜

JavaScript でブラウザ操作 ダイアログ表示 ウィンドウ操作 自動実行 ウィンドウ表示 ページのURL情報参照 ページを移動・更新する JavaScript でフォームを操作する 参考 JavaScript でブラウザ操作 JavaScript では色々ブラウザに対して操作できる。 ダイ…

JavaScript入門〜イベント処理〜

イベント処理とは イベントハンドラーの登録 イベントハンドラの記述位置 イベントを受け取る イベントの伝搬 イベントの種類 マウス系 キーボード系 change イベント input イベント コピペ系 データ読み込み系 その他 参考 イベント処理とは JavaScript で…

JavaScript入門〜DOMとは〜

DOMとは DOMオブジェクトの操作方法 ノードの作成と追加 参考 DOMとは DOM (Document Object Model) は HTML や XML 文書を取り扱うための API 。 DOM では、ドキュメントに含まれる要素やテキストデータをオブジェクトとして扱い、ドキュメントはオブジェク…

JavaScript入門

Webページが表示されるまでの流れ defer属性 async属性 基本事項 プリミティブ型とオブジェクト型 noscript要素 strictモード(非推奨コードの制限) falseとみなされる値 長数の書き方 文字列 テンプレートリテラル 文字列操作でできること 変数宣言の種類 …

JavaScript is 何?

スラスラ読める JavaScript ふりがなプログラミング を読んだので、大事と思ったことをまとめておく。 概要 使いどころ 変数の使い方 条件分岐 厳密等価と厳密不等価 繰り返し文と配列 配列のループ操作と配列操作メソッド 関数とオブジェクト 関数の書き方 …

オブジェクト指向プログラミング(OOP)とは

OOP(Object Oriented Programming)は、ソフトウェアの保守や再利用性を高めるための技術。 保守や再利用のためには、『強い凝集度』や『弱い結合度』であることがよい。 OOPを用いることで、そうした観点に沿う実装をしやすくなる。『無駄を省いて整理する…

ソフトウェア開発者として生きる上での心構え

情熱プログラマーを読んだので、大事だなと思ったことをまとめる。 大雑把には、『ソフトウェア開発で注目に値するキャリアを築くための方法』を学べた。 第1章 市場を選ぶ 1 先んずるか、やられるか 2 需要と供給 3 コーディングはもう武器にならない 4 一…

生産性の高いソフトウェア開発に必要なもの

Peoplewareを読んだので、大事だなと思ったことをまとめておく。 大雑把には、『ソフトウェア開発は人材がすべて。なぜ、人なのか?どうすれば人の生産性を上げられるのか』を学べた。 要約 第I部 人材を活用する 第1章 今日もどこかでトラブルが 第2章 チー…

アジャイル開発って何?

いちばんやさしいアジャイル開発の教本を読んだので、大事だなと思ったことをまとめておく。 大雑把には、『アジャイルの概要』を学べる。いくつか読んだアジャイル本(アジャイルサムライ, SCRUM BOOT CAMP THE BOOK)の中では、一番読みやすい本な気がした…

Rubyで学ぶデザインパターン

Factory メソッド Abstract Factory メソッド ビルダ(Builder) パターン シングルトンパターン アダプタ コンポジットパターン デコレータ プロキシ コマンド インタプリタ イテレータ オブザーバ ストラテジパターン テンプレートメソッド 参考 Factory …

Ruby on Rails:テスト

モデルのテストを書く 関連付けを行っている場合のフィクスチャ Railsのテストランナー システムテスト ちょっと書いてみた assert_selector を完全一致で使う 参考 モデルのテストを書く テストを書くのは自分自身で def したメソッドがあるモデル。理由と…

テスト駆動開発の基本

テスト駆動開発(Test Driven Development:TDD)とは TDDのゴール TDDが指す『テスト』の意味 TDDの目的 TDDの基本サイクル TDDのスキル 参考 テスト駆動開発(Test Driven Development:TDD)とは テストファーストによって開発を進める開発手法。 TDDのゴ…

テスト技法

ソフトウェアテストの概要 ソフトウェアテストの目的 ソフトウェアテストの種類 ホワイトボックステスト ブラックボックステスト 同値分割 境界値分割 デシジョンテーブル 参考 ソフトウェアテストの概要 ソフトウェアテストの目的 ソフトウェアテストの目的…

Ruby on Rails:save と save! メソッドの違い

save と save! は、インスタンスを生成した後に使う。どちらもデータのバリデーション(データベースに保存する前に、データ自体の妥当性を検証する仕組み)と、データベースへの保存を行うメソッド。 def create @report = current_user.reports.new(report_p…

Ruby on Rails:ポリモーフィック関連付け

ポリモーフィック関連づけ ポリモーフィックなモデルを生成する 参考 下記のようなモデルを実装するとする。 上記は、bookモデルとreportモデルはそれぞれcommentモデルと関連があり(本と報告書に対してコメントする機能)、commentは共通モデルで対応する…