Upgrade to Pro — share decks privately, control downloads, hide ads and more …

奥深くて厄介な「改行」と仲良くなる20分

 奥深くて厄介な「改行」と仲良くなる20分

文字と同じく数千年の歴史を誇る「改行」。あまりに身近なものなので、文章を読む時はその存在を意識することすらありません。しかし、開発の場面で改行を扱うとなると、「改行コードが複数パターンある」「CSSに似たような改行系プロパティが色々ある」といったややこしい事実に直面するうえ、挙動が思いのほか複雑なので表示崩れをはじめ様々な観点で思わぬトラブルを招く厄介な側面があります。

本セッションでは、テキストデータ・HTML・CSSのそれぞれにおける改行周りの厄介ごとを文字入力の歴史やタイポグラフィの知識などと絡めて紹介。さらにテキストデータにおける改行の扱い方から改行を制御する多種多様なCSSプロパティの使い分けまで、実務に役立つ改行のアレコレを扱います。

※本資料は、2025年9月6日に札幌市・エア・ウォーターの森で開催されたイベント「フロントエンドカンファレンス北海道2025」における登壇資料です。
https://fortee.jp/frontend-conf-hokkaido-2025/proposal/e4d66f12-5ab8-40ed-bc3b-ec30df268023

Avatar for おぐえもん

おぐえもん

September 06, 2025
Tweet

More Decks by おぐえもん

Other Decks in Programming

