本記事では、Ruby on RailsのActiveRecordでhaving句を実行する方法について解説します。 <h2 id="h94d0b3c7a4">having句とは?</h2>HAVING句は、GROUP BY句でグループ化されたレコードに対して、条件を適用するためのSQLの機能です。 例えば、以下のような月ごとの売り上げを表すテーブルを考えてみましょう。 <pre><code>sql
sales
+----+---------+-------+
| id | month | sales |
+----+---------+-------+
| 1 | 202201 | 100 |
| 2 | 202201 | 200 |
| 3 | 202201 | 300 |
| 4 | 202202 | 150 |
| 5 | 202202 | 250 |
| 6 | 202203 | 400 |
+----+---------+-------+</code></pre> このテーブルを、月ごとにグループ化して、売上が合計500以上の月だけを取得するには、以下のようなSQLを記述することができます。 <pre><code>sql
SELECT month, SUM(sales) as total_sales
FROM sales
GROUP BY month
HAVING SUM(sales) &gt;= 500;</code></pre> 上記のSQLでは、まずsalesテーブルをmonthでグループ化して、売上を合計しています。次に、HAVING句で、合計売上が500以上の月だけを取得しています。結果は以下のようになります。 <pre><code>sql
+--------+-------------+
| month | total_sales |
+--------+-------------+
| 202201 | 600 |
| 202203 | 400 |
+--------+-------------+</code></pre> このように、HAVING句は、グループ化されたレコードに対して条件を適用するための非常に有用なSQLの機能です。 <h2 id="h4c2a9a0df5">ActiveRecordでHaving句を使おう</h2>ActiveRecordでは、havingメソッドを使用してHAVING句を表現できます。たとえば、先ほどのSQLクエリをActiveRecordの形式で書くと以下のようになります。<pre><code>ruby
Sales.group(:month).having("SUM(sales) &gt;= ?", 500).select("month, SUM(sales) as total_sales")</code></pre> まずgroupメソッドでグループ化するカラムを指定します。次に、havingメソッドで、「合計売上が500以上の月」を取得する条件を指定します。最後に、selectメソッドで、monthと売上の合計を表示します。 上記の出力結果は以下のようにhashの形で帰ってきます<pre><code>ruby
[{:month=&gt;"202201", :total_sales=&gt;600}, {:month=&gt;"202203", :total_sales=&gt;400}]</code></pre> <h2 id="ha214098e44">まとめ</h2>今回は、ActiveRecordを使用してSQLのHAVING句を使う方法について解説しました。ActiveRecordをうまく使うと、このようにSQLを直接書くことなくデータベースとやりとりできます。安全なアプリケーションを作るために、ぜひ１つのテクニックとして覚えておきましょう。

現役エンジニアが解説！ActiveRecordでHAVING句を使う方法とは？

