🙄

CodepenでMarkdownやSCSSやTypeScriptで作れるWeb画面をデプロイする

2022/08/26に公開

オブジェクト指向

ECMAScript

構造化言語

tech

コードペンとは

Codepenとは、上記のフレームなソースコードとプレビュー画面が見れるサービスです。IT派遣などでのポートフォリオなどにしても良いでしょう。これをデプロイと言ってますが、正確にはソフトウエアを設置ですが、「求職者はデプロイしてなんぼ」という英語も覚えないと勝ち抜けません。コードペンでもEmbedなどの英語を読めないとブログで載せられません。

Gitとの違い

Gitなどですと、多くのソースがあるので局部的に説明がしづらく、そういう時はCodepenは便利です。HTMLが組み込めるブログやホームページなどで、最も有効活用できると思います。

他のサイトとの違い

Codepenでは、HTML・Markdownなどや、CSS・SCSSなどや、JavaScript・Babel・TypScriptなどしか扱っていません。方や公式サイトでGo言語ではGo、SvelteではHTMLの部分が.svelteで扱われていますが、その言語のみです。

最終的にはデプロイできるサーバーを使う

上記などからして、MongoDBなどと連携が出来る、大規模システムなどが作れるというポートフォリオは、MongoDBの公式サイトのクラウドを使ったり、Next.jsのの公式サイトを使っても良いでしょう。

Codepenのようにソースとプレビュー画面を同時に表示をしたいなら、HTML書類などでフレームにしても良いかもしれません。

これからはHTMLタグではなくMarkdown？

Markdownは簡単で軽いので、普及は進むでしょう。しかし専門家となると、HTML5とそれ以前のバージョンの廃止タグの知識を求められます。また上記のCodepenでなぜか文章も下の方になると、##が効かなくなりました。

これからはCSSではなくSCSS？

SCSSはスクリプトになるほど多機能なので普及するかもしれません。しかし専門家となると、今はCSS3の知識が多く求められています。またSCSSはRubyでもあり、Rubyのニーズが落ちているので、どうなんでしょうか？

現実的な仕事はJavaScriptではなくTypeScript？

JavaScriptで作るのが面倒なので、人気があるのがReactです。またこれらの動的型付け言語は、専門家の人たちは不正確になりやすいので、静的型付けなTypeScriptを好みます。

また大規模システムで描画速度が早いNext.jsや、ReactやVue.jsのように仮想DOMを使わないSvelte（公式サイトなどを参照）などでは、多くはTypeScriptを利用しています。

Codepenが最強なエディターか？

他にも人気があるのはVScodeですが、これは外部に公開できません。ただし目的は見せるのではなく、アプリを売るなので、宣伝し作り込むということになります。

またCodepenのように局部的ではない、大規模なGitもあります。これらは失敗した履歴などを残しています。

そして他の無料のエディターには、自分の作業用な自動タグ出力機能なマクロを作れるものもあり、これはVSスクリプトやJavaScriptなどで作れます。

私の希望としては、格付けするよりも、更にドンドンと便利なサービスが増えることを望みあす。なぜなら過去に便利なサービスが、ドンドンと閉鎖していったからです。