この記事ではJSONの基礎と、RubyでJSONファイルを扱う方法を紹介します。 1. JSONの基礎 1-1. JSON(JavaScript Object Notation)とは データ記述言語の1つ プログラミング言語を問わず利用することができる(JavaScript, Java, PHP, Ruby, Python など) 名称と構文はJavaScriptにおけるオブジェクトの表記法に由来する MIEMタイプはapplication/json 拡張子はjson 文字コードはUTF-8でエンコードすることが必須 ウェブアプリケーションでデータを転送する場合によく使われる 1-2. JSONの表記方法 JSONのデータ型 JSONは以下のデータ型で構成されます。 文字列(string) 数値(number) 真偽値(boolean) ヌル値(null) オブジェクト(object) 配列(array) 1. 文字列(string) {"name":"John"} ダブルクォーテーションで囲んだ文字列を指定(シングルクォーテーションは使えない) バックスラッシュでエスケープしたUnicode文字で構成される 2. 数値(number) { "number_1" : 210, "number_2" : 215, "number_3" : 21.05, "number_4" : 10.05 } 10進法表記のみ(8進、16進法表記は使えない) 浮動小数点数も使用できる 3. 真偽値(boolean) { "active_flag": true, "delete_flag": false } true とfalseはすべて小文字で指定 4. ヌル値(null) {"middlename":null} nullはすべて小文字で指定 5. オブジェクト(object) { "employee":{ "name":"John", "age":30, "city":"New York" } } キーとして使うデータ型は文字列に限る JavaScriptにおける連想配列、Rubyにおけるハッシュ 6. 配列(array) [ { "name":"John", "age":30 }, { "name":"Carol", "age":21 } ] 配列要素には、文字列、数値、真偽値、ヌル値、オブジェクト、配列すべてを使用できる 2. RubyでJSONファイルを扱う方法 2-1. JSONファイルを読み込んでRubyオブジェクトに変換する File.open JSON.#load array.json ...

1. バージョン情報 Ruby：3.1.0 robocop：1.32.0 2. 経緯 以下のような、JSONファイルを読み込むコードを書いていた。 require 'json' file_path = "test.json" p File.open(file_path) { |f| JSON.load(f) } #=> ファイルの内容 これをrubocopでチェックすると以下の警告文が表示された。 Security/JSONLoad: Prefer JSON.parse over JSON.load. JSON.load()ではなくJSON.parse()を使えと言っている。 以下のようにJSON.parse()を使うように修正したところエラーが発生した。 require 'json' file_path = "test.json" p File.open(file_path) { |f| JSON.parse(f) } #=> no implicit conversion of File into String (TypeError) 3. エラー対処法 JSON.parse()は引数に文字列を指定する必要があり、引数にファイルは指定できない。 なので、先ほどのコードを以下のように修正すると上手くいく。 require 'json' file_path = "test.json" p File.open(file_path) { |f| JSON.parse(f.read) } #=> ファイルの内容 Fileクラス IO#read 【参考】 RubyDoc.info: Class: RuboCop::Cop::Security::JSONLoad – Documentation for rubocop (0.46.0) – RubyDoc.info ruby - No implicit conversion of file into string - Stack Overflow

この記事ではRESTの考え方を理解するために、TwitterのURLをRESTの設計原則に従って再設計します。 1. 対象の機能 今回はTwitterの以下の機能を再設計の対象とします。 ユーザを表示する ツイートする ツイートに返信する 引用ツイートをする リツイートする フォローする フォロー一覧を表示する フォロワー一覧を表示する リストを作成する リストにユーザを追加する リストからユーザを削除する リスト一覧を表示する リストを表示する 2. URL設計 Method Path Description GET users/{user_id} 特定のユーザを表示 POST tweets ツイートを作成する(返信、引用ツイート含む) POST retweets 特定のツイートをリツイートする POST followings 特定のユーザをフォローする GET followings ログイン中のユーザのフォロー一覧を表示 GET followers ログイン中のユーザのフォロワー一覧を表示 GET users/{user_id}/followings 特定のユーザのフォロー一覧を表示 GET users/{user_id}/followers 特定のユーザのフォロワー一覧を表示 POST lists リストを作成する POST lists/{list_id}/members 特定のリストに特定のユーザを追加する DELETE lists/{list_id}/members/{user_id} 特定のリストから特定のユーザを削除する GET lists ログイン中のユーザのリスト一覧を表示 GET users/{user_id}/lists 特定のユーザのリスト一覧を表示 GET lists/{list_id} 特定のリストを表示 3. 解説 3-1. ツイートする(返信・引用ツイート含む) Method Path Description POST tweets ツイートを作成する(返信、引用ツイート含む) ツイートをするのは常にログインユーザのため、URIにログインユーザのidは含めない 返信の場合、リクエストのボディに返信先のツイートの情報を含める 引用ツイートの場合、リクエストのボディに引用するツイートのidを含める 3-2. リツイートする Method Path Description POST retweets 特定のツイートをリツイートする リツイートをするのは常にログインユーザのため、URIにログインユーザのidは含めない リクエストのボディにリツイートするツイートのidを含める 3-3. フォローする Method Path Description POST followings 特定のユーザをフォローする フォローを実行するのは常にログインユーザのため、URIにログインユーザのidは含めない リクエストのボディにフォローするユーザのidを含める 3-4. リストにユーザを追加する Method Path Description POST lists/{list_id}/members 特定のリストに特定のユーザを追加する リストへのユーザ追加を実行するのは常にログインユーザのため、URIにログインユーザのidは含めない リクエストのボディにリストに追加するユーザのidを含める 3-5. リストを表示する Method Path Description GET lists/{list_id} 特定のリストを表示 リストを一意に特定できれば、そこからリストを所有するユーザはわかるため、users/{user_id}/lists/{list_id}とする必要はない 【参考】 ...

