タグ: WEB制作

  • ITCSSとはなんでしょか?~逆三角形▼の秘密~

    皆様、ご機嫌いかがでしょうか!私は本日も元気にCSSを書きまくっております。

    CSSを書いていると、最初は「おっ、ちゃんと動いた!」「おっ、デザインもそれっぽくなった!」と順調に思えるのですが⋯⋯。

    気がつけば、ファイルはぐちゃぐちゃに肥大化し、marginやpaddingがあちこちで乱立し、謎の!importantが増殖して⋯⋯。最後には、誰も触れたくない“地雷原”が完成してしまいます。よね?

    そうした事態を防ぐために登場するのが、ITCSS(Inverted Triangle CSS)という設計手法です。

    その名のとおり“逆三角形”をベースにCSSを整理する仕組みでして、学んでみると非常に理にかなっていることに驚かされます。

    ▼ 逆三角形の構造

    ITCSSでは、スタイルを抽象→具体の順序で積み上げていきます。分類は次のとおりです。

    1. Settings:色やフォントなど、プロジェクト共通の定数を定義します。
    2. Tools:Sassの@mixinなど、再利用可能な仕組みをまとめます。
    3. Generic:ブラウザ差異をリセットするCSSをここに置きます。
    4. Elementsh1paといった素の要素のデフォルトスタイルを整えます。
    5. Objects:レイアウト、グリッド、コンテナといった「中身を意識しない箱」です。
    6. Components:ボタンやカード、ナビバーといったUIパーツをここで定義します。
    7. Utilities.u-text-center.u-mt-20のような“ちょっと効かせたい”便利クラスです。

    上から下にいくにつれて具体的になる。

    つまり、抽象的な土台の上に、具体的な部品を積み重ねていくイメージです。

    ▼ オブジェクト指向のクラス設計に似ている?

    ここで少し余談です。

    ITCSSの構造を見ていて「おや?」と感じた方もいらっしゃるかもしれません。

    そう、これはJavaなどのオブジェクト指向のクラス設計の書き方とよく似ているのです。

    • 上の階層に「定数」や「共通の仕組み」があり、
    • その下に「ヘルパーメソッド」が並び、
    • さらに具体的な「publicメソッド」があり、
    • 最後に詳細実装である「privateメソッド」が控えている。

    このように、抽象から具体へ、共通から個別へと流れていく設計思想は、言語を問わず“きれいな設計”につながるのです。

    CSSでもまったく同じ発想で整理できる――これがITCSSの面白さだと思います。

    ▼ ITCSSのメリット

    一番のメリットは、破綻しにくいことです。

    • SettingsやObjectsでベースが効くので、再利用性が高い。
    • Utilitiesで「少しだけ余白が欲しい」といった調整も即座に対応できる。
    • 「これはGeneric」「これはComponents」と分けるので、CSSが迷子にならない。

    結果として、CSSが大きくなっても「どこで壊れたのか分からない」という地獄に陥りにくくなります。

    ▼ 他の設計手法との関係

    CSS設計には、BEM(命名ルール)OOCSS/SMACSS(設計思想)などの有名な考え方もあります。

    これらはITCSSと対立するものではなく、むしろ組み合わせて使うと真価を発揮します。

    ただし本記事ではあくまでTCSSの全体像にフォーカスしました。

    BEMやOOCSS/SMACSSについては、改めて別の記事で取り上げたいと思います。

    ▼ まとめ

    CSSがスパゲッティのように絡まり、更新するたびにヒヤヒヤする――。

    そんな悩みをお持ちでしたら、ぜひ一度ITCSSを試してみてください!

    抽象から具体へ、逆三角形のルールに沿って整理していくだけで、「おや、なんだかすっきりしたぞ」という感覚が得られるはずです。

    そしてその思想は、あなたのコードに、拡張性と秩序を与えてくれるでしょう!

  • プログラミングの真髄に迫る!ボブおじさんの「クリーン〇〇」シリーズとその哲学

    皆様、ご機嫌いかがでしょうか!

    今回は、プログラミングの世界で知らない人はいないであろう巨匠、ロバート・C・マーチン氏、通称 “ボブおじさん”について、そして彼が生み出した名著「クリーン〇〇」シリーズの魅力についてご紹介したいと思います。

    私自身も彼の教えに触れ、その奥深さに何度も感銘を受けました。

    第1章:ボブおじさんとはどのような人物か?〜プログラミング界の偉大な伝道師に迫る〜

    まず、ボブおじさんことロバート・C・マーチン氏がどのような人物なのか、その素顔に迫ってみましょう。

    彼は長年にわたりソフトウェア開発の現場で活躍し、そこで培われたソフトウェア開発のあるべき姿を提唱し続けている人物です。彼の思想は、単にコードを書く技術に留まりません。プロフェッショナルとしての心構えやチームで働く上での倫理といった、より広範な領域にまで及びます。

    彼は、アジャイルソフトウェア開発という、現代のソフトウェア開発において重要な思想の提唱者の一人であり、アジャイル宣言の署名者でもあります。アジャイルソフトウェア開発とは、簡単に言えば「変化に素早く対応しながら、柔軟にソフトウェアを作っていく方法」のこと。計画を厳密に固めるのではなく、短いサイクルで開発と改善を繰り返していくスタイルです。

    彼の考え方は、現代のソフトウェア開発の現場に多大な影響を与え、多くの開発者にとっての進むべき道を照らす指針となっています。

    第2章:伝説の「クリーン〇〇」シリーズ〜コードを磨き上げ、本質を理解するための指南書〜

    さて、ボブおじさんの名を一躍有名にしたのが、言わずと知れた「クリーン〇〇」シリーズの書籍群です。このシリーズは、まさにプログラマーのバイブルとも言える存在でしょう。

    具体的な書籍名を挙げると、例えば次のようなものがあります。

    『クリーンコード』:読んで字のごとく、読みやすく、理解しやすく、保守しやすいコードを書くための原則と実践が詰まっています。「保守しやすい」とは、「後から間違いを見つけたり機能を追加したりする際に、手間がかからない」ということです。この本を読むことで、コードの品質を格段に向上させることができます。

    『クリーンアーキテクチャ』:ソフトウェアの構造について深く掘り下げています。「アーキテクチャ」とは、ソフトウェア全体の骨組みや設計図のことです。変更に強く、テストしやすいアーキテクチャを設計するための考え方が示されています。大規模な開発に携わる方にとっては、まさに羅針盤となるでしょう。

    『クリーンコーダー』:こちらは、技術的な側面だけでなく、プロフェッショナルな開発者としてどのように振る舞うべきか、といった心構えに焦点を当てています。チームとの協調性学習への姿勢など、開発者としての人間力を向上させるためのヒントが満載となっています。

    これらの書籍は、単なるプログラミングのテクニック集ではありません。「なぜそうするのか」という私たちが日頃見過ごしがちな根本的な問いに対し、深〜〜〜く考察された解答を与えてくれます。これらの本を読み込むことで、表面的な技術だけでなく、その根底にある“ソフトウェアの真理”のようなものに触れることができるかもしれません。

    第3章:なぜ今、「クリーン〇〇」シリーズを読むべきなのか?〜未来を切り開くための普遍的な知恵〜

    では、なぜ今、私たちはボブおじさんの「クリーン〇〇」シリーズを読むべきなのでしょうか?

    現代のソフトウェア開発は、目まぐるしく変化しています。新しい技術やフレームワークが次々と登場し、常に新しい知識を吸収し続ける必要があります。しかし、そのような変化の激しい時代だからこそ、普遍的な原則や本質的な考え方が、何よりも重要になります。

    ボブおじさんの提唱する“クリーン”な原則は、特定の技術に依存するものではありません。どんな言語やフレームワークを使おうとも、「よいコードとは何か」「よい設計とは何か」という、プログラミングの根源的な問いに対する答えを与えてくれます。これらの知識は、一度身につければ、開発者としてのキャリアを一生涯支えてくれる頼もしい武器となることでしょう!

    終章:あなたのコードに「魂」を宿らせるために

    ボブおじさんと「クリーン〇〇」シリーズは、単なるプログラミングの知識を提供するだけではありません。

    私たち開発者に、自分の書くコードに責任を持ち、常に向上心を持って取り組むという、プロフェッショナルとしての心構えの重要性を教えてくれます。

    もしこれを読んでいるそこのあなたが、「もっとよいコードを書きたい!」「もっと成長したい!」と考えていらっしゃるなら!

    ぜひ一度、ボブおじさんの書籍を手に取ってみてはいかがでしょうか。きっと、あなたのプログラミングに対する認識が大きく変わるはずです。そして、あなたのコードにもきっと熱い思いが宿るでしょう。

    さて、あなたのコードは、どのくらい“クリーン”でしょうか?

  • 我がデジタルロード〜消費者から作り手へ〜

    皆様、ご機嫌いかがでしょうか?

    今回は、私とインターネット、いや、もっと言えばパソコンとの出会いから、今日に至るまでの、なんとも数奇な運命を辿った半生について語らせていただこうと思います。

    ええ、実は私、つい最近まで、デジタル世界の“お客さん”でしかなかったんです。それが、ひょんなことから作る側に足を踏み入れることになりましてね⋯⋯。これが、もう、とんでもない大冒険の始まりだったんです。

    第1章:始まりは祖父の書斎から〜Win95とチンギス・ハーンの衝撃〜

    私のデジタルロードの原点は、祖父の書斎にありました。初めてパソコンというものを認識したのは、あの懐かしきWindows 95が鎮座する、祖父のデスクの上です。

    祖父はよくそのパソコンで「エイジ オブ エンパイア」というゲームをやったり、真剣な顔で囲碁ゲーをしたりしていました。当時の私は、囲碁のルールなんてチンプンカンプン。「おじいちゃん、何やってるんだろう?」と首を傾げるばかりでした。

    しかし、「エイジ オブ エンパイア」は違いました。

    画面の中で繰り広げられる壮大な歴史絵巻に、幼心ながらに惹きつけられました。ですが、戦略や戦術という概念を知らない私は、チンギス・ハーンを大量に配置して、他の国を次々と滅ぼしていく、というちょっとおバカな遊び方ばかりを繰り返していました。今思えば、なんと野蛮な園児だったことか!でも、あの頃の私は、画面の中で世界を支配する全能感に、すっかり魅了されてしまったのでした。

    これが、私がデジタル世界の入り口に立った、最初の消費者体験でした。

    第2章:フラッシュ倉庫の魔力〜小学生時代のデジタル遊戯〜

    時は流れ、私が小学生になった頃、世間では「フラッシュ倉庫」なるものが大流行しました。なんだか怪しげな響きですが、当時は多くの子供たちが、そこで公開されているFlashアニメーションに夢中になったものです。私もご多分に漏れず、何も知らない友人に「ウォーリーを探さないで」をやらせる、なんてことをしていた記憶があります。

    特に好きだったのは、「ナイトメアシティ」と呼ばれる一連の作品です。

    曲が流れて、アニメ調になったAAキャラクターたちが戦う系のFlashで、見ていて本当にワクワクしましたね。あの躍動感と、ちょっとシュールな世界観がたまらなかった。今見てもかっちょいいですね。

    一方で、「ピンポンダッシュ」という、これまたフラッシュ倉庫の有名な作品もありました。これがもう、本当に怖かったんですよ。でも、ビビりながらもついつい最後までやってしまう。あのスリルと不気味な雰囲気が忘れられません。

    この頃も、ひたすら面白いものを探し求める、生粋のデジタル消費者として生きていたわけです。

    第3章:DSiの片隅で雑誌創刊!?〜広がる創作活動の舞台〜

    さらに少し時が経ち、(誕生日プレゼントにねだりまくった結果)私が手にしたのはニンテンドーDSiでした。

    パソコンは家族で共有のものを使っていたし、ゲームボーイアドバンスも、ゲームキューブも、SPも、無印DSもすべて兄のモノだった⋯⋯けど!ビビットにかがやくピンク色のDSiは正真正銘、私のモノ。

    そしてなんと、このDSiには「うごメモ」というアプリケーションが入っていました。

    うごメモは、手軽にアニメーションやイラストが作れるツールでしたが、私はそれをまさかの雑誌に見立て(そもそも「雑誌」といううごメモのジャンルがあったような気もしますが)、短いマンガやイラスト、ちょっとしたコラムのようなものを描いていました。最盛期には「読モ」なる人材を募集して、オキニのアクセやら最近みた夢やらなんやらを訊いたアンケート原稿を集め、雑誌にまとめて載せていました。

    「これが私の雑誌だ!」と、一人悦に入っていたものです。

    今振り返ると、とても稚拙なものだったと思いますが、あの頃の私にとっては、まさに自分だけのメディアを生み出す、とてつもない創造体験だったんです。

    ⋯⋯とはいえ、この時もまだ、誰かに見せるためというよりは、自分が楽しむためのおもちゃを作っている感覚でしたから、根っこの部分はバリバリの消費者だったんだと思います。

    第4章:ハムスターとアメブロと「HTML?なにそれ美味しいの?」な日々〜黒歴史とコミュニケーションの世界〜

    DSiのうごメモに熱中していたのと同時期に、私のネットライフはさらに広がりを見せました。まずは、「アメーバブログ」です。ここで私が書いたのは、ハムスターとの会話形式のブログでした。

    その頃、実際に飼っていたハムスターが、まるで本当にしゃべっているかのように、日々の出来事について語り合う⋯⋯。しかも、そのハムスターのセリフ、「〇〇でしゅ!」という、今考えると結構恥ずかしい語尾で書いていました。まさに、デジタル世界の黒歴史です。

    この頃の私は、まだ「HTML?なにそれ美味しいの?」(こういう言い回しありましたよね)という状態でした。アメブロには、文字の色を変えたり、リンクを貼ったりといったことができるタグを使って書く機能があったことは、なんとなく覚えているんですが、その記号の羅列が当時の私には異世界の呪文のように思えて、「なんだか複雑そうだから、触らないでおこう!!」と、完全にスルーしていました。

    ともあれアメブロというプラットフォームは、その頃の私にとって、自分の中のアイデアを形にする大切な遊び場でした。

    そして、「アメーバピグ」では、うごメモで知り合った同年代の子たちと遊んでいました。ピグの広場で待ち合わせして、アバター同士でチャットしたり、ゲームをしたり。まさに、デジタル世界での秘密基地のような場所でしたね。

    さらに、「ふみコミュ」や「キャスフィ」といった掲示板サイトもよく利用していました。匿名で色々な人と交流したり、自分の興味のある話題について語り合ったり。今では当たり前になったネット掲示板ですが、あの頃は、見知らぬ誰かと文章で繋がれることに、なんだかすごい可能性を感じていましたね。

    ⋯⋯ええ、そうなんです。この頃も、相変わらずネットの海を漂う一介の消費者だったわけです。

    第5章:人生最大の転機!〜社長の一言で、私は「作り手」になった!〜

    さらに時は経ち、気がつけば私は社会に放り出されていました。そんな主体性の欠片もなかった私に、まさに青天の霹靂とも言うべき出来事が訪れます。それは、前の会社でバックエンドのエンジニアとして働いていたある日のことでした。依存性を注入()している私のデスクへ社長がやってきて、こう仰ったんです。

    「ねぇ、うちの会社のウェブサイト、作ってくれる?」

    ⋯⋯え? 私が? Webサイトを?当時の私は、もちろんWeb制作なんて、まるで知識がありませんでした。普段はただネットを見て楽しむだけの、生粋の“お客さん”だったんですからね。それこそ、あの「HTML?なにそれ?」状態のままです。

    「え、ええと⋯⋯」

    と、しどろもどろになる私に、社長はニヤリと笑って一言。

    「よろしくね。ちょっとできたら見せてね」

    この、なんとも無責任⋯⋯いや、「信じられている」と感じさせる一言が、私の人生を大きく変えることになったのです!

    そこからの私は、まさに無我夢中でした。右も左も分からないながらも書籍を読み漁り、ネットで調べまくり、まるで砂漠でオアシスを探す旅人のように、Web制作の知識と技術を貪欲に吸収していきました。あの時ほど、脳みそがフル回転したことはなかったかもしれません。

    そして、試行錯誤の末、ついに会社のWebサイトを完成させた時の達成感たるや! それはもう、チンギス・ハーンで世界を滅ぼした時以上の全能感でしたね!

    終章:デジタルロードは続くよ、どこまでも〜消費者から作り手へ、そして未来へ〜

    祖父のWindows 95から始まり、チンギス・ハーンを量産し、フラッシュ倉庫で震え、DSiで雑誌を作り、ハムスターと会話し、ピグ友と戯れ、掲示板で語り合った⋯⋯。

    そんな生粋の消費者だった私が、社長の一言というひょんなきっかけで、まさかWebサイトを作る側の人間になるなんて、人生って本当に面白いものですね!

    あの時、社長に頼まれなければ、私は今もWebサイトをただ“見る”だけの人間だったかもしれません。しかし、その一言が、私の新たな扉を開いてくれたのです。

    技術は急速に進化し、あの頃のツールはもうほとんど使われていないかもしれません。でも、あの時の「面白い!」という純粋な気持ちや、「もっと知りたい」「もっと作りたい」という探求心は、消費者だった頃も、そして作り手になった今も、私の中に脈々と息づいていると信じています。

    これからも、このデジタルロードを、一体どこまで歩んでいくことになるのか。私自身、楽しみで仕方ありません。

    さて、皆様のデジタルロードは、どこから始まりましたか? そして、ひょんなことから作り手になった経験はありますか? よろしければ、皆様の物語もどこかで聞かせてください!

  • WordPressが大変身!? ヘッドレスCMSとAngularで挑む、次世代サイト構築!

    WEBの世界に興味を持つ皆様、こんにちは! 今日は私が今まさに取り組んでいる、WEB制作の新しい挑戦についてご紹介したいと思います。

    皆様が普段目にしているWEBサイト。その裏側には、様々な技術と工夫が隠されています。そして今回、私が挑むのは、まさにWEB界の新常識とも言えるプロジェクトなのです。

    WordPressとの初対面が、まさかの“ヘッドレス”だった!

    実は私、これまでWordPressを“普通に”使った経験がほとんどないんです。ブログや簡易的なサイトでよく使われるWordPressですが、私にとっては、いきなりヘッドレスCMSという形でWordPressと出会うことになった、というわけです。

    ヘッドレスCMSとは、コンテンツの管理だけをWordPressに任せ、見た目の部分を完全に切り離してしまうという、現代のWEB開発で注目を集める手法なのです。

    例えるなら、こんなイメージです。

    普段のWordPressは「料理も盛り付けも、全部一人でこなす定食屋さん」。メニュー(コンテンツ)を考えるのも、料理を作るのも、お皿に盛り付けてお客さんに出すのも全部WordPressがやる感じですね。

    でも、ヘッドレスCMSのWordPressは「最高の食材を完璧に管理する“専門の食材庫”」なのです。美味しい料理を作るための材料(記事のテキスト、画像、動画など)を、きちんと整理して保管するだけ。お客さんの前に出す「料理の盛り付け」は、別の誰かに任せる、というわけです。

    フロントエンドには“高速の担い手”Angularが舞い降りる!

    そして、WordPressという名の“コンテンツの宝庫”から情報を引き出し、皆様のブラウザに魅力的な形で表現する役割を担うのが、私が現在、まさにそのポテンシャルを引き出さんと学習・実践を重ねているフレームワーク、Angular(アンギュラー)です!

    Angularは、Googleが開発したフロントエンド構築の強力なツールとでも言いましょうか。複雑なウェブアプリケーションを、驚くほどのスピードと効率で作り上げることを可能にする、すごいやつです。

    例えるなら、こんなイメージです。

    先ほどの「食材庫」(WordPress)から最高の食材を受け取って、それを「華麗に盛り付けてお客さんに出す一流シェフ」がAngularです。見た目も美しく、しかもお客さんを待たせることなく、瞬時に料理(WEBサイト)を提供できるわけですね。

    日本におけるAngularの立ち位置としては、ReactやVue.jsといった他の人気のフレームワークと比べると、現時点では採用事例が少し控えめに見えるかもしれません。しかし、大規模な企業システムや複雑な業務アプリケーションの開発においては、その堅牢な構造とGoogleによる手厚いサポートから、根強い人気と高い評価を得ています。特に、TypeScriptとの相性が良く、大規模開発での保守性やチーム開発のしやすさは特筆すべき点です。

    WEBサイト表示の秘密兵器 SSR、CSR、そしてハイドレーション!

    さて、ここで少しだけ、WEBサイトの表示方法に関する奥深き世界をご紹介しましょう。皆様が普段見ているサイトが、どのように画面に現れているか、ご存じですか?

    大きく分けて二つの方法があります。

    1. CSR(クライアントサイドレンダリング): これは、皆様のブラウザ(クライアント)が、サイトの表示に必要なデータをダウンロードし、ブラウザ自身でページを組み立てて表示する方法です。AngularのようなJava Scriptフレームワークは、基本的にこのCSRを得意としています。
      • 例えるなら、あなたがお店でレシピ(データ)をもらって、その場で自分で料理(ページ)を作るイメージです。一度作り方を覚えてしまえば、その後の違う料理(別のページ)もサッと作れますね。
    2. SSR(サーバーサイドレンダリング): 一方、SSRは、WEBサイトのサーバー側でページを組み立て、完成したHTMLの状態でブラウザに送り届ける方法です。これにより、最初のページ表示が非常に速く、検索エンジンにも優しいという利点があります。
      • 例えるなら、お店で既に完成しているお弁当(完成したページ)を受け取るイメージです。すぐに食べ始められますし、どんな料理が入っているか(どんな情報があるか)も一目瞭然ですね。

    そして、この二つの良いとこ取りをするのが、ハイドレーションという技術です!

    ハイドレーションとは、サーバー側でSSRによって生成されたHTMLを、クライアント側でJava Script(Angular)が引き継ぎ、インタラクティブな機能や動的な部分を追加していく手法のこと。

    例えるなら、完成したお弁当(SSRで作られたページ)を受け取った後、あなたがその場で「このお箸、もっと使いやすくカスタマイズしちゃお!」とか、「ここに好きな調味料を足しちゃお!」と手を加えるイメージです。最初の提供はスムーズ、その後の使い勝手も最高!というわけですね。

    私のAngularプロジェクトも、まさにこのSSRとハイドレーションを積極的に取り入れ、ユーザーにとって最高の体験を提供できるよう、日々調整を重ねています。

    挑戦は、まだまだ続く!

    このWordPressのヘッドレスCMS化とAngularを使ったフロントエンド構築、そしてSSRとハイドレーションの活用は、私にとってまさに“新しい挑戦”です。時には解決すべき課題に直面し、時には試行錯誤を繰り返すこともあります。しかし、その先に待つ“より良いウェブサイト”という目標を目指し、私は今日もウェブ制作の道を突き進んでいます!

    もし、皆様がウェブサイトのパフォーマンスやセキュリティ、あるいはユーザー体験でお悩みでしたら、この「ヘッドレスCMS × Angular × SSR/ハイドレーション」という組み合わせを、ぜひ一度検討してみてはいかがでしょうか?

    それでは、また次回のWEB制作話にご期待ください!