新着記事一覧

IT・プログラミング Python

2024/4/21

【Python】Pythonでの自然言語処理(日本語)

こちらの記事では、自然言語処理についてまとめています。 Contents1 自然言語処理とは?2 自然言語処理の実装 自然言語処理とは? 自然言語とは、日本語や英語のような自然発生的に生まれた言語です。日常的に使用している自然言語について、言葉が持つ意味を解析し処理します。活用事例としては、チャットボット、音声認識AI、文字認識(手書き文字をカメラが認識し文字データへと変換する技術)、検索エンジン、翻訳、感情分析、文章要約などがあります。 文章の意味を機械に理解させるには、単語分割を行う必要があります。手 ...

続きを読む

IT・プログラミング Python

2024/4/8

【Python】統計学的モデル 時系列分析の実装

こちらの記事では、時系列分析の実装についてまとめています。 Contents1 時系列分析とは?2 定常性とは?3 時系列データの分析方法4 SARIMAモデルの実装 時系列分析とは? 時系列分析では、時間経過とともに変化する時系列データを扱います。時系列データの例としては、毎時間の気温、株価の推移等がこれにあたります。売上予測、来店者予測等、ビジネスにおいて重要な分析技術です。 時系列データには以下3種類があります。 1.トレンドデータの長期的な傾向。時間の経過とともに値が上昇・下降している時系列データ ...

続きを読む

IT・プログラミング Python

2024/4/1

【Python】主成分分析の実装

こちらの記事では、主成分分析を実装していきます。 Contents1 主成分分析とは2 主成分分析の手順について 主成分分析とは 主成分分析とは、次元削減を行う時によく使う手法です。例えば、いくつかの特徴量があるデータを2次元データに変換すると、できるだけ情報を保ったまま2軸での描画が可能になり、全てのデータを見やすく示すことができます。 主成分分析の実用例として、製品やサービスのスコアリングや比較(1次元に圧縮)、データの可視化(2,3次元に圧縮)、回帰分析の前処理などが挙げられます。 主成分分析の手順 ...

続きを読む

IT・プログラミング Python

2024/4/1

【Python】カーネル主成分分析の実装

こちらの記事では、カーネル主成分分析の手順についてまとめています。 Contents1 カーネル主成分分析とは2 カーネル主成分分析の実装 カーネル主成分分析とは 回帰分析等、機械学習の多くのアルゴリズムは線形分離できるデータが与えられることを前提としていますが、現実的には線形分離できないデータ、つまり非線形分離する必要があるデータがほとんどです。非線形分離する必要があるデータに対処できるのが、カーネル主成分分析(kernel PCA)です。 カーネル主成分分析ではN×M(データの数×特徴の種類)のデータ ...

続きを読む

IT・プログラミング Python

2024/3/29

【Python】機械学習(教師なし) クラスタリング DBSCANの実装

こちらの記事では、機械学習(教師なし)の非階層的クラスタリング DBSCAN法についてまとめていきます。 Contents1 クラスタリングとは2 DBSCANでの実装 クラスタリングとは データをクラスター(塊)に分割する操作のことです。クラスタリングの中でも階層的クラスタリングと、非階層的クラスタリングの2種に分けられています。 1.階層的クラスタリングデータの中から最も似ている組み合わせを探し出して、順番にクラスターにしていく方法です。最終的に全データをまとめるクラスターに行くつけば終了です。 2. ...

続きを読む

IT・プログラミング Python

2024/3/28

【Python】機械学習(教師なし) クラスタリング k-meansの実装

こちらの記事では、機械学習(教師なし)の非階層的クラスタリング k-means法についてまとめていきます。 Contents1 クラスタリングとは2 k-means法での実装 クラスタリングとは データをクラスター(塊)に分割する操作のことです。クラスタリングの中でも階層的クラスタリングと、非階層的クラスタリングの2種に分けられています。 1.階層的クラスタリングデータの中から最も似ている組み合わせを探し出して、順番にクラスターにしていく方法です。最終的に全データをまとめるクラスターに行くつけば終了です。 ...