1. はじめに 本稿では、git rebase -iを使った特定のコミットの修正方法を解説します。 直前のコミットだけではなく、2つ以上前のコミットを修正できる コミットメッセージの修正だけではなく、ファイルの編集内容の修正も可能 チーム開発等で既にpushしているコミットに対しての使用には注意が必要です。 2. 手順 以下の手順で進めていきます。 コミットログの確認 git rebase -i HEAD~n 修正したいコミットの「pick」を「edit」に変更 ファイルの修正 git add git commit –amend git rebase –continue 2-1. コミットログの確認 以下のコマンドを実行して、修正したいコミットを確認します。 git log --oneline a00d4fa (HEAD -> main) file2.txtを修正 091fed5 file2.txtを作成 d4a404b file1.txtを修正 # これを修正したい 6f86174 file1.txtを作成 今回は以下のコミットを修正したいと思います。 d4a404b file1.txtを修正 2-2. git rebase -i HEAD~n git rebase -i HEAD~n コマンドで、デフォルトのテキストエディタに直近のn個のコミットを表示できます。 今回修正したいコミットはHEADを含めて3つ目のコミットなので、以下のコマンドを実行します。 git rebase -i HEAD~3 すると、テキストエディタで以下のように表示されます。 # コミット一覧のファイル pick d4a404b file1.txtを修正 pick 091fed5 file2.txtを作成 pick a00d4fa file2.txtを修正 # Rebase 6f86174..a00d4fa onto 6f86174 (3 commands) # # Commands: # p, pick <commit> = use commit # r, reword <commit> = use commit, but edit the commit message # e, edit <commit> = use commit, but stop for amending # s, squash <commit> = use commit, but meld into previous commit # f, fixup [-C | -c] <commit> = like "squash" but keep only the previous # commit's log message, unless -C is used, in which case # keep only this commit's message; -c is same as -C but # opens the editor # x, exec <command> = run command (the rest of the line) using shell # b, break = stop here (continue rebase later with 'git rebase --continue') # d, drop <commit> = remove commit # l, label <label> = label current HEAD with a name # t, reset <label> = reset HEAD to a label # m, merge [-C <commit> | -c <commit>] <label> [# <oneline>] # . create a merge commit using the original merge commit's # . message (or the oneline, if no original merge commit was # . specified); use -c <commit> to reword the commit message # # These lines can be re-ordered; they are executed from top to bottom. # # If you remove a line here THAT COMMIT WILL BE LOST. # # However, if you remove everything, the rebase will be aborted. # 2-3. 修正したいコミットの「pick」を「edit」に変更 d4a404bのコミットをpickからeditに変更します。 ...

