イイダリョウのブログ。まとめあるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで「CodePen」の出番ですよキミィ!CodePenなら開発環境なしでこれらの代替言語をお手軽体験できるんです!片っ端から体験した記事を下記にまとめます。Pug】HTMLテンプレートエンジン事始めまず最初にCodePenで設定を変更する方法を解説しています。BrowserCodePenではHTMLの代替言語として「Emmet」「Haml」「Markdown」「Slim」「Pug」に対応しており、その記法の違いと感想を書きました。「Emmet」「Markdown」はHTMLテンプレートエンジンではありません。Emmetはテキストエディタによく搭載されている拡張機能で、Markdownはブログによく設定されている拡張機能です。Emmet:テキストエディタの拡張機能。コードが書きやすいMarkdown:ブログの拡張機能。*1「Haml」「Slim」「Pug」がHTMLテンプレートエンジンです。Haml:先発テンプレートエンジン(Ruby環境)Slim:Hamlよりシンプル。(Ruby環境)Pug:Hamlよりシンプル。事始めお次はAltCSS。CSSをシンプルにする代替言語です!CodePenでは「LESS」「SCSS」「Sass」「Stylus」「PostCSS」に対応しており、その記法の違いと感想を書きました。まとめると下記のような感じです。CSSと似た書き方でより便利に書きたい→LESS、SCSS。コンパイルをNodeで行いたい→LESS。いや、Rubyで行いたい→SCSS。コンパイルはRuby。書き方も全てRubyライクでスタイリッシュに行きたい!→Sassいろんな書き方をフレキシブルに混在させたい。→Stylusまたは他の人が作ったCSSを修正することになった。→Stylus次世代CSSがどのような書き方になるか体験したい。事始め最後、AltJSを見ていきまShow!JSをシンプルにする代替言語たちです。CodePenでは「CoffeeScript」「LiveScript」「TypeScript」「Babel」に対応しており、その記法の違いと感想を書きました!ざっくりまとめるとこんな感じ。LiveScriptJSライクでいいけど型を厳密にしたいよ。クモのようにコツコツとidr-zz.hatenablog.comまとめ全体に共通する要点は下記だと思う。Rubyっぽく書きたいか?フロント言語っぽい書き方のまま楽がしたいか前者はサーバサイドがバックボーンなエンジニアさんが「新しい書式の学習コスト無しにフロントエンドをいじりたい」という需要から生まれたんじゃないかな?WebデザイナーにとってはRuby記法は逆に学習コストになる。将来サーバサイドでRybyでWebアプリを作ってみたい人は逆にここで慣れていくと入りやすいのかもしれないですね!便利な代替言語たちですが実際に使おうと思うと、その前に開発環境の構築が必要です。そのため、ついつい腰が重くなってしまう人は多いと思う。(そう、私もだw)まずはCodePenで経験をしてみて「うん、これは環境構築してでも採用する価値があるな!」と感じたらガッツリ取り組むのがいいと思います。20:59Tweet関連記事2019-10-02【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)以前の記事で紹介したテンプレートエンジンPug。Node.jsでトラ...2019-06-27webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮)Webデザイナーとフロントエンドエンジニアを分かつキーワードが...2019-04-02【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月...Web業界(フロントエンド〜サーバサイド)の記事には次々と新し...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。