Transcript

  1. ςΩετϑΝΠϧͷվߦͷ͋Δ͋Δ w ಡΈࠐΜͩϑΝΠϧΛaOͰ෼ׂͨ͠Βจࣈ਺͕߹Θͳ͍͜ͱ͕͋Δ w ʢ೥·Ͱ͸ʣ.BDͰॻ͍ͨςΩετΛ 8JOEPXTͷϝϞாͰ։͘ͱߦͰදࣔ͞Εͨ hoge fuga const content

    = fs.readFileSync("./test.txt", "utf8"); const lines = content.split("\n") lines.forEach(line => { console.log(line.length); }); UFTUUYU OPEFUFTUKT    UFTUKT ࣮ߦ݁Ռ ߦ໨͸จࣈ̇ ͳͥͱग़Δ <ग़య>IUUQTHJHB[JOFOFUOFXTFYUFOEFEFPMJOOPUFQBE aOͰ෼ׂˠ֤ߦͷจࣈ਺Λग़ྗ
  2. վߦίʔυͷ࣮ଶ w γεςϜʹΑͬͯҟͳΓɺେ͖͘छྨ͋Δ w ొ৔͢Δจࣈ w aSɹʹ$3ʢΩϟϦοδϦλʔϯʣ w aOɹʹ-'ʢϥΠϯϑΟʔϧυʣ γεςϜ

    վߦίʔυ 8JOEPXT aSaOʢY%Y"ʣ 6OJYܥ04ʢNBD04ͳͲʣ aOʢY"ʣ ੈلͷ.BDʢ.BD04Ҏલʣ aSʢY%ʣ ˢ͖ͬ͞ͷUYUϑΝΠϧ͸ ɹaSaOͰվߦ͞Ε͍ͯͨͷͩ
  3. $3ͱ-'ͬͯԿʁ w $3ʢΩϟϦοδϦλʔϯʣˠ෮ؼ w -'ʢϥΠϯϑΟʔϧυʣˠվߦ w ͲͪΒ΋λΠϓϥΠλʔ༝དྷͷ੍ޚจࣈ w $3ˠࢴΛӈʹಈ͔͠ೖྗҐஔΛߦ಄ʹ໭͢ w

    -'ˠࢴΛ্ʹಈ͔͠ೖྗҐஔΛߦԼʹҠ͢ w λΠϓϥΠλʔ͸$3ͱ-'ͷૢ࡞Λ߹Θͤͯɺ ॳΊͯ࣍ͷߦͷઌ಄ʹҠಈͰ͖ͨ w ίϯϐϡʔλͷೖग़ྗʹ࢖ͬͨςϨλΠϓ୺຤΋ ಉ༷ͷ࢓૊ΈͰಈ͍͍ͯͨͷͰɺ*5ͷੈքʹӨڹΛ༩͑ͨ $3͸ࠨҠಈˡ -'͸ԼҠಈˣ
  4. $3ͱ-'ͬͯԿʁ վߦͱ͍͏΋ͷ͸ɺ Χʔιϧͷߦ಄΁ͷҠಈͱ Լߦ΁ͷҠಈΛ߹ΘͤΔ͜ͱͰ ॳΊͯͰ͖ΔΜ͔ͩΒɺ վߦΛaSaOͰදݱ͢Δͷ͸ ࣗવͩΖ ͸ʙʙʁ ԼߦʹҠಈͯ͠ߦ಄ʹҠಈ͠ͳ ͍έʔεͳΜͯ΄΅ແ͍͠ɺ

    େੲͷػց੍ޚʹनΘΕͣ վߦΛaOͷจࣈͰදݱ͢Δͷ ͕߹ཧతͩΖ͕ ˞8JOEPXTͰaSaO͕࠾༻͞Ε͍ͯΔͷ͸ɺ ɹ8JOEPXTͷલ਎Ͱ͋Δ.4%04ʢ೥ʣ͕ӨڹΛड͚͍ͯΔ ɹ$1.ʢ೥ʣͱ͍͏04ͰaSaO͕࠾༻͞Ε͍ͯͨͱ͍͏ྺ࢙తܦҢʹΑΔ
  5. $44ͷվߦབྷΈϓϩύςΟͷͬ͘͟Γ੔ཧ MJOFCSFBL XIJUFTQBDF PWFS fl PXXSBQ UFYUXSBQ XPSECSFBL IZQIFOT Ԥจͷ୯ޠʗ೔தؖจͷ్தͰࣗಈͰվߦ͞ΕΔΑ͏ʹ͢Δ͔

    ೔தؖจͷېଇॲཧ ϗϫΠτεϖʔεͷ౷߹ʗࣗಈվߦͷѻ͍ ςΩετΛվߦ͢Δํ๏ ᷓΕͦ͏ͳͱ͖ʹ෼ׂෆՄͷจࣈྻͷ్தͰվߦΛೖΕΔ͔ ϋΠϑωʔγϣϯͷํ๏ த్൒୺ͳվߦͷ ڐ༰౓߹͍ վߦ͢ΔҐஔ ېଇॲཧ ϋΠϑωʔγϣϯ ʢچ໊ɿXPSEXSBQʣ
  6. ᶃXPSECSFBL w Ԥจͷ୯ޠʗ೔தؖจͷ్தͰࣗಈͰվߦ͞ΕΔΑ͏ʹ͢Δ͔ OPSNBM Ԥจͷ୯ޠத͸/(ʗ೔தؖจத͸0,ʢطఆͷվߦنଇʣ CSFBLBMM Ԥจͷ୯ޠதʗ೔தؖจதͷͲͪΒ΋0, LFFQBMM Ԥจͷ୯ޠதʗ೔தؖจதͷͲͪΒ΋/( BVUPQISBTF

    جຊOPSNBMͱಉ༷͕ͩɺվߦҐஔΛࣗવʹ͢Δ CSFBLXPSE جຊOPSNBMͱಉ༷͕ͩɺඞཁͳΒԤจͷ୯ޠ్தͰ΋վߦΛೖΕΔ Ԥจͷ௕୯ޠ͸ᷓΕΔ ᷓΕͳ͍ Ԥจͷ௕୯ޠͱ೔தؖจͷ௕จ͸ᷓΕΔ Ԥจͷ௕୯ޠ͸ᷓΕΔ ᷓΕͳ͍ ʢҰ෦ϒϥ΢βͷΈʣ ʢඇਪ঑ʣ
  7. ᶄPWFSGMPXXSBQʢچ໊ɿXPSEXSBQʣ w ᷓΕͦ͏ͳͱ͖ɺ෼ׂෆՄͷจࣈྻͷ్தʹࣗಈͰվߦΛೖΕΔ͔ OPSNBM ෼ׂෆՄͷจࣈྻͷ్தͰվߦΛೖΕͳ͍ BOZXIFSF վߦΛೖΕΔ CSFBLXPSE վߦΛೖΕΔ Ԥจͷ௕୯ޠ͸ᷓΕΔ

    ᷓΕͳ͍ ᷓΕͳ͍ XJEUINJODPOUFOUͷͱ͖ʹԣ෯ͷ୹͞Λ௥ٻͨ͠ ϋϯάϦʔͳ୯ޠ಺վߦΛೖΕΔ XJEUINJODPOUFOUͷͱ͖ʹ୯ޠ಺վߦΛೖΕͳ͍ ͓ͱͳ͕͋͠͞Δ
  8. ᶅXIJUFTQBDF w ϗϫΠτεϖʔεͷ౷߹༗ແͱɺվߦจࣈaOͷѻ͍ɾࣗಈվߦͷ༗ແ w ˢͷҟͳΔͭͷ੍ޚ͕͍ࠞͬͯ͟Δ͕ɺ͜͜Ͱ͸վߦʹߜͬͯ঺հ OPSNBM CSʹՃ͑ɺඞཁͳΒࣗಈͰվߦ͢ΔʢˠվߦจࣈͰվߦ͠ͳ͍ʣ OPXSBQ CSͰ͔͠վߦ͠ͳ͍ QSF

    CSͱվߦจࣈͰ͔͠վߦ͠ͳ͍ʢˠࣗಈͰվߦ͠ͳ͍ʣ QSFXSBQ CSͱվߦจࣈʹՃ͑ɺඞཁͳΒࣗಈͰվߦ͢Δ QSFMJOF ಉ্ʢϗϫΠτεϖʔε໘ͷҧ͍͕͋Δʣ CSFBLTQBDFT CSͱվߦจࣈʹՃ͑ɺඞཁͳΒࣗಈͰվߦ͢Δ͕ɺ ϗϫΠτεϖʔεؒͰ΋վߦ͢Δ͔΋
  9. OPSNBM QSF OPXSBQ ᶅXIJUFTQBDF w վߦจࣈaOͷѻ͍ɾࣗಈվߦͷ༗ແ EJWTUZMFXIJUFTQBDF̋̋ ͜Ε͸݁ߏ௕͍ߦ໨Ͱ͢ΘΑ ߦ໨CSߦ໨ EJW

    QSFXSBQ aO͸ۭനʹ ᷓΕΔ ᷓΕΔ ᷓΕͦ͏ͳΒվߦ aOͰվߦ͞ΕΔ aOͰվߦ͞ΕΔ ԿΛબΜͰ΋CSͰվߦ͞ΕΔ͜ͱʹมΘΓͳ͍
  10. ᶆUFYUXSBQ w ςΩετͷվߦ༗ແPSͦͷํ๏Λ੍ޚ w UFYUXSBQNPEFͱUFYUXSBQTUZMFͷ஋ͷͲͪΒ͔Λͭࢦఆ͢Δ XSBQ OPXSBQ ࣗಈͰվߦ͠ͳ͍ BVUP ϨΠΞ΢τΑΓ଎౓ॏࢹͰϒϥ΢β޷ΈͷΞϧΰϦζϜͰվߦ͢Δ

    CBMBODF ֤ߦͷจࣈ਺ͷόϥϯεΛߟྀͯ͠վߦ͢Δ TUBCMF ʢೖྗཝ޲͚ʣجຊBVUPͱಉ͕ͩ͡ɺΧʔιϧҎલͷߦͷվߦΛม͑ͳ͍ ඞཁͳΒࣗಈͰվߦ͢Δ QSFUUZ ଎౓ΑΓϨΠΞ΢τॏࢹͰվߦ͢ΔʢඇରԠϒϥ΢β͋Γʣ վߦํ๏ʢUFYUXSBQTUZMF̋̋ͷ஋ʣ վߦ༗ແʢUFYUXSBQNPEF̋̋ͷ஋ʣ
  11. ېଇॲཧͱ͸ʁ w ׽ࣈจԽݍͷจॻ࡞੒ɾ૊൛ʹ͓͚Δېࢭࣄ߲΁ͷରԠॲཧ w ྫʣߦ಄ېଇจࣈɿʣɺͬɺ۟ಡ఺ɺʙɺʂɹͳͲʜ w ྫʣߦ຤ېଇจࣈɿʢɹͳͲʜ w ྫʣ෼཭ېଇɿʜʜɺ̋ʑɺ̋LHͳͲʜ w

    ग़൛ࣾʹΑͬͯඍົʹҟͳΔ͕ɺ+*49Ͱن֨Խ͞Ε͍ͯΔ ͪΐͬͱ଴͍ͬͯͩ͘͞ɻࠤ ʑ໦͞ΜԿͯ͠ΔΜͰ͔͢ʢ ౖʣઌੜʹϒνΪϨΒΕ·͢ ɻ ͪΐͬͱ଴͍ͬͯͩ͘͞ɻ ࠤʑ໦͞ΜԿͯ͠ΔΜͰ͔͢ ʢౖʣઌੜʹϒνΪϨΒΕ· ͢ɻ /(ྫ ېଇॲཧޙ
  12. ᶇMJOFCSFBL w ݫ͍͠΄Ͳېଇॲཧͷର৅͕޿͕Δ MPPTF TUSJDU OPSNBM BOZXIFSF ېଇࣄ߲Λແࢹͨ͠ ແ๏஍ଳ ׅހ΍۟ಡ఺पΓͷ

    ېଇࣄ߲͕ॲཧ͞Εͨ ̋ʑͷ෼ׂʹؔ͢Δې ଇࣄ߲͕ॲཧ͞Εͨ খ͍͞Ծ໊จࣈʹ ؔ͢Δېଇࣄ߲͕ ॲཧ͞Εͨ
  13. $44ͷվߦབྷΈϓϩύςΟͷͬ͘͟Γ੔ཧ MJOFCSFBL XIJUFTQBDF PWFS fl PXXSBQ UFYUXSBQ XPSECSFBL IZQIFOT Ԥจͷ୯ޠʗ೔தؖจͷ్தͰࣗಈͰվߦ͞ΕΔΑ͏ʹ͢Δ͔

    ೔தؖจͷېଇॲཧ ϗϫΠτεϖʔεͷ౷߹ʗࣗಈվߦͷѻ͍ ςΩετΛվߦ͢Δํ๏ ᷓΕͦ͏ͳͱ͖ʹ෼ׂෆՄͷจࣈྻͷ్தͰվߦΛೖΕΔ͔ ϋΠϑωʔγϣϯͷํ๏ த్൒୺ͳվߦͷ ڐ༰౓߹͍ վߦ͢ΔҐஔ ېଇॲཧ ϋΠϑωʔγϣϯ ʢچ໊ɿXPSEXSBQʣ
  14. ॳظ஋Ҏ֎ΛબͿݸਓతͳ৚݅ MJOFCSFBL XIJUFTQBDF PWFS fl PXXSBQ UFYUXSBQ XPSECSFBL IZQIFOT ͩ͜ΘΓͳ͘ͱʹ͔͘վߦ͍ͤͨ͞ʢͱʹ͔ᷓ͘Εͳ͘ͳ͍ʣͳΒCSFBLBMMɻ

    XCSͰͷ੍ޚΛ೔ຊޠʹ΋ޮ͔͍ͤͨͳΒLFFQBMMɻ ېଇॲཧʹͩ͜ΘΓ͕͋Ε͹બ୒ʢجຊબ͹ͳ͍ʣ ʢˣ͕8JEFMZ"WBJMBCMFʹͳΔདྷ೥·Ͱ͸ʣվߦͨ͘͠ͳ͍࣌ʹOPXSBQ QSFʙQSFͰࣗಈͰվߦΛೖΕ͍ͨͳΒQSFXSBQ վߦͨ͘͠ͳ͍࣌ʹOPXSBQ ʙߦ͘Β͍ͷݟग़͠ʹCBMBODF͕ཉ͘͠ͳΔ͜ͱ͕͋Δ͔΋ʁ ӳ୯ޠதʹվߦͯ͠΋ྑ͍ͳΒCSFBLXPSE ϋΠϑωʔγϣϯʹͩ͜ΘΓ͕͋Ε͹બ୒ʢجຊબ͹ͳ͍ʣ ʢچ໊ɿXPSEXSBQʣ