USキーボードのMacBookを買ったけど、日本語入力への変換がめんどくさい！ 「英字⇄かな」切替をもっと簡単にする方法はないかな？ 本記事の内容 USキーボードのMacBookで「英字⇄かな」切替を簡単に行う方法 今回は、USキーボードのMacBookで「英字⇄かな」切替を簡単に行う方法を紹介します。 MacBookは見た目がカッコいいUSキーボードを選びました。 徐々にUSキーボードに慣れてきた中で、唯一解決しない問題が「英字⇄かな」切替がめんどくさいことです。 何故なら、USキーボードには「全角/半角」切替ボタンがありません。 さらにMacBookのデフォルトでは「英字⇄かな」切替のショートカットキーが「Control + スペースキー」 に割り当てられています。 そしてこの「Control + スペースキー」がめちゃくちゃ打ちづらい！ そこで今回は、そんな問題を解決するオススメの方法を2つ紹介します。 方法1.「Command + スペースキー」で切り替える こちらの方法は、やることはシンプルで、デフォルトのショートカットキーである「Control + スペースキー」を「Command + スペースキー」に変えるだけです。 「Command」と「スペースキー」が隣り合っているので、とても簡単に「英字⇄かな」切替ができます。 手順1.「システム環境設定」から「キーボード」を選択 まず最初にDockの「システム環境設定」を開き、「キーボード」を選択します。 手順2.「ショートカット」タブの「入力ソース」を選択 次に「ショートカット」タブをクリックし、左側のリストから「入力ソース」を選択します。 手順3.「前の入力ソースを選択」をクリックしてから新しいキーを設定 次に、「前の入力ソースを選択」をクリックし、「Command + スペースキー」を直接入力します。 黄色い三角マークが出た場合 下の画像のように、「Command + スペースキー」設定後に黄色い三角マークが出た場合はもう少し設定をする必要があります。 この黄色い三角マークは、先ほど設定した「Command + スペースキー」が既に別のアクション(デフォルトでは「Spotlight検索」)のショートカットキーとして割り当てられていることを意味します。 なので既に「Command + スペースキー」が割り当てられていた「Spotlight検索」のショートカットキーを変更することでこの問題は解決します。 手順3と同じように、今度は「Spotlight」→「Spotlight検索を表示」を選択して、「Control + スペースキー」を入力します。 「Control + スペースキー」がちゃんと設定されると以下のように黄色い三角マークは消えます。 以上で設定完了です！ 方法2.「caps lock」で切り替える 2つ目方法では、「caps lock」ボタンで「英字⇄かな」切り替えを行えるようにします。 手順1.「システム環境設定」から「キーボード」を選択 まず最初にDockの「システム環境設定」を開き、「キーボード」を選択します。 手順2.「入力ソース」タブを選択し、「Caps Lockキーで英字入力モードと切り替える」をチェック 次に「入力ソース」タブを選択し、「Caps Lockキーで英字入力モードと切り替える」にチェックを入れます。 ...

本記事の内容 IT業界未経験から合格までに必要な勉強時間 勉強のスケジュール 勉強内容 オススメの参考書 今回はIT業界未経験から独学で基本情報技術者試験に合格するための方法を解説します。 この記事を書いている僕は、平成30年度秋期 基本情報技術者試験に合格しました。 これから基本情報技術者試験の勉強を始める方は、ぜひこの記事を読んでみてください！ 1. IT業界未経験でも3ヶ月の勉強期間で合格できる IT業界未経験の方でも、3ヶ月で180時間の勉強で合格できます。 1-1. 当時の自分のレベル 社会人1年目の10月に受験しました。 学生時代にパソコンに触れる機会は、Wordでレポートを提出するときくらいでした。 試験勉強を始める前にやっていたことといえば、社内研修で1ヶ月間C言語を教わったことくらいです。 基本情報技術者試験に合格すれば会社から資格取得手当が貰えたし、何かしらの勉強はしたかったので、存在を知った瞬間から受験する気はありました。 ただ流石にまだ合格は無理だろうと思って、1年目の10月は受験しないで次の2年目の4月に受験しようと思っていました。 7月くらいに現場の先輩から「基本情報受けるの？」と聞かれ、まだ無理だと思うから今回は受けないと答えると、「いやいや今からでも全然行けるっしょ」と受験する気がないことに結構驚かれました。 そしたらなんか僕も「え、マジっすか、いけんすか。」ってなって、「いけんのかぁ、じゃ受けてみようかなぁ」って感じで受けたら、いけました。 このような感じで僕のような素人でも3ヶ月の勉強で合格できたので、受験しようか迷ってる方にはぜひ挑戦してほしいです！ 1-2. 合格までに必要な勉強時間 IT業界未経験で知識0からのスタートでも、180時間あれば十分に合格レベルまで持っていけます。 期間は余裕を持って3ヶ月くらいあるといいです。 毎日2時間×90日=180時間が理想ですが、仕事がある人は平日1時間、土日に5時間ずつで週15時間×12週間=180時間くらいのペースでもいいです。 180時間の配分はざっくり以下を目指しましょう。 午前対策 80時間 午後対策 100時間 2. 勉強のスケジュール ここからは勉強のスケジュールを紹介していきます。 僕の場合は以下のようなスケジュールで勉強しました。 入社した4月に会社から基本情報技術者試験の参考書が支給されていたので、図に示す期間の前から参考書を読んだりしていました。 8/1に午前試験の過去問を1回解いてみたところから本格的な勉強スタートです。 そこから9/16までは午前対策のみを行いました。 9/16から午後対策を始めたので、9/16~9/28までの期間は午前、午後どちらの勉強もしている状態です。 9/28で完全に午前対策をやめて、午後対策のみに集中しました。 本番1週間前の10/13~10/14の二日間で、本番同様に午前・午後を通しで2回分解きました。 ラスト1週間は最後の調整で、午後試験を中心に今までやったことを確認したり、気になるところの過去問を解き直したりしていました。 3. 勉強内容 ここからは実際に行った勉強内容を紹介していきます。 3-1. 午前試験 以下の流れで午前試験の勉強を行いました。 試しに過去問を1回分解いてみる 参考書1周 過去問演習と参考書の復習 過去問1~50→3回分 過去問51~80→19回分 参考書2~3周目 過去問1~80→3回分 まずは点数を気にせずにとりあえず過去問を1回解いてみて午前試験がどのようなものかを確認しました。 そのあとで参考書を簡単に1周読み、あとはひたすら過去問演習をしました。 参考書の2~3周目もがっつり読みこむのではなく、過去問演習をしていく中でわからない用語に遭遇したら、その都度参考書で確認していくという方法で読み進めていきました。 過去問51〜80をかなり解いていますが、これは51〜80(マネジメント/ストラテジ系)は計算用紙がいらず、1問にかかる時間が短いので仕事中暇なときに基本情報技術者試験ドットコムでずっと解いていたためです。 僕の場合、午前対策の期間が8/1〜9/28の59日間とずいぶん長いですが、最初はのんびり勉強していたということもあるので、この内容なら40日間×2時間=80時間くらいで終わると思います。 知識0からのスタートだと知らない単語だらけなので午前対策の期間が長くなりがちですが、午前試験は暗記ゲーなので、そこまで一生懸命理解しようとしなくても大丈夫です。 とりあえず過去問を解きまくって、ある程度いけそうだと思ったら午前対策はやめて、午後対策に移りましょう。 3-2. 午後試験 以下の流れで午後試験の勉強を行いました。 ...