「プログラミング言語のトレンドを知りたい」 「次に学ぶべきプログラミング言語に迷っている」 そんな方々のために、今回は「2023年に必ず来る！今熱いプログラミング言語」を現役エンジニア目線で解説します！<h2 id="hf5dbdc7265"> 最新の言語トレンド</h2>さて、トレンドの言語について発表する前に、まずは最新のプログラミング言語の「２つのトレンド」について解説します。 <h3 id="hbc5f3ca9c6">「静的型付け言語」</h3> １つ目は「静的型付け言語」です。 プログラミング言語はコンパイル時に「変数の型がわかるかどうか」によって、「静的型付け」と「動的型付け」に分かれます。 静的型付け言語 コンパイル時に変数の型がわかる言語です。 メリットとしては「安全性（バグを起こしにくい）」そして「高速」の２点が挙げられます。 逆にデメリットは厳密が故の「記述量の多さ」「学習難易度の高さ」です（後述しますが、最近トレンドの言語はこの「書きにくさ」をクリアしているものが多いです。） 具体例として、C, Java, Goなどがあります。 動的型付け言語 コンパイル時に変数の型がわからない言語です。 メリットは「記述の自由度」「学習難易度の低さ」 デメリットは「遅さ」「（自由が故の）バグの起こりやすさ」の２点です。 具体例として、Ruby, Pythonなどがあります。 最近のトレンドは堅牢性重視の静的型付け言語になりつつあります。 <h3 id="hba3d003cd4">書きやすさ</h3>実はトレンドとなっている静的型付け言語は以前より格段に書きやすくなっています。 この書きやすさを進めたのは「型推論」の誕生でしょう。 今までの静的型付け言語では、書き手が型を明示的に宣言してあげる必要がありました。 以下にC言語での例をあげます。<pre><code>c
int number = 1 /* 変数の型は明示的に宣言する必要がある */</code></pre> ところが、最近のプログラミング言語では、最初に与えられた値に応じて勝手に型を推測してくれる（つまり明示的に書く必要がない）という機能が出てきています。 Go言語での例を見てみましょう。<pre><code>go
number := 1 /* 変数の型は明示的に宣言しなくても良い*/</code></pre> 型宣言の必要がなく、簡潔にかけているのが分かります。 まとめると、最近のプログラミング言語トレンドは「書きやすい静的型付け言語」であると言えるでしょう。 <h2 id="h8db79f87a3">現役エンジニアが選ぶ熱いプログラミング言語ランキング</h2> ではこのトレンドを踏まえて、2023年今最も熱いプログラミング言語を紹介していきます。 <h3 id="h2855052ef1">第3位: Rust</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/854d9fda7e2941f4927bf6feb2e6ab5e/images%20(3).png?w=358&amp;h=141" alt="Rust"> 第3位はRustです。 「プログラマーに最も愛されている言語」として知られており、その理由は「コンパイルが通ればとにかく大丈夫」という厳密さへの信頼と「動作の高速さ」にあります。 また最近ではTurbopackなど高速さが求められるツールにRustが使われる事例も増えてきています。 ただしその厳密さ故に学習難易度はやや高めです。初心者の方は是非別の言語を学んだ上で、2番目以降の言語として勉強することをお勧めします。 <h3 id="h6f10929461">第2位: Go</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/4d786d23c08241d0bed2326d89c68d9d/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(45).png" alt=""> 第2位はGoです。 （個人的な意見として）書き心地はCに似ていますが、記法はかなり単純化されており「だれが書いても汚いコードにならない」と言われるほど統一的な書き方のできる言語です。 またCyberAgentなど大手Web企業が積極的に取り入れている言語でもあります。 「サーバーサイドエンジニアとして技術力の高い企業に入りたい」方は勉強してみると良いかもしれません。 <h3 id="hac7be8a74f">第1位: TypeScript</h3> <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/bb9076376b794430b1961b16172f8b0e/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(46).png" alt=""> 第1位はTypeScriptです。 Web言語の王様「JavaScript」に型定義の概念を加えたものです。 JavaScriptの延長であるが故に、学習難易度も相対的には低いのが特徴です。 特に最近の人気の伸びは凄まじく、Githubが発表している「言語利用率ランキング」でも異様なスピードで伸びてきているのがわかります。 <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/4ce433daa11049aeb2156932db4600c4/image.png" alt=""> また現在のWeb業界は「TypeScriptに最適化されているものが生き残る」傾向があり、まさに「業界を牛耳っている言語」と言えます。 フロントエンドの業界ではTypeScriptの習得は必須要件になりつつあるので、就職を考えている方は優先的に勉強しましょう！ <h2 id="ha214098e44">まとめ</h2>いかがでしたか？ プログラマーにとって、新しいプログラミング言語の学習は「新しい概念に触れる」ためにも非常に重要です。 次のレベルにステップアップするために是非習得しましょう🔥

[2023年版] 今熱いプログラミング言語を現役エンジニアが解説！

<h2 id="heab633e125">エラー解決の方法</h2><h3 id="h2b629faf27"> エラーを見る習慣をつける</h3> 初心者あるあるですが、「そもそもエラーを見ていない」という人がよくいます。 プログラマーはどんなに強い人でもバグの原因を探るときに必ずエラーを見ます。これは「エラーの中には、バグの原因がなにか」が細かに書いているからです。 これを見ないとそもそも何も始まりません。 冷たい言い方ですが「とりあえずエラーみよう！」これだけは最低限徹底しましょう。 ※ たまに全くエラーログを見ずに原因を探り当てるチート級の人がいますが、これは真似してはいけません。 <h3 id="hadb20d2d67">訳してみる</h3>さて、では実際にエラーログを見てみましょう。 例えば、以下は、Rubyという言語で意図的にエラーを出してみたものです。<pre><code>ruby
[3] pry(main)&gt; "aaa".huga
NoMethodError: undefined method `huga' for "aaa":String
from (pry):3:in `__pry__'</code></pre> 意味がわからないと思った方、グッと堪えて３行目をそのまま訳してみましょう <code>NoMethodError</code> =&gt; メソッドがないエラー <code>undefined method </code>=&gt; 定義されていないメソッド <code>`huga' for "aaa":String </code>=&gt; 文字列aaaのためのhuga どうでしょうか？なんとなく「aaaという文字列に対して、hugaというメソッドは定義されてなくて使えないんだ」というのはわかったと思います。 このように、ほとんどのプログラミング言語ではエラーは英語で出てくるので、読めば意味がわかるものも多いです（英語が読めない　と言う方はGoogle翻訳に突っ込んでみましょう） <h3 id="hf6de09f5d8">エラーは大体決まっている</h3>読んでもよくわからないと言うエラーももちろんあります。 そう言う時はとりあえずググってみましょう。 世の中にはあなたより先にエラーに引っかかり、解決方法を見つけ、後に続く人のための記事を書いてくれている人がたくさんいます。 この時のポイントは「固有名詞を抜いて検索する」ことです。 先ほどのエラーを固有名詞を抜いて検索してみたものがこちらです。 <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/2008adad97f045ffbddf1a8d22ed6c89/image.png" alt=""> たくさん引っかかりますね。記事を書いてくれた人に感謝です。 <h3 id="hc720ff52dc">「printデバッグ」と言う方法</h3>実務でエンジニアがよくやる方法にprint デバッグと呼ばれる方法があります。 これは、複数行あるプログラムに対してどの行がエラーを出しているかわからない時に「とりあえず全ての行にprint文をしこむ」方法です。 例を見てみましょう。<pre><code>ruby
a = "aa"
print("aa\n")
b = "bb"
print("bb\n")
c = "cc"
print("cc\n")
a.hoge
print("dd\n")</code></pre> このように、とにかく全ての行の間にprint文を仕込んでいきます。 [実行結果]<pre><code>aa
bb
cc
test.rb:7:in `&lt;main&gt;': undefined method `hoge' for "aa":String (NoMethodError)

