自言語の文法書を公開するにあたって

(oωo)/ soxen!
はくメなです。最近はラーメンズを生活のBGMにしてからずっと健康です。

はじめに

昨日公開された記事はもう読みましたか？　今回の記事は昨日の記事を読んでること前提で進むので、まだ読んでないひとは今すぐ読んできて！

読んだね？

ネタバレ食らったとは言わせないよ？

本当にいいね？

大丈夫ね？

たぶんこの文章量だとギリ今回の内容見えちゃうからちょっと嵩増しするよ？

もう大丈夫かな？

ギリキツそうかな？

もう書く内容が無いよ？

早く本編に行きたいけど大丈夫そうかな？

いいね？

流石にここまでやって読んでませんでしたはナシね？

本当大丈夫ね？

ここまで文章の形変だったら流石に気付くよね？

あ　もうそろそろ大丈夫かな？

よさそうだね？

んじゃ本編いってみよう

備忘録を残してみよう

文法書を書き上げて整えて公開して……　という一連の流れの中で結構手こずったフェーズがいくつかあったので、それの共有をしていきます！
ほとんどのことについてGoogle先生に訊けば出てくるので多分そこまでの存在価値は無いですが、偶然私とおんなじ状況にあるひとが偶然この記事に辿り着いてくれればなあ～、という気持ちだけでとにかく公開しちゃいます。よろしくです。

書くとき

項目で分ける

文法書とかじゃなく文章としての話になりますが、多分文章の適切な分類はした方が心地良いです。
この記事もそれっぽい見出しをちょこちょこ付けてますし、「あの内容どこに書いてあるかな」みたいなときにきっと便利になる、はず。
分類の仕方について、私はシャレイア語のそれをほぼそのまま使っているというか、良い分類を考えた結果こうなったというかです。

公用文っぽく書く

公用文（国とかのちゃんとした機関が出す文章）には、「公用文っぽく書きなさいよ」というルールがあるらしくて、これは私たちでも見ることができるっぽいです。例えば常用漢字の表に記載の無い記し方はするなよ、みたいな感じ。うろ覚えですが。
これを守ると、それっぽさが増すような気がします。それっぽさ、大事。今載せたリンクの内容は長すぎて私も0文字しか読んでないですが、これにのっとるだけでもそれっぽくなると思います。私はこれでそれっぽくしました。

言葉遣い

一応「ある言語の文法をまとめてる」というテイではあるので、例えば何かの語の用例について説明するときには「～を使う。」じゃなく「～が使われる。」って書いてます。使うっつっちゃったらアンタはその言語のこと全部知ってんのかいってなりますからね。

ちょくちょく例文を挟む

内容に関する例文があるだけで、なんかそれっぽくなります。
文章のシルエットにメリハリがつくのが理由なんでしょうか。あんまりよく分かってないです。あと実用性についても例文はかなり貢献する部分があると思います。実際の文を見れるのは多分便利です。

見直しをする

一回書き上げたら、見直しをするといいです。こういうのってテスト以外でも効力もつんだなあとなりました。
例えば書き始めた初期の文章とかは上に書いたルールを微妙に守れてないケースが多々あるので、そういうのの確認として見直しは物凄く有効です。あらゆる文章では見直しを取り入れてみよう。

整えるとき

環境をつくる

今回私は、えーと、何を使ったっけ……
……えー、はい！　今回私は文法書を載せるページ達をVite、React、TypeScript、SCSSとかを使ってつくりました。とりあえずサイトをつくるのに必要だろうな～という便利ツールをとにかく使ってみた感じです。
Viteは制作の確認とかをスムーズにするやつ、Reactはページをパーツごとにつくれたりするやつ、TypeScriptは単に私が慣れてるプログラミング言語、SCSSはページの見た目を整えるためのプログラミング言語です。これが良い選択なのかはよく分かってないです。

ヘッダーをつくる

この機構はどうつくったか一切覚えてないので、実際のコードを引っ張っちゃいますか！

.l-header {
    align-items: center;
    display: flex;
    height: 100px;
    top: 0;
    position: fixed;
    width: 100vw;
    ……
}

.l-main {
    margin: 125px 15vw 25px;
    ……
}

ほうほう、ヘッダーの設定で位置の固定と変な隙間の排除、本編の設定でヘッダー分内容を下に下ろしてますね……
もう全然分かんないや……

まあとにかく、これからヘッダーを実装するひととかはこのコードを参考にしてみるといいんじゃないでしょうか。責任は一切取れませんが。

FLOCSSとBEMを活用する

FLOCSSという、見た目を整えるのがややラクになる考え方があるらしいです。同じようなものでBEMという考え方もあるらしく、私は両方の考え方にのっとってプログラムを書いてます。
でも、この考え方は見た目をどう分類するかなので、正直個人サイト程度の規模でこれを活用するのは逆効果かもしれないです……（私は私が満足するのでこれでいいのです）

公開するとき

ドメインとレンタルサーバを繋ぐ

ドメインとレンタルサーバを手に入れるだけだと何にもならなくて、その二つを繋げるというフェーズを挟まないと色々できないみたいなんです。そこでやや手こずったのでそれを共有！　言葉は間違ってるかもしれません！

まず、「ドメイン」てのはただの文字列で、これを「レンタルサーバ」というインターネットの住所と繋げるためには「ネームサーバ（またはDNSサーバ）」を仲介役として利用する必要があるんですね。んで、この仲介役のための指示書を「DNSレコード」というらしいです。

じゃあ私はどうやったかというと、まずレンタルサーバの設定にあったDNSレコードの中身を目で確認しました。そこに、「NS」つまり使うネームサーバはどこかが記されてたので、それを覚えました。覚えたら、ドメインの設定にあったネームサーバの設定で今さっき覚えたネームサーバの場所をまんま打ち込みました。
そしたら、なんか、いけました。フィーリングフィーリング。

レンタルサーバにファイル・フォルダを放る

諸々の設定が済んだら、あとはこっちで勝手につくったファイル達をレンタルサーバにぶち込むだけです。
私は「FileZilla」っていうソフトを使いましたが、あとからレンタルサーバの設定をちゃんと見たらこんなソフト要らずでファイル放れたみたいです。
まあ結果変わんないだから！　あの「○○のファイルを転送完了」みたいなたくさんの文字かっこよかったから！

.htaccessを編集する

実はあの日サイトが閲覧できるのを確認したあと、一個だけ不具合を修正してました。トップページ以外の場所でリロードをすると、何故か404エラーを吐いてしまうのです。
色々検索したら、思い当たる内容のが見つかりました。
私は今回のサイトをつくるのにReactという便利ツールを使ってて、そのシステムの色々が理由で変になってたみたいです。（実はReactでつくったサイトは構造をURLで管理しているのではなく、ドメインの後ろにスラッシュ付きの構造メモをくっつけてるだけらしい……）

これを解決するにはサイト自体をいじくらねば、ということで「.htaccess」とかいう謎のファイルに謎の呪文を記すことになりました。内容はイマイチよく分かってません。フィーリングフィーリング。

おわりに

以上が備忘録です！　後半ずっと技術の話でしたね！
あとずっと「フィーリング」とか「多分」とか色んなことをぼかしてましたね！　そんなんでもなんとかなるって結論づけてください！

みなさんも自サイト建ててみてはいかがでしょうか！（無責任な締め）
あ、お金はかかるけどね！　そこはもう割り切ろう！

それでは、temoxi!