JavaScript初心者でも簡単に作れるゲームが知りたい！ ゲームの作り方の詳しい解説やソースコードも見たい！ 本記事の内容 ゲームの完成形とソースコード ゲームの作り方の解説 この記事は、JavaScriptの基礎文法を一通り学んで「実際に何かを作ってみたい！」 という方に向けたものになっています。 ライブラリなどは一切使わず、JavaScriptの基礎文法だけで作れるゲームを紹介します。 今回作るゲームはJavaScript初心者の方でも30分で作ることができます。 実際に手を動かして、JavaScriptの理解を深めていきましょう！ 1. 数字当てゲーム 簡単な「数字当てゲーム」を作っていきます。 1-1. 完成形とソースコード 以下が今回作るゲームの完成形です。 1~20までの数字を予想してスコアを競うゲームです。 表示されるヒントを頼りに正解の数字を予想していきます。 より少ない回数で数字を当てると高得点になります。 デモサイトで実際の動きを確認できます。 ソースコードはこちらから確認できます。 1-2. このゲームを作って学べること 今回の「数字当てゲーム」を作って学べることは以下の2つです。 JavaScriptのDOM操作 コードのリファクタリング 1-3. 用意するもの 以下の3つのファイルを用意しましょう。 index.html style.css script.js これらのファイルはこちらにあります。 2. まずはゲームの仕様を理解しよう コードを書く前に、まずはゲームの仕様を理解しましょう。 2-1. 仕様の確認 今回の「数字当てゲーム」は大きく3つの機能に分けることができます。 メイン機能 ユーザーが数字を入力してチェックボタンをクリックすると処理を実行 入力された値によって異なるメッセージを表示 入力された数字が不正解の場合、スコアを1減らしてゲーム続行 入力された数字が正解の場合、正解の数字を表示してゲーム終了 リセット機能 リセットボタンをクリックしてゲームを再スタート ハイスコア機能 ハイスコアを表示する 2-2. 必要な要素の確認 必要な要素は以下の7つです。 正解の数字(secretNumber) 入力された数字(inputNumber) スコア(score) メッセージ(message) チェックボタン(check) リセットボタン(reset) ハイスコア(highscore) 1. 正解の数字(secretNumber) 変数secretNumberに1~20までのランダムな数字を設定します。 正解した時にこの数字を表示させます。 2. 入力された数字(inputNumber) 変数inputNumberにユーザーにより入力された数字を代入します。 この値をもとに条件分岐を行います。 ...