a.hoge</code></pre> ここで、"dd"のみが出力されておらず、エラー原因はddの前の行だと言うことがわかります。 意外と使うテクニックなので是非覚えておきましょう。 <h3 id="h4e1d791f8a">質問サイト</h3>質問サイトを使う方法もあります。以下に主な質問サイトを挙げます。 Teratail <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/2cde6e2c6a604e6283f948de6a2db516/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(43).png" alt=""> レバレジーズが運営する、エンジニア用質問サイトとしてはかなり有名なサイトです。 https://teratail.com/ Qiita <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/cf7e2b2e97394e67b9359be59261e105/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(44).png" alt=""> 記事投稿サイトとして有名なQiitaですが、質問機能もついています。 是非活用してみましょう! https://qiita.com/question-trend 質問をする際には、以下を必ず書くようにしましょう！ (1) 起こったエラーの内容や状況 (2) エラーに対して自分が調べたことや、対処したこと つまり、ここまでの流れを全て行った上で、最後に質問サイトを使うと良いでしょう。 <h3 id="h0a23e422f3">新たな選択肢「ChatGPT」</h3>2023年に入って、エラーの解決方法に ChatGPTと言う新たな選択肢が生まれました。 では先ほどのエラーを打ち込んでみましょう。 <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/f62fd87bd92e463e803d4ca165851017/image.png" alt=""> <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/0628b1910f9c44e997e3f42fa471339d/image.png" alt=""> なんと、エラーの解釈だけでなく、解決方法も示してくれます🔥 「エラーはとりあえずChatGPTに聞け」という時代が来るのかもしれませんね。 ※ ChatGPTに業務のコードを打ち込むのは「絶対に」やめましょう 会社の資産であるコードが流出することにつながる可能性があるからです。 <h2 id="ha214098e44">まとめ</h2>いかがでしたでしょうか？ エンジニアにとって、「エラーを自力で解決できるか」はかなり重要な問題です。 ぜひエラー文を読めるようになって、自己解決能力をあげましょう🔥

初心者は絶対に知っておくべき！プログラミングのエラー解決の仕方

「プログラマーを目指しているが英語が得意じゃない」 「プログラマーになるのに英語の勉強をする必要はある？」 本記事ではこういった「プログラマーに英語は必要か」議論に、現役プログラマー目線で回答します。 <h2 id="h955983a1e8">プログラマーに英語が必須ではない理由</h2>結論、僕の意見としては「プログラマーになるのに、英語スキルは必須ではありません」 その理由を2つに分けて解説します。 <h3 id="h3a1d6bfd7c">日本語でのコミニュケーションをとる職場がほとんどだから</h3>ほとんどの日系IT企業において、コミニュケーションは日本語で取られます。 プログラミング業務をする中で、プログラムの変更差分について記述するcommitや、プログラムの正しさを評価してもらうreview、さらにはプログラムの中で補足説明を行うコメントも日本語でOKの企業がほとんどです。 私自身英語はほとんど話せませんが、プログラマー業務をする中で、不便に感じたことはほとんどありません。 <h3 id="h96c8e6ef1e">正しい英語じゃなくてもプログラムは動作するから</h3>プログラミング言語は、正しい英語ではなくても動作します。 例えば以下の例を見てみましょう。<pre><code>ruby 
yeaar = Time.curret.year #yearの綴りが間違っている
p year</code></pre> 「今何年か」を出力するプログラムですが、yearの綴りが間違っています。 ですが、このプログラムは正常に動作します。 逆に動作しない例は以下です。<pre><code>ruby
if record is null
 p 'record is null'
end</code></pre> これは英文法的には合っていますが、Rubyのプログラミング文法には沿っていないため、実行するとエラーが出ます。 このようにプログラミング言語は「英単語を使っているだけの別言語」であり、英語の能力とは関係がないと言うのが個人的な見解です。 <h2 id="hd9ba45798e">英語ができるプログラマーが有利になるケース</h2>ここまで、プログラマー にとって英語は必須ではない理由を説明しました。 ですが、実はプログラミングをする中で「英語が使えると有利になる」ケースがいくつか存在します。 以下で３点に分けて説明します。 <h3 id="h08c5ae6737">より多くの情報に触れられる</h3>プログラミング関連のドキュメントは英語でまとめられていることがほとんどです。 特にプログラミングの最新情報が公式から公開される場合、まずは英語のドキュメントで発表があります。 またStackOverflowやGithubのissueなど既存の問題について英語で語られているサイトも多くあります。 英語を学ぶことで、そういった「新しい情報に」「たくさん」触れられるようになるでしょう。 <h3 id="h2577aab19e">読みやすいコードがかける</h3>基本的にはプログラミングでの「名付け」は英語で記述します。 ここで、英単語を正しく使っていると、読みやすいコードを書くことができます。 例を見てみましょう。以下は全く同じように動作する２つのプログラムです。 [例1]<pre><code>ruby
year = Time.current.year
month = Time.current.month
day =Time.current.day 

