しばらくGitHubブログを放置していました。「いつかまた整理しよう」という思いを繰り返すばかりでしたが、勉強した内容をちゃんと記録して共有する場所が必要だと感じました。そこでブログをゼロから作り直すことにしました。 なぜNext.jsを選んだのか 当時Svelteが注目を集めていましたが、ブログを素早く完成させるにはNext.jsの方がいいと判断しました。Svelteを新しく学んでSvelteKitを習得しながら適切なライブラリを探していくよりも、Next.js一本で学習しながら進める方がラーニングカーブがずっと短かったのです。 既存のブログはNext.js 12バージョンでしたが、npxでアップグレードを試みたところうまくいきませんでした。結局新しいプロジェクトを作成してshadcnを適用する方式で進めました。今はNext.js 14 + Contentlayerの組み合わせで静的ブログを運用しています。 開発環境のセットアップ 当時使っていたiMacにはNode.jsがインストールされていなかったので、Next.jsのDocker例を活用しました。パッケージマネージャーはpnpmを使うことにし、Homebrewでインストールすれば簡単です。 pnpm create next-app --example with-docker nextjs-docker この一行でDockerベースのNext.jsプロジェクトが生成されます。 ブログに必要な機能 ブログにどんな機能が必要か整理してみました。Next.js自体の機能と外部ライブラリを組み合わせれば、ほとんど実装できます。 Routing — Next.js App Routerでページ間の遷移を処理 画像レンダリング — マークダウン内の外部画像をdata URIで最適化 コメント機能 — GitHubベースのコメントシステムを活用 ブログの画面構成 現在のブログはこのような構成になっています。 画面 役割 Home 最新記事の紹介、検索、記事一覧 Books 読んだ本の一覧と詳細表示 Tags タグ別に記事を閲覧 About 自己紹介 Homeが記事一覧と検索機能の両方を担っているので、別途Postsページがなくても十分です。Books画面では読んだ本の中で最も感銘を受けた一節を下部に入れることにしました。 マークダウンをHTMLに変換する ブログ記事を画面に表示するには、マークダウンファイルをHTMLに変換する必要があります。今はContentlayerがこの役割を担っていますが、最初は自前で変換パイプラインを構築していました。 generateStaticParamsでpostsフォルダのすべての記事を取得して一つずつ読み込み、unifiedでマークダウンをHTMLに変換し、frontmatterからメタデータを抽出してPostオブジェクトを作るという方式でした。 マークダウン変換によく使われるツールを比較してみました。 ライブラリ 特徴 gray-matter frontmatterのパースに特化 marked GitHubスターが多く10年以上の実績あるライブラリ unified プラグインエコシステムが豊富で拡張性に優れる 結局拡張性を優先してunified系を選びました。今でもContentlayer内部でremark/rehypeプラグインを組み合わせて、シンタックスハイライト、数式レンダリング、外部リンク処理などを行っています。 unifiedパッケージを使う際にこの記事（日本語）がとても参考になりました。 マインドマップで学習の軌跡を可視化する ブログを作る中でもう一つアイデアが浮かびました。勉強に意味を持たせると記憶に残りやすいという話にインスピレーションを受けたのです。 各タグをマインドマップで見られる画面を作ったらどうだろうと思いました。勉強してブログに載せた内容を点にして、その点を線でつなぐイメージです。 たとえばDockerを勉強したなら、Dockerがどういうものか掴めていく過程で自分はどんな視点でDockerを見るようになったのか、そしてこの次はどんな勉強に進むのかを視覚的に追跡できます。 このつながりを目で見ることができれば、それ自体がモチベーションになります。 振り返って ブログを作り直すことは、単に技術スタックを変えるということではありませんでした。勉強したことを整理し、その過程を他の人と共有する一つのシステムを作るということだったのです。 完璧なブログを待つよりも、まず作ってから一つずつ改善していくのが一番良いスタートです。 No man can succeed in a line of endeavor which he does not like.— Napoleon Hill