この記事では、Visual Studio Codeのオススメの拡張機能を紹介していきます。(随時更新中) 1. 一般 Code Spell Checker Japanese Language Pack for Visual Studio Code Material Icon Theme Project Manager 2. HTML HTML CSS Support HTMLHint こちらのHTMLHintに移行推奨 Live Server Auto Complete Tag VSCodeの基本設定だけで代替可能(詳細) open in browser Live Serverがあればほぼいらない、<script type="module">で書いたJSファイルを読み込んでるhtmlファイルはfile:// プロトコル経由で開いても動作しない 3. Ruby Ruby LSP VSCode rdbg Ruby Debugger 3-1. Rails Slim slim使う場合はあったほうがいい 4. JavaScript ESLint Prettier JavaScript (ES6) code snippets IntelliCode Formatting Toggle 4-1. Vue.js Volar Vue3からはVolar、Vue2ならVetur 5. PostgreSQL PostgreSQL 6. Git Git History GitLens 7. Docker Docker 【参考】 ...

この記事ではMacユーザー向けに、Google Chromeのキーボードショートカットの中から特に使用頻度の高いものを紹介していきます。 1. タブとウィンドウのショートカット 操作 ショートカット 新しいウィンドウを開く ⌘ + n 新しいウィンドウをシークレットモードで開く ⌘ + shift + n 新しいタブを開いてそのタブに移動する ⌘ + t 閉じたタブを閉じた順序で再び開く ⌘ + shift + t タブの移動 ⌘ + option + ←または⌘ + option + → 現在のタブのページを戻る・進む ⌘ + ←または⌘ + → 現在のタブを閉じる ⌘ + w 2. Google Chrome 機能のショートカット 操作 ショートカット ページ内の文字列検索 ⌘ + f 文字列検索で一致する次の部分に移動する ⌘ + g 文字列検索で一致する前の部分に移動する ⌘ + shift + g デベロッパーツールを開く ⌘ + option + i 3. アドレスバーのショートカット 操作 ショートカット サイト名に www. と .com を追加して現在のタブで開く サイト名を入力 + control + enter アドレスバーに移動する ⌘ + l アドレスバーから予測候補を削除する shift + fn + delete 4. ウェブページのショートカット 操作 ショートカット 現在のページを再読み込みする ⌘ + r キャッシュを無視して現在のページを再読み込みする ⌘ + shift + r 現在のページの HTML ソースコードを表示する ⌘ + option + u 全画面表示モードをオンまたはオフにする ⌘ + control + f ページを 1 画面ずつ下にスクロールする space ページを 1 画面ずつ上にスクロールする shift + space 【参考】 ...

この記事ではTwitterのサイトのER図の書き方を解説します。 論理設計の対象はTwitterの一部の機能に限定し、ER図はIE記法で、Draw.ioで作成しました。 1. 対象の機能 ユーザを表示する ツイートする ツイートに返信する リツイートする 引用ツイートする フォローする フォロー一覧を表示する フォロワー一覧を表示する リストにユーザーを追加する リスト一覧を表示する リストをフォローする 2. ER図 3. テーブル定義 3-1. usersテーブル ユーザーの情報を管理するテーブル username @から始まるアカウント固有の識別名(ユーザー名) name 表示名(名前) bio 自己紹介 location 場所 website ウェブサイト date_of_birth 生年月日 profile_image プロフィール画像 header_image ヘッダー画像 3-2. tweetsテーブル ユーザーのツイートを管理するテーブル user_id ツイートしたユーザーのid content ツイート文 image ツイート画像 reply_to 返信の場合、返信先のツイートのidが入る 通常のツイートの場合はnull(または0)が入る quote_tweet_id 引用ツイートの場合、引用元のツイートのidが入る 通常ツイートの場合、null(または0)が入る 3-3. retweetsテーブル リツイートしたユーザーとリツイートされたツイートの関連を表すテーブル(誰がどのツイートをリツイートしたかの情報を持つテーブル) user_id リツイートしたユーザーのid tweet_id リツイートされたツイートのid 3-4. followsテーブル フォローしたユーザーとフォローされたユーザーの関連を表すテーブル(誰をフォローして誰にフォローされているかの情報を持つテーブル) follower_id フォローという行為をしたユーザーのid(誰かをフォローしたユーザーのid = 誰かのフォロワーになるユーザーのid) followee_id フォローの対象となるユーザーのid(誰かにフォローされているユーザーのid) 3-5. listsテーブル リストの情報を管理するテーブル ...