print "#{year}/#{month}/#{day}"</code></pre><h3 id="hcf83e1357e"> </h3>[例2]<pre><code>ruby
a = Time.current.year
b = Time.current.month
c = Time.current.day

print "#{a}/#{b}/#{c}"</code></pre> いかがでしょうか 例2の方が適切に命名がされており、圧倒的に読みやすいのがわかるかと思います。 このように読みやすいコードをかけるエンジニアは市場価値が高く、重宝されやすいです。（可読性に関しては意識の問題もありますが、）英語を学ぶことで、こういったコードをスムーズに書けるようになるでしょう。 <h3 id="h23a79cb7b3">一部外資系の企業では英語が必須の場合がある</h3>Googleなど、一部の外資系の企業では業務での公用語が英語だったり、そもそもエントリーシートが英語での記述を指定されていることもあります。 （筆者はGoogleに応募しようとして、エントリーシートを英語で出さなけばならないことが壁になり諦めた経験があります）。 英語を身につけておけば、こういった企業に応募するチャンスができ、同じスキルでも高い給料をもらうことができる可能性があります。 ※ もちろん、こういった企業では「プログラミングにおいても高いスキルを持っている」前提であることが多いので、プログラミングスキル自体も磨いておきましょう。 <h2 id="ha214098e44">まとめ</h2><ul><li>プログラマーに英語は必須ではない</li><li>英語ができると有利になる場面もある</li></ul>プログラミングスキルを身につけつつ、空いた時間で英語を勉強してみるのも良いかもしれません。

プログラマーに英語は必要？現役エンジニア目線から解説

「Progateを１周し終わった！もっとプログラミングを極めたい」 「実際に業務で使える知識を身につけたい」 そんな方のために、プログラミング中級者向けの知識を伝授！ 今回はJavaScriptのpadStartについて解説していきます <h2 id="he893cfaa5d">padStartとは</h2>padStartとは「文字列が指定した長さになるように桁埋めをする」関数です。<pre><code>javascript
文字列.padStart(桁数, 埋める文字)</code></pre> 具体例を見てみましょう。文字列<code>hoge</code>を6桁になるように*(アスタリスク)でうめるコードは以下です 。<pre><code>javascript
'hoge'.padStart(6, '*')
// **hoge</code></pre><h2 id="hcf83e1357e"> </h2>このように指定した桁数になるように、文字列の前に指定文字を補完してくれます。 また似たような関数に、padEndがあります。 <pre><code>javascript
文字列.padStart(桁数, 埋める文字)</code></pre> こちらは、指定した桁数になるように、文字列の後に指定文字を補完してくれます。 <pre><code>javascript
'hoge'.padStart(6, '*')
// hoge**</code></pre> <h2 id="h756ff11793">具体的な使用用途</h2>ではここからは具体的な使用用途を考えていきましょう！ <h3 id="h817dc9da06">[使用例1] 電話番号の一部を隠す</h3>個人情報保護の観点から、電話番号の一部を*(アスタリスク)で隠す実装をしてみましょう。<pre><code>javascript
const tel = '08012345678'
const tel_partial = tel.slice(-4) // 電話番号の下4桁を取得
console.log(tel_partial.padStart(11, '*'))

// *******5678</code></pre> 2行目で電話番号の下4桁を取り出した上で、残りの7桁をpadStartを使ってアスタリスクで埋めます。 ※ 安全性を考えると、この処理はサーバーサイド でやるとより理想的です。 <h3 id="h264c8d400b">[使用例2] 時刻の桁数を揃える</h3>時刻を、常に二桁（つまり、10:15 や 08:01 のような表現）で表すのにもpadStartは有効です。<pre><code>const hour = 10
const minutes = 8

const time = `${hour.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')}`

console.log(time)
// 10:08</code></pre> ここで、hourもminutesも<code>Number</code>なので、<code>toString</code>で<code>String</code>に直してから使うことに注意しましょう！ <h2 id="ha214098e44">まとめ</h2>今回はJavaScriptのpadStart関数について解説しました! 上手く使いこなして、JavaScriptをさらに極めましょう！

【JavaScript】中級者なら押さえておきたい！桁を揃えるpadStart関数の使い方

「Ruby on Railsで仕事を得るために実務に使える知識が欲しい」 「Progateで学んだ知識からさらにもう一歩ステップアップしたい」 本記事では中級者になるために必ず押さえておきたい「Transaction (トランザクション)」について解説します。 <h2 id="h8cb5126e30">Transactionとは</h2> Transactionとは「ある範囲を１セットの処理とし, どこかで処理が失敗したら全ての処理を巻き戻す」機能です。 具体的な書き方を見てみましょう。<pre><code>ruby
ActiveRecord::Base.transaction do
 # 処理の内容