続きを読む

IT・プログラミング Python

2024/3/28

【Python】機械学習のデータ前処理 外れ値の扱いについて

外れ値の処理についてまとめています。 Contents1 外れ値とは?2 外れ値の検知方法について 外れ値とは? 外れ値とは、他のデータと著しく乖離したデータのことを指します。データ内に外れ値が混在していると、分析結果に影響を及ぼしたり、機械学習モデルの学習過程で影響がでてしまい学習が進みにくくなる、などの影響が出てしまいます。 外れ値の検知方法について 外れ値の検知方法について、可視化、LOF(Local Outlier Factor )、Isolation Forestの3つの手法について紹 ...

続きを読む

Web制作

【Web制作】Sass @useを使ったファイル分割方法

この記事では、Sassのファイル分割の方法をわかりやすく解説しています。

Haru

大元のstyle.scssに下層ページのcssをつらつらと書いていくと、絶対何かの間違いで他のページのレイアウト崩れが起こるだろうし、保守性を高めるためにもSassファイルを分割しておきたいなぁ。

ということで、画像も用いながら手順を記していきたいと思います。

前提

Sassのファイル分割は@importが主流で使われてきましたが今後@importは廃止され、@useが主流になります。
ファイル分割の際は、必ず@useを使用するようにしましょう!

ファイル構造の確認と分割

私はこんなファイル構造でやってみました。

色々とscssファイルがありますが、それぞれ何を表すのかと言うと・・・

共通パーツ、変数、mixin定義、ページごと、という感じでscssを分けています。

それぞれのファイルに記述すること

大元のstyle.scssに記述すること

以下のように、読み込む_〇〇.scssを全て書き出していきます。
記述の仕方は@use "ファイル名( _とscssを除く )"です。

変数を定義した_variable.scssに記述すること

以下のように、変数のみを入れています。

mixinを定義した_mixin.scssに記述すること

こちらにはbreakpointの定義を記述しています。

共通パーツやページ毎の_〇〇.scssに記述すること

共通パーツや各ページ内では、上で定義した変数やmixinを使用しているので、冒頭に @use "variable", @use "mixin" でファイルを読み込んでいます。

そして、その後つらつらと記述しているcssでvariableの変数を使うよ、mixinの定義を使うよ!と以下のように該当部分に追記する必要があります。

Haru

冒頭でファイルを読み込めば自動的にそのscss内でmixinや変数が変換されると勘違いしており、なんでコンパイルされへんのやー!!としばらく悩んでいましたが、使用している箇所に都度variable.やmixin.を書いていかなければいけなかったみたいです。 ちょっと面倒ですが、保守性を高めるためには仕方がない作業です。

上記の記述が抜けている場合、きちんとエラーで教えてくれるので、記述漏れの箇所もすぐ特定できます。

エラーが全て解消されればコンパイルされ、以下のようにcssフォルダ内にstyle.cssがまるっと出力されます!!

注意事項

_〇〇.scssを編集していた時に、Liveserverの画面が更新され全くcssがあたっていないページが表示されめちゃくちゃ焦りましたが、style.scssを保存したらまたコンパイルされ、cssが当たっているページに切り替わりました。
アンダーバー付きのファイルはコンパイルの発動条件には含まれない、という性質を持っているからでしょうか。。。

あれ、cssがあたらなくなった!!なんで!?となったら、大元のstyle.scssを保存して再度コンパイルしてみてください。

Haru

急にcssがあたらなくなり、この世の終わりかと思うくらいの絶望感を一瞬味わいましたw

まとめ

自分の理解力が足りず、ファイル分割だけで丸2日悩みました。夢にも出てきましたw

解決のためにアドバイスを下さったメンターさんに感謝!!!この記事が同じような悩みを持っている方のお役に立ちますように。

  • この記事を書いた人

Haru

会社員。2回目の育休から仕事復帰。
職種は海外営業。
育休の過ごし方、育児、家事、プログラミング勉強について発信しています。

-Web制作
-