Q&A
整形にはどのようなアルゴリズムを採用するのですか？
前提・実現したいこと
プログラミング学習2ヶ月目です。
ある課題を解いています。
PHPのみを用いて、cssのコードを整形するサイトを作りたいです。
発生している問題・エラーメッセージ
学習を始めたばかりで何がわからないのかもわかりません。
試したこと
まずはHTMLで整形前のコードと整形後のコードを表示するテキストエリアを用意しましたが、そこで詰まっています。
回答3件
0
プログラミング学習を漠然としていては、モチベーションを上げるのも大変ですね。
「CSSのコード整形サイトを作る」前提知識も仕組みも理解できていないように見えます。
webサイトを作るのに、webサーバー上にhtmlやjsやcssを配置するのは当然として、
サーバー側で動的コンテンツ生成するためにphpや他の言語を使ったり、
データ処理のためにリレーショナルデータベースを活用したり、
クライアント側(webブラウザ側)で動的コンテンツ生成するためにjsを使ったり、
っていういろいろな技術要素が必要になってきます。
質問文から受ける印象として、
webの仕組み、インターネットの仕組みへの理解不足が伺えますので、
コンピュータ科学の基礎から押さえることをおすすめします。
（仕組みの理解が足りていない人に、ネット越しにアドバイスするのは、
双方に無駄な時間と労力が発生しますので。）
今回の目標である「CSSのコード整形サイトを作る」のに必要であろう要素としては、
- htmlフォームにて整形前コードを入力させ、phpで受け取る。
- phpにて何らかのルールでコードを加工する。
- 加工後のコードをhtml出力する。
ってことですが、整形するルールとその実装についてはどうでしょう。
そもそもcssのコードがどうなっていたら汚くて、どうなっていたらきれいなのか、
文法エラーになる書き方はどう処理するか、文法チェックするかしないか、
など深くて複雑になっていきますが、やれますか？
まだまだ目標が高すぎるので、
「フォーム入力されたものをhtmlで出力する」くらいのところを
しっかりできるようになってから、
例えば「日本語の文章の句読点で改行する」みたいな簡素なルールでの整形を実装するだけでも、
十分学習になるかと思いますがいかがでしょうか。
投稿2022/01/07 02:53
退会済みユーザー
総合スコア0
0
コードの整形は
対象の言語のルールや仕様（構文）をきちんと理解しており、”どういう風にフォーマットするか”というルール付けが定義できている上でようやく手を出せるものです。
「学習を始めたばかりで何がわからないのかもわかりません。」とのことですが、それではこちらも「何をアドバイスしたらいいのか分からない」で、お互い分からないのでまともな回答にはなりません。
本当に何も手を付けられないのなら、まずは「何も分からない」という状態を脱するところからではないでしょうか。もう少し簡単なものを作ってみるとか。
いずれにしてもいきなり作り始めるのは悪手です。
API使えば言語の構文チェック程度は出来るでしょうけど、フォーマットは「どういうコードをどういうルールに基づいてフォーマットするか」を決める必要があるので、決めてください。
※ただ無料の既存サービスがある状態で、わざわざ自身にとって難易度の高すぎるものにいきなり手を出すのはどうなんだろう・・・とか思いますが、まぁ無料の既存サービスで表側の挙動くらいは確認できるので、参考にはできるでしょうね。
ただ「PHPのみを用いた」と仰いますが、Webアプリケーションでしたら結局はブラウザから操作するわけですし、HTML・CSS・JavaScriptは必須となるでしょう。
これらPHP含めて「どれにどこの役割を任せられるのか」を決める・調べる・検証する くらいはやっておいたほうが良いと思います。
設計はそれから。作るのは設計が出来てから。
投稿2022/01/07 02:33
総合スコア80850
ありがとうございます。もう少し知識をつける必要がありますね…
焦らずに学習を進めていきたいと思います。
「課題」とのことなので、出題者にもっと要件や前提条件を確認したほうが良いと思います。
大抵はそれまで学んだことで解決可能なのが「課題」だからです（また、ヒントが既にあるはず）
この質問を見ている人は基本赤の他人で前提や背景を知らずに質問内容だけで判断します。
質問内容だけだと「課題」ということも分かりませんし、伝わる内容は「質問者が学習歴２か月で何もわかってない人で、完全自作で取り組もうとしている」という認識になります。
はじめての質問ぽいのでそれこそ「質問もどう書いたらアドバイスがもらいやすいか分からない」状態かと思いますので、下記のヘルプなど確認しつつ、質問内容調整してみると良いです（質問は何度でも編集できますし、そのために「質問への追記修正依頼」があります）
https://teratail.com/help/question-tips
0
CSS の整形に関してはライブラリに丸投げでいいでしょう。ライブラリを使うことも十分な練習になると思います。プログラミング2ヶ月目の初心者が構文解析と整形をすべて自前で行うことはほぼ不可能といっても過言ではないので，気にしないでください。
但し， PHP で CSS の整形を行うニーズはかなり少なく，十分に枯れたライブラリはあまり思いつかないです。ググってみた感じだと，同じように学習用途ぐらいの目的で作られたものは見つかりました。業務に使うのはやめたほうがいいと思いますが，学習のために使わせてもらうぐらいなら十分でしょう。
あなたがこれ以降に調べたほうがいいこと↓
- @php-gres さんの仰るように 「フォーム入力されたものをそのまま HTML で出力する」 を最低限できるようになる
- パッケージマネージャ Composer について調べる
shopping24/css-beautifierを, Composer を使ってインストールする- 「フォーム入力されたものをそのまま HTML で出力する」 を 「フォーム入力されたものを
shopping24/css-beautifierの機能を使って整形して HTML で出力する」に変更する
蛇足: JavaScript の場合
本来 CSS の整形は，Web サーバが必要な PHP を使わずに， Web ブラウザ上で動作する JavaScript という言語を用いて Web ブラウザ上で完結させるほうが適切な題材です。こちらでしたらライブラリも豊富にあると思います。最もメジャーなものが Prettier で，これは実務でも採用されるライブラリです。
インストール方法はいろいろありますが，最もシンプルなものだと HTML 上に <script> タグを設置して少しコードを書くだけで目的を実現できます。以下サンプル
html
1<!doctype html> 2 3<meta charset="UTF-8"> 4<title>Example</title> 5 6<script defer src="https://unpkg.com/prettier@2.5.1/standalone.js"></script> 7<script defer src="https://unpkg.com/prettier@2.5.1/parser-postcss.js"></script> 8<script defer> 9'use strict'; 10 11// ライブラリの機能を使って CSS の文字列をフォーマットする関数 12const format = (data) => prettier.format(data, { 13 parser: 'css', // ここは "postcss" ではなく "css" なので注意 14 plugins: prettierPlugins, 15}); 16 17// 実際に一連の処理を実行する関数 18const run = () => { 19 // textarea 要素を取得 20 const textarea = document.getElementById('textarea'); 21 // フォーマットしたもので value を上書き 22 textarea.value = format(textarea.value); 23}; 24 25// ページの読み込みを待ってこの中身を実行 26window.addEventListener('DOMContentLoaded', () => { 27 // button 要素を取得し， click 時の動作を run に設定 28 document.getElementById('button').addEventListener('click', run); 29}); 30</script> 31 32<textarea id="textarea" cols="50" rows="30">*{margin:0} h1,h2{color:red;font-size:200px}</textarea> 33<button id="button">整形</button>
投稿2022/01/07 04:17
編集2022/01/07 04:24
総合スコア5223
phpから利用できるものがあったんですね、勉強になります。（やるかどうかはさておき）
回答ありがとうございます。課題ではかなり易しい難易度として設問されていたので、自分はこんなものもできないのかと心が折れかけていましたが、回答頂いたものを参考に進めていきたいと思います。
> 課題ではかなり易しい難易度
多分ライブラリを使う前提かなと…ｗ
自前でその部分のロジック書くのは結構しんどいと思いますよ
もしくはアルゴリズムを試すような講義の課題であるとすれば，簡易的でいいので本当に CSS 整形ロジックを書くことを求められている可能性があります。（この場合はライブラリ使ってしまうと「違うそうじゃない」となりそう）
サイト製作が目的なのか，アルゴリズムが目的なのか，どちらなのかを講義の題目や出題者の言葉などから考えてみてください。
アルゴリズムが目的の場合は， CSS を完全に読み取れる必要はないので，自分が想定している範囲のものを処理できるように筋道立てて考えてみましょう。
ブロックレベルのインデントを付けるだけで良ければ大雑把に書けると思います。
・fopen(), fgets() などを使ってファイルを1行ずつ読み込んでいく
・trim() で読み込んだ行をトリミング。但し，"{" が現れてから "}" が現れるまでの間，trim() した行の先頭に半角スペースを4つ付与するようにする
・読み込んで処理した行を echo で出力
これに「カンマ区切りのセレクタの改行」「セミコロン区切りのプロパティの改行」などの整形ロジックも入ってくるとだんだんボリュームが増えて難易度が上がってきますね。どこまでやるか目星をつけた上で，完全なものを作るのは諦めて，現実的な範囲で試してみましょう。
あなたの回答
tips
プレビュー