end</code></pre><h2 id="hcf83e1357e"> </h2><code>ActiveRecord::Base.transaction do</code>と<code>end</code>の間に１セットにしたい処理を書いていきます。 これだけだと「どういう場面でつかうの...?」という疑問が出てきますね。 次から詳しく解説していきます。 <h2 id="hdee5d0ce57">具体的な使い道</h2><h3 id="h77648595c7">Transaction処理を書いていない場合の失敗例</h3> ではいつ「全ての処理を巻き戻さなくてはならない」シーンが出てくるのでしょうか？ 今回は、銀行のシステムを例に考えていきます。 [前提] (1) 口座のモデル名は<code>Account,預金額</code>のカラム名は<code>deposit</code> ここで「Aさんの口座からBさんの口座に送金する」例を考えてみましょう。 まずは２人の預金額をみてみます。<pre><code>ruby
account_a = Account.find_by(user_id: 'id_a')
account_b = Account.find_by(user_id: 'id_b')

account_a_deposit = account_a.depsit # Aさんの元々の預金額
account_b_deposit = account_b.depsit # Bさんの元々の預金額

p "Aさんの預金額は#{account_a_deposit}円, Bさんの預金額は#{account_b_deposit}円　です"</code></pre> [実行結果]<pre><code>Aさんの預金額は40000円, Bさんの預金額は40000円　です</code></pre> ２人とも預金額は40,000円のようです。 ではここから送金の処理を書いていきます。今回は20000円を送金してみましょう。<pre><code>ruby
remittance = 20000 # 送金額

account_a.update!(deposit: account_a_deposit - remittance )
account_b.update!(deposit: account_a_deposit + remittance )</code></pre> [実行結果]<pre><code>ActiveRecord::RecordInvalid: Validation failed: 預金額は50000円までです</code></pre> 実行した結果、処理が失敗してしまいました。この銀行では預金額は50000円以上にはできないようです。 (変な銀行ですね)<h3 id="hcf83e1357e"> </h3>ここで、再度Aさんの口座とBさんの口座の預金額を見てみましょう。 [実行結果]<pre><code>Aさんの預金額は20000円, Bさんの預金額は40000円　です</code></pre> なんと、Aさんの口座からお金が減っています!! これは送金失敗にもかかわらず、Aさんの預金口座の減額処理が巻き戻っていないからですね。 <h3 id="h9a91a8e277">Transaction処理を使った例</h3> ではこのコードを正しく書き直してみましょう。 「Aさんの口座からの減額処理」と「Bさんの口座からの減額処理」は１セットにならないといけないので、これをTransactionで囲います。 <pre><code>ruby
ActiveRecord::Base.transaction do
 remittance = 20000 # 送金額

 # 以下の処理は１まとめ
 account_a.update!(deposit: account_a_deposit - remittance )
 account_b.update!(deposit: account_a_deposit + remittance )
end</code></pre> [実行結果]<pre><code>ActiveRecord::RecordInvalid: Validation failed: 預金額は50000円までです</code></pre> 実行すると同じように処理が失敗します。（預金額の上限は変えていないため） さて、Aさんの口座とBさんの口座の預金額を見てみましょう。 [実行結果]<pre><code>Aさんの預金額は40000円, Bさんの預金額は40000円　です</code></pre> 2人ともお金が減っていないことが確認できました 🎉 <h2 id="ha214098e44">まとめ</h2>本記事では中級者以上なら必ず押さえておきたいTransactionについて解説しました！ 安全なシステムを作るために、必ず押さえておきましょう。

【Ruby on Rails】中級者なら押さえておきたいTransactionについて

「プログラミング言語を学び始めたけど、言語がありすぎてどれを勉強したらいいかわからない」 「今勉強しているプログラミング言語で本当に就職できるの？」 「勉強しているプログラミング言語がオワコンって言われていて辛い」 プログラミング初心者なら誰もが一度は感じる悩みだと思います 本記事では現役プログラマー目線で、「これからWebエンジニアになるなら習得しておきたい言語３選」を紹介します！<h2 id="h7f9b6ff3b8"> 現役プログラマーがお勧めする言語ランキング</h2><h3 id="h5652c30f33">第3位 「Ruby」</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/ce2aae94bf1a4c978436cc2289f01e15/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(36).jpeg" alt=""> 日本初のサーバーサイド用言語です。習得難易度も低く、プログラミング初心者におすすめです。 最近はオワコンと言われることも多いですが、まだまだ多くの企業で使われており、就職案件も豊富です。 またRubyのフレームワークであるRuby on Railsは初心者でもアプリを作りやすくする機能が充実しており、Webアプリの仕組みを知るにはもってこいです。 HTML, CSSの勉強が終わったら3つ目の言語として是非触っておきましょう！ <h3 id="hd1f5029426">第2位「JavaScript」</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/3fede271c1bc466693d7a592a32be173/Unofficial_JavaScript_logo_2.svg.png?w=300&amp;h=300" alt=""> Web系の企業への就職を狙うなら100%習得しておくべき言語です。 長らくフロントエンド用の言語として認知されてきましたが、Node.jsの登場により、サーバーサイド もこの1言語で書けるようになりました。 「React」や「jQuery」といったライブラリはこの言語を元に作られているので、JavaScriptの知見を深めておくと、Web業界のトレンドもすんなりと学習することができるでしょう。 <h3 id="h163b5914a8">第1位「TypeScript」</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/2ef5ba30b2f44579b62ab54e2507c512/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(42).png" alt=""> JavaScriptに対して「型」という概念を加えた言語です。 ブームになってまもないながら、使用言語ランキングでは４位、高収入の言語ランキングでは２位とかなりの人気を誇る言語です。 フロントエンドのエンジニアとして就職をするならほぼマストで習得しておくべき言語と言えるでしょう。 また、最近では「静的型付け言語」の人気があがっており、習得しておくと、技術が強く、収入の高い企業に入れる可能性があがると考えられます。 JavaScriptを習得したら是非勉強してみましょう！ <h3 id="h25736bd62d">番外編 「Go」</h3><img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/7930d92389104e349c02406607410aab/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99.png" alt=""> Googleが開発したサーバーサイドの言語です。 特に「技術に力を入れているIT企業のサーバーサイドで使われている」言語です ただし、GoはRuby on Railsのようなアプリを作るためのフレームワークの機能性が低く、少し玄人向きの言語です 初心者の方はぜひ、Ruby on RailsでWebアプリの基本的な概念を押さえてからチャレンジしてみましょう <h2 id="ha214098e44">まとめ</h2>いかがでしたか？最初に学習する言語に迷ったら、ぜひこの中から選んでとにかく始めてみましょう！