最近はSNSに短い動画を一本上げる方が、文章一つ書くよりも反応が良いことが多いですよね。でもいざ動画編集をしようとすると、どこから始めればいいか途方に暮れてしまいます。CapCutは無料でありながら機能がかなり強力で、初めて始めるにはぴったりのアプリです。この記事ではCapCutで動画を編集してSNSに投稿するまでの流れを整理してみます。 始め方：インストールとプロジェクト作成 CapCutはApp StoreとGoogle Playから無料でダウンロードできます。 アプリを開いて**「新しいプロジェクト」**をタップすると、ギャラリーから動画を選んでタイムラインにすぐ追加できます。 基本的な編集の流れはこう考えるとわかりやすいです。 動画をカットする — タイムラインで好きな位置をタップして「分割」ボタンを押すだけです 字幕を入れる — 「テキスト追加」で直接入力するか、自動字幕機能（日本語対応）を使うと便利です 音楽を追加する — CapCut内蔵の音源ライブラリから雰囲気に合ったBGMを選んでみてください エフェクトとトランジション — シーンの間にトランジション効果を入れると動画がずっと自然になります 書き出す前にTikTokウォーターマークの解除を確認してください。設定でオフにしておくと、他のプラットフォームに投稿するときすっきりします。 撮影時に気をつけておくと良いこと 編集も大事ですが、撮影段階で少し気をつけるだけで後処理がずっと楽になります。 縦9:16比率で撮影してください。リールもショートもどちらも縦動画が基本です 自然光を活用すると、特別な照明なしでも画面が明るくきれいになります 撮影前に簡単なスクリプトを用意しておくと、30分以内に編集まで終わらせることができます スクリプトはこの3つの構成で考えるとシンプルです。 フック（最初の3秒）— 目を引くシーンや質問で始める ハイライト — 伝えたいコアな内容 CTA — 「チャンネル登録」「いいね」「次の動画に続く」などの行動促進 最初の3秒が本当に重要です。スクロールを止めさせるインパクトのあるシーンを冒頭に配置してください。 サウンドミキシング：音のバランスを整える 動画において音のバランスは思った以上に重要です。音楽が大きすぎると声が埋もれ、小さすぎると動画がのっぺりしてしまいます。 基本原則は音声を基準にして他の音を下げることです。 まず音声ピークを**-12 〜 -6 dB**に合わせてから、残りを相対的に調整すればOKです。 要素 音声基準の相対dB 絶対dBの例 ヒント 音声（会話） 0 dB（基準） -12 〜 -6 dB まずノーマライズ メイン効果音 -3 〜 -6 dB -12 〜 -15 dB 強調しつつやや低めに 背景効果音 -6 〜 -10 dB -15 〜 -18 dB 自然な背景レベル BGM -10 〜 -18 dB -18 〜 -27 dB ダッキングで自動調整 タイムラインでボリュームスライダーやキーフレームを使って細かく調整できます。 Pro版のオーディオダッキング機能を使うと、音声が出ているときにBGMが自動的に下がるので便利です。 SNSに投稿する Instagram リール Instagramアプリで**「+」ボタン → 「リール」**を選択し、CapCutで作った動画を読み込めばOKです。 Instagram内で音楽やスタンプを追加することもできます。 ハッシュタグはコンテンツに関連するキーワードを3〜5個程度入れるのが適当です。 CapCutのロゴが動画に残っている場合は、Instagram編集画面のクロップで切り取れます。 TikTok CapCutはもともとTikTokを作ったByteDanceのアプリなので、TikTokとの連携が一番スムーズです。 CapCut編集画面で**「TikTokに共有」**ボタンを押すと、別途書き出しなしでそのままアップロードできます。 TikTokではトレンドサウンドを活用するのが露出に有利です。 CapCutで基本編集を終えてから、TikTokアプリ内で人気音源に差し替える方法もありです。 ハッシュタグはトレンドタグとコンテンツ関連タグを混ぜて5〜8個程度入れてみてください。 YouTube ショート YouTubeアプリで**「+」ボタン → 「ショート動画を作成」**をタップして動画をアップロードしてください。 縦動画は自動的にショートとして認識されます。 タイトルは15〜30文字程度が適当で、著作権的に安全な音源を使うことが大切です。 CapCut内蔵音源はほとんど商用利用可能ですが、アップロード前に一度確認しておきましょう。 継続が大事です 最初は一本作るのに時間がかかっても大丈夫です。 週2〜3回程度コツコツ投稿していくと、編集スピードも上がり、自然とフォロワーも増えていきます。 完璧な動画を待つよりも、今ある動画でリール一本作ってみるのが一番良いスタートです。 Argue for your limitations, and sure enough they're yours.— Richard Bach

