Web開発:フロントエンド

現代はWeb社会なので、プログラミングよりもHTMLタグやCSSやデザインセンスの方が必要かもしれません。なぜなら世の中は印刷物を含めた文字情報こそ利用者が多いからです。デザインセンスはAI(人工知能)では置き換えらない物もあり、それこそが売れる要素でもあります。

またプログラミングも初心者でも出来るGUI化が進んでいます。これは1つの言語を覚えるよりは、多数のフレームワークなどを知り、ツマミ食いをする一番良い所取りがベストということです。これを学習コストといい、無駄に専門的になるのもリスクがあります。

React (JavaScrptライブラリ)

  • このWebサイトで使用しています。
  • 従来のJavaScriptは使いづらいのでReactとなります。
  • Reactの高速表示版がNext.jsになりますがReactほど普及していません。
  • ソースコードや求人案件で多いのは、ざっくりいうとReactです。

JSXやMDXでXMLライクな投稿や安全に簡単に保管が出来る

  • JSXとはJavaScrptのXML版でReactのために作られたようです。
  • MDXとはMarkdownのJSX版でNext.jsなどでも利用されています。
  • SQLなどと違いHTMLのようなものなので別サーバーにならずに安全で簡単です。
  • SQLなどと違い大企業などで行われる大量のデータ処理には向きません。
  • SQLなどと違い描画速度が早いので集客であるSEO向きです。

画像表示の方法

この項目は特に一部のReactアプリに限った事かもしれません。

  • httpsからの絶対パスを使わないと画像が表示できません。
    • ドメイン付きの絶対パスだと引っ越しが大変です。
  • 装飾関係のHTMLタグが使用できずに、CSSは使えます。
  • markdown書類.mdではimgタグは使えないようです。

GitHubなどとの関係

  • GitHubなどでは画像が相対パスでも表示できます。
  • GitHubで作成書類を更新しないと更新されません。
      • インデントが他ではこのようになりません。
  • 対象画面の更新ではなくGitHubを更新し、そのリンク先に飛ぶと更新されます。
  • 失敗ボタンを押すと原因はログから分かります。

Next.js (Reactフレームワーク)

  • このWebサイト以外の私のサイトで使用しています。
  • Reactは最初に表示される画面が白くなりNext.jsよりも描画が遅いです。
  • ソースコードはReactよりは少ないですが、他のフレームワークよりは多いです。
  • 日本での求人案件は少ないですが、今後は増えると思います。
  • 現在は世界はNext.jsで日本はNuxt.jsの使用が多いです。
  • PHPやRailsの使用が多いのは、技術者確保のためだと思われます。

非正式なHTMLタグは表示できないので正確

  • <br>やmetaタグなどは<br />などにしないと表示できません。
  • 非正式な廃止タグを使うと、SEO能力が落ち集客できません。
  • 廃止タグを使うと、そのうちブラウザでもサポート終了で表示できなくなります。
  • 廃止タグをNext.js開発で使用しデプロイすると英語の「失敗」をGitHubでは表示し、対象サイトは編集前の画面です。

TypeScript

  • このWebサイト以外の私のサイトで使用しています。
  • インタプリタ言語ですが静的型付け出来ます。
  • TypeScript書類.tsをJavaScript書類.jsにトランスパイル(翻訳)します。
  • ローカルホストではNode.jsをインストールすると使用できます。

TypeScriptは他にフレームワークと組み合わせでも使える

  • 例えばNext.jsとTypescriptの組み合わせで、描画速度が早く正確になります。