[2023年版] 現役Webエンジニアがお勧めするプログラミング言語3選！

「Progateがだんだん作業になってきてしまった」 「Progateを3周したけど次は何をしたらいいかわからない」 Progateでプログラミングを勉強している方なら、一度は感じる悩みだと思います。 僕もProgateからプログラミングを始めたのですが、実際にアプリを作れるまでの実力がつかず、悩んでいました。 そんな僕が一気に仕事を得られるまでに成長した練習法があります。 それは「TODOアプリを作ったこと」です。 本記事では、なぜTODOアプリをつくることが、プログラミングの上達につながるのかを解説していきます。 <h2 id="h134b9816f4">なぜTODOアプリなのか</h2>僕がプログラミングの実力をつけるためにTODOアプリの作成をお勧めするのは以下の4つの理由です。 <h3 id="h28f23ef6aa">[理由1] 何を作るか迷わなくて済む</h3>個人開発ができない理由として、特によく聞くのが「何を作ればいいかわからない」です。 TODOアプリを作ると決めることで、手を動かせない理由なくすことができます。 <h3 id="h369b46bd35">[理由2] Webアプリ作成に必要な技術を全て練習できる</h3>Webアプリを作り上げるには、様々な知識の組み合わせが必要です<ol><li>フロントエンド（見た目を作る力）</li><li>バックエンド（データを保存したり、更新したりする機能を作る力）</li><li>インフラ（作ったものをリリースして、いろんな人が使えるようにする力）</li></ol>TODOアプリを１つ作り上げることで、1 ~ 3の全てを練習することができます。 <h3 id="h663cb9d1df">[理由3] 勉強したい言語に合わせて自由に構成を変えられる</h3>勉強していくうちに、いろんな言語を練習したい機会が出てくると思います。 TODOアプリであれば、使いたい言語に合わせて、自由に構成を変えることができます。 ex) バックエンドはRuby on Railsで、フロントはReactを使って書こう ex) Next.jsとFirebaseを使って、フロントメインの構成にしよう (フロントエンドとバックエンドの両方の言語を習得していることが前提なので、そこまではProgateで頑張ってみましょう) <h3 id="h0efa1596a0">[理由4] 自分でも使える</h3>社会人でも学生でも、タスク管理が全く必要のない人はいないと思います 「自分が日常生活の中で使う」ものを作ることで、モチベーションをあげたり、機能のアイデアが得られやすくなったりします<h3 id="hcf83e1357e"> </h3><h2 id="h6611edb184">TODOアプリを作る際に気を付けて欲しいこと</h2><h3 id="hbefe49465c">[ポイント1] リリースまでやる</h3>アプリを作ることの醍醐味は「作ったものを人に触ってもらうこと」です。 触ってもらうことで、モチベーションが上がり、勉強にも積極的に取り組めるようになります。 是非作り終わったらリリースし、友達に触ってもらいましょう！ ※ ただし、初心者のうちはセキュリティー的に脆いものをつくりがちなので、Twitterなど、不特定多数がみる場所への公開は注意しましょう。 <h3 id="haf6e7451ab">[ポイント2] 新しい技術に何か１つチャレンジする</h3>TODOアプリ作成も、作業になってしまっては意味がありません。 技術取得のために、必ず１つは新しい技術のチャレンジを入れましょう！ ex) ProgateでRuby on Railsを勉強したので、Ruby on Railsを使ってバックエンドを書いてみる。 ex) CSS3のflexboxを勉強したので、画面の構成はflexboxを使って作ってみる。 <h3 id="hb0b12e92d7">[ポイント3] 新しい機能をなにか１つつける</h3>新しい機能をつけることで、TODOアプリのような一般的なものでも、自分だけのプロダクトとして差別化することができます。 就職のポートフォリオとして使う場合は、必ず作った際の工夫点を聞かれるので、答えられる状態にしておきましょう。 また、新しい機能をつけることで、新しい技術への挑戦ポイントが見つかることもあります。 ex) ログイン機能をつける =&gt; 認証機能の勉強をしよう ex) 期限切れのタスクをLINEに通知するようにする =&gt; LINEのAPIの使い方を勉強しよう <h2 id="ha214098e44">まとめ</h2>本記事ではプログラミング初心者から中級者になるために「TODOアプリを作る」メリットについて解説しました。 プログラミングを習得するには、何より実践が重要です。 Progateが終わったらとにかく１本アプリを書き上げて、実務レベルまでレベルアップしましょう！