JavaからKotlinに移行するサービスが増えていますよね。Kotlinを見て最初に感じたのは簡潔さでした。Javaと比べて同じロジックを半分以下のコードで表現できるというのがなかなか新鮮でした。この記事では実務でよく使うKotlin文法を整理してみます。Null Safetyからコルーチンまで、ポイントだけ押さえていきましょう。 変数と型推論 Kotlinの変数宣言は2種類です。valは不変、varは可変です。 val name: String = "太郎" val age = 30 // 型推論でInt var count: Int = 0 count = 1 const val MAX_SIZE = 100 // コンパイル時定数 Javaで毎回finalを付けていたのと違い、Kotlinではvalがデフォルトなので自然と不変を志向するようになります。 文字列処理もずっとスッキリします。文字列テンプレートとraw stringを使えばStringBuilderを持ち出すことはほとんどありません。 val json = """ { "name": "$name", "age": $age } """.trimIndent() Null Safety Kotlinを使う最大の理由の一つです。すべての型がデフォルトでnon-nullなので、NullPointerExceptionをコンパイル時に検出できます。 var nickname: String? = null // ?を付けるとnull許容 nickname?.length // Safe call: nullならnullを返す nickname!!.length // Non-null assertion: nullならクラッシュ val len = nickname?.length ?: 0 // Elvis演算子: nullのときデフォルト値 実務ではletとElvis演算子を組み合わせるパターンが最もよく使われます。 nickname?.let { println("ニックネーム: $it") } fun process(name: String?) { val n = name ?: return // nullなら早期リターン println(n.uppercase()) } !!演算子はテストコード以外では使わない方がいいです。結局NPEを再び生み出すのと同じですから。 関数と拡張関数 デフォルト値と名前付き引数のおかげで、Javaでオーバーロードで解決していた問題が関数一つで済みます。 fun greet(name: String = "Guest", age: Int = 0) = "Hello, $name (${age}歳)" greet(age = 30, name = "太郎") // 順序を無視できる 拡張関数は既存クラスを変更せずにメソッドを追加する機能です。ユーティリティ関数を作るときに特に便利です。 fun String.toSlug() = this.lowercase().replace(" ", "-").replace(Regex("[^a-z0-9-]"), "") "Hello World".toSlug() // "hello-world" クラス：Data ClassとSealed Class Data Class DTOやモデルオブジェクトを作るとき、equals()、hashCode()、toString()、copy()を自動生成してくれます。Javaのボイラープレートを完全になくせます。 data class User( val id: Long, val name: String, val email: String ) val user2 = user1.copy(name = "次郎") // 一部フィールドだけ変更したコピー Sealed Class 状態管理に特化したクラスです。when式と組み合わせると、すべてのケースをコンパイラがチェックしてくれるためelse分岐が不要になります。 sealed class Result&x3C;out T> { data class Success&x3C;T>(val data: T) : Result&x3C;T>() data class Error(val message: String) : Result&x3C;Nothing>() object Loading : Result&x3C;Nothing>() } fun handleResult(result: Result&x3C;String>) = when (result) { is Result.Success -> "成功: ${result.data}" is Result.Error -> "エラー: ${result.message}" Result.Loading -> "読み込み中..." } 新しい状態を追加するとwhenを使っているすべての箇所でコンパイルエラーが発生するので、漏れなく対応できます。 制御文は式である Kotlinではifとwhenはどちらも値を返す式です。 val max = if (a > b) a else b val message = when (status) { "PENDING" -> "保留中" "CONFIRMED" -> "確定" in listOf("CANCELLED", "FAILED") -> "失敗" else -> "不明" } Javaの三項演算子（? :）がない代わりにif自体がその役割を果たします。whenはswitchよりもずっと柔軟で、範囲チェックや型チェックも可能です。 コレクションの関数型処理 KotlinのコレクションAPIはJavaのStreamよりも簡潔です。 val numbers = listOf(1, 2, 3, 4, 5) numbers.filter { it > 2 } // [3, 4, 5] numbers.map { it * 2 } // [2, 4, 6, 8, 10] numbers.groupBy { it % 2 == 0 } // {false=[1,3,5], true=[2,4]} numbers.chunked(2) // [[1,2], [3,4], [5]] .stream().collect(Collectors.toList())のようなコードを書かなくて済みます。 スコープ関数 5つのスコープ関数は最初は混乱しますが、ポイントは参照方法（it vs this）と戻り値（ラムダの結果 vs オブジェクト自体）の組み合わせです。 関数 参照 戻り値 用途 let it ラムダ結果 nullチェック、変換 run this ラムダ結果 設定後に計算 with this ラムダ結果 複数メソッド呼び出し apply this オブジェクト自体 オブジェクト初期化 also it オブジェクト自体 ログ、付随処理 実務で最もよく使う組み合わせはapply + alsoです。 val user = User().apply { name = "太郎" age = 30 }.also { log("ユーザー作成: $it") } applyでオブジェクトを初期化し、alsoでサイドエフェクト（ログなど）を処理するパターンです。 コルーチン Kotlinの非同期処理はコルーチンが担当します。RxJavaより学習コストが低く、コードが同期的に読めます。 基本的なAPI呼び出し viewModelScope.launch { _loading.value = true _user.value = repository.getUser(id) _loading.value = false } 並列呼び出し 逐次実行なら3秒かかる処理を、asyncで並列処理すれば1秒に短縮できます。 coroutineScope { val user = async { fetchUser() } val posts = async { fetchPosts() } val comments = async { fetchComments() } Triple(user.await(), posts.await(), comments.await()) } Dispatcherでスレッド切り替え viewModelScope.launch { showLoading() // Mainスレッド val user = withContext(Dispatchers.IO) { api.getUser(id) // IOスレッド } showUser(user) // 再びMainスレッド } withContextでスレッドを切り替えてもコールバック地獄なしに上から下へ読めます。 Java相互運用 既存のJavaコードとの互換が必要なら、@JvmStaticや@JvmFieldなどのアノテーションを活用すれば大丈夫です。 class Utils { companion object { @JvmStatic fun helper() { } } } // JavaからUtils.helper()で呼び出し可能 まとめ Kotlinは結局安全で簡潔なコードを目指す言語です。この記事で取り上げた中で、実務で最も実感が大きかったのは次の3つでした。 Null Safety - ランタイムクラッシュをコンパイル時に引き上げてくれます Sealed Class + when - 状態の漏れがない分岐処理が可能です コルーチン - コールバックなしで非同期コードを書けます もっと深く学びたい方はKotlin Koansで練習してみてください。 We learn what we have said from those who listen to our speaking.— Kenneth Patton