Progateが終わった後は？プログラミング初心者から中級者になるためのたった１つの方法

<h2 id="h8d027c8ed3">はじめに</h2>プログラミング初心者向けの学習サイトでjQueryの教材が販売され、多くの方が購入されているのを見かけます。 しかし、現役のプログラマー目線だと「なぜ今更jQuery...?」というのが正直な気持ちです。 そこで本記事ではjQueryについて<ol><li>なぜ今までjQueryが採用されてきたか</li><li>なぜ今からあえてjQueryを学ぶ必要がないのか</li><li>代わりに学ぶべきものはなにか</li></ol>の３点にわけて解説していきます!<h3 id="hcf83e1357e"> </h3><h2 id="h936a4aea69">[前提] なぜこれまでjQueryが採用されてきたか</h2>まずはこれまでpureなjavascriptではなく、jQueryが採用されてきたケースを３点に分けて解説します<h3 id="h737713ab8c"> 1. アニメーションの実装</h3>jQueryには<code>animate</code>という関数が用意されており、pureなjavascriptでは難しいアニメーション付きの動きを比較的簡単に実現することができます 一例として、ページ内リンクなどでよく用いられるスムーススクロールをjQueryで実装した例を載せます<pre><code>javascript
$(function(){
&nbsp;&nbsp;$('a[href^="#"]').click(function(){
&nbsp;&nbsp;&nbsp;&nbsp;const speed = 400
&nbsp;&nbsp;&nbsp;&nbsp;const href= $(this).attr("href")
&nbsp;&nbsp;&nbsp;&nbsp;const target = $(href == "#" || href == "" ? 'html' : href)
&nbsp;&nbsp;&nbsp;&nbsp;const position = target.offset().top
&nbsp;&nbsp;&nbsp;&nbsp;$('body,html').animate({scrollTop:position}, speed, 'swing')
&nbsp;&nbsp;&nbsp;&nbsp;return false
&nbsp;&nbsp;});
});</code></pre> <h3 id="h9b834cb28a">2. Ajax通信</h3>webサイトにおいて、「あるボタンが押された時に、ページを再読み込みさせずにサーバーからデータをとってきたい」というケースはよくあります。（ajax通信と呼ばれるものです。） これもjQueryを使えば比較的簡単に実装が可能です。以下にサンプルコードを載せます。<pre><code>javascript&nbsp;&nbsp;
$(function(){
&nbsp;&nbsp;&nbsp;&nbsp;$("#button").click(function(event){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: "GET",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: "ajax_test.html",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType : "html"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Ajaxリクエストが成功した場合
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.done(function(data){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#result").html(data);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Ajaxリクエストが失敗した場合
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.fail(function(XMLHttpRequest, textStatus, errorThrown){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(errorThrown);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;})</code></pre> <h3 id="h6088f2c497">3. DOMへのclass追加 (動的に見た目を変えたいケース)</h3>jQueryでは何らかの条件によって、部品の見た目を動的に変えることも容易です。 以下ではボタンをクリックした時に、ボタンの見た目を変える（cssのclassを追加する）方法を記載します。<pre><code>$('.button').on('click', function () {
 $('.button').addClass('clicked-class');
});</code></pre> <h2 id="ha623025368">jQueryをあえて勉強する必要がない理由</h2>ではなぜこのように便利なjQueryを勉強する必要が薄れてきているのでしょうか？ 一言で言えば「jQueryでできることはすでに現場で導入されている他のもので代替できるようになったから」です。 以下で詳しく解説します。 <h3 id="h77acd83834">CSSの表現力が上がった</h3>CSS3以降, 「アニメーション的な挙動はJavaScriptよりもCSSで実装する」のが主流になってきています。 例えば、全章で示した「スムーススクロールの実装」はcssだと今や以下の１行で実装できてしまいます。<pre><code>css
scroll-behavior: smooth</code></pre> <h3 id="h40230ccf02">ReactやVueでほぼ全てまかなえる</h3>今のフロントエンドの現場では、ReactやVueといったフレームワークが採用されているケースがほとんどです。 そして、特に2, 3の用途はReactだとかなり簡単にかけてしまいます。 例の3で挙げた「ボタンをクリックした際に見た目を変える」実装は、Reactだと以下のようにかけます。<pre><code>&lt;button className={isClicked ? 'clicked-class' : 'default-class'} onClick={() =&gt; {isClicked = true} }&gt;&lt;/button&gt;</code></pre> また追加でjQueryを入れてしまうと、このReactの動作をjQueryが阻害してしまう可能性が出てきます。したがって追加でjQueryを入れるデメリットはあれど、メリットはないと言えます。 <h3 id="h131d04280b">調べればわかる</h3>では既存のプロジェクトに関してはどうでしょうか。jQueryがいまだに使われているプロジェクトは当然存在します。 ただ、jQueryはかなりサンプルコードが豊富なため、ほとんど全ての実装はググれば出てきます。 したがって、jQueryだけをスポットで学ぶメリットはないと言えるでしょう。 <h2 id="h80edbbdbe7">まとめ ~では何を勉強するべきなのか~</h2><h3 id="h7964cda769"> まずJavaScriptを勉強しよう</h3>jQueryもReactもVueもJavaScriptという言語のフレームワークです（最近ではTypeScriptという言語が主流になりつつありますが、これもJavaScriptの延長線上にあるものです） JavaScriptのしっかりとした理解はどのような現場でも対応できる地盤になると言えます。 <h3 id="h832aa365a2">React, Vueを勉強しよう</h3>現在新規のフロントエンドのプロダクトではReactやVueが積極的に採用されており「触ったこともないようでは戦力にならない」と捉えられるケースもあります。 したがって、どちらかは必ず触っておくと良いです。 どんなことでも、勉強したことは無駄にはなりません。 しかし、限られた時間の中で確実に地力をつけるために、効率のよい勉強をしていきましょう。

今更jQueryを勉強する必要はない3つの理由

<h2 id="h8d027c8ed3">はじめに</h2>microCMSとNext.jsで技術ブログを書いているときに、syntax heilightがうまく効かない事象にぶつかったので、解決策を考えてみました<h2 id="h8de6a2a24f">前提知識</h2><h3 id="h0919917cf2">syntax highlightとは</h3>コードに対して、いい感じに色を入れてみやすくすることです。（下記画像） Qiitaなど、技術系の記事では必須の機能と言えます。 <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/9f7e721337c842d6a7bbd92bf8484ecb/image.png" alt=""> microCMSとNext.jsを使ったブログ構成の場合、以下のようにcheerioとhighlight.jsを使って、色付けをするコードを見かけます<pre><code>javascript
const $ = cheerio.load(html)
$('pre code').each((_, elm) =&gt; {
 result = hljs.highlightAuto($(elm).text())
 $(elm).html(result.value)
 $(elm).addClass('hljs')
 $(elm).addClass('text-sm')
})</code></pre>実際に試してみましょう <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/865214015bf64188b25b1655d7469b2e/image.png" alt=""> 確かに色はついたのですが、どこか変です。なぜこうなってしまったのでしょう <h2 id="h9c1f22bd6d">原因</h2>３行目のコードのresultをconsoleで出力してみましょう <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/520fc84dc79a476f888101bb2257d0c7/image.png" alt=""> languageにauto detectされた言語が入っているのですが、どうやら<code>angelscript</code>という別の言語での判定を受けているようです（secondBestでrubyが出ているので惜しいところではあります） つまり、hljsのhighlightAutoでdetectされた言語は必ずしも意図したものになるとは限らないということですね <h2 id="hc4c05c18f9">解決策</h2>そこで以下のような解決策を試してみました<ol><li>microcms側で1行目に言語を指定するようにする</li><li>Next.js側では１行目を取得して、言語である場合にはその言語でheilightする</li></ol>実際のコードはこちらです<pre><code>javascript
const languageSet = {
 'ruby': 'ruby',
 'javascript': 'javascript'
}

const $ = cheerio.load(rowHtml)
$('pre code').each((_, elm) =&gt; {
 const language = languageSet[$(elm).text().split('\n')[0] as string]
 let result = {value: ''}
 if(language){
 const textArray = $(elm).text().split('\n')
 textArray.shift()
 result = hljs.highlight(textArray.join('\n'), {language})
 } else {
 result = hljs.highlightAuto($(elm).text())
 }

 $(elm).html(result.value)
 $(elm).addClass('hljs')
 $(elm).addClass('text-sm')
})</code></pre> 軽くコードに関して説明<pre><code>typescript
const language = languageSet[$(elm).text().split('\n')[0] as string]</code></pre> こちらでmicroCMS側で１行目に書いたものを指定プログラミング言語として受け取ります ここで取得したものをそのまま使わないのは、１行目にプログラミング言語を書き忘れた場合でも正常に動作するようにするためです <pre><code> if(language){
 const textArray = $(elm).text().split('\n')
 textArray.shift()
 result = hljs.highlight(textArray.join('\n'), {language})
 } else {
 result = hljs.highlightAuto($(elm).text())
 }</code></pre> プログラミング言語を指定していた場合には、その言語でのハイライトを行い、指定していなかった場合はauto detectします また、指定していた場合は１行目をコードから省いて表示します <h2 id="hb6509f48bf">結果</h2>実際に試してみましょう 以下のようにmicroCMS側で1行目に言語指定をします（今回はrubyです） <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/6e8d8e9cf0654aa087f563261f494550/image.png" alt=""> なんと、綺麗に表示することができました🎉 <img src="https://images.microcms-assets.io/assets/365cc19e849f4ff8bd50d40b24c00fb2/d02ae262361f4e4a9ee80da5628235ca/image.png" alt=""> <h2 id="ha214098e44">まとめ</h2>今回はmicroCMSを使ったjamstack構成のブログでシンタックスハイライトが効かない場合のtipsをまとめました！ ぜひ使ってみてください！