Articles

Webフレームワークとは何か、なぜフレームワークを使うべきなのか

by admin

←Home

「フレームワーク」という言葉は、コードに関連してよく使われます。 では、フレームワークとは一体何なのでしょうか。 フレームワークについて話すとき、フレームワークは通常、フロントエンド、バックエンド、および CSS またはユーザー インターフェイスのフレームワークの 3 つのカテゴリに分類されます。 しかし、フレームワークが何であるかを知ったとしても、どれを学び、使うべきなのか、そして、それはなぜなのでしょうか？ この投稿では、フレームワークとは何か、どのようなフレームワークがあるのか、そして、プロジェクトにどのようなフレームワークを使用すべきなのかについて、どのように判断すればよいのかについて説明します。 多くはユーザー認証、レンダリングするページ、データベースへの接続、見ることのできるプロファイル、情報の様式化されたフィードなどを持っています。 しかし、代わりにそれを行ってくれるツールもたくさんあります。

さらに、アプリケーションを構築するとき、多くの場合、より効率的になり、他の開発者がコードを理解しやすくなるように、特定の方法でコードをフォーマットしたいと思うものです。 Web フレームワークは、アプリケーションの構造を実現するのに役立ち、また、余分な作業をせずに追加できる機能を与えてくれます。

コードは書かれたときよりも何度も読まれます。そして、他の開発者と作業するときに、特定のタスクのコードがどこに書かれているかを知って、自分のコードでそれを使用できるようにすることは非常に重要です。 また、フレームワークには、コードの書き方や構造に関する規約があり、開発者がコードを書く方法を標準化しています。

ほとんどの Web サイトは、非常によく似た（同一とは言えない）構造を共有しています。 フレームワークの目的は、開発者がゼロからやり直す必要がなく、提供されたコードを再利用できるように、共通の構造を提供することです。 このように、フレームワークにより、作業の多くを切り離し、多くの時間を節約することができます。

要約すると、車輪の再発明は必要ありません。

from Awwwards.com

その裏側でフレームワークはただのコード ライブラリ (つまり他の人たちのコード) です、そして、人気のあるものはオープンソースです！

は、フレームワークがどのようなものであるかということを説明します。 ですから、ライブラリのコードをオンラインで見ることができます！

Backend vs Frontend

  • Web アプリケーションのフロントエンドは、ユーザーが見て、操作する部分です。 これは、Web デザインとサイトのインタラクションで構成されています。 プログラミング言語の観点から、これはほとんど常にページの CSS、HTML、および JavaScript で構成されます。

  • バックエンドは、サーバー、データベース、およびそれらと相互作用するコードで構成されます。 これはまた、サイトのフロントエンドに動的なデータを提供するコードで構成されています。 これは、ほとんどのプログラミング言語で処理することができます。

What I Wish I Knew Before Learning to Code Ebook Cover

コードを学ぶためのアドバイスをもっと知りたいですか？

私の無料Eブックをダウンロードしてください。

ユーザー インターフェイス フレームワーク

ユーザー インターフェイス フレームワークは、スタイリッシュでプロフェッショナルな外観の Web アプリケーションの作成を支援します。 ほとんどの場合、要素を整列させるためのある種のグリッド システムが含まれており、配色を行い、CSS を使用して HTML コンポーネントをスタイル化し、クリーンでプロフェッショナルな外観を実現します。 これらはフロントエンドの領域です。しかし、通常、フロントエンド・フレームワークというと、JavaScriptフレームワークのことを指します。

ユーザー インターフェイス フレームワークには次のようなものがあります。

  • Bootstrap
    • 非常によく知られており、Twitter によって構築された
    • 習得が簡単でプロフェッショナルに見える
    • 「Bootstrap サイト」とすぐにわかる
    • コンポーネントをカスタマイズするのが難しい
  • Materialize
    • きれいに見える

      • 。

    • Bootstrap よりも少し「楽しい」
    • 多くのスタイルとカラー オプション
    • Google の Material スタイル ガイドに準拠
  • Foundation
    • 多くの例
    • プロフェッショナルな外観
  • Semantic UI
    • 多くの組み込み ———————-

      • ———————- プロフェッショナ ルなUI

        • ———————-

    • ———————- ———————- プロフェッショナ ルな外観 ———————- ———————-

  • 内蔵された
  • Grommet
    • Has heavily focus on accessibility
    • Looks really clean
    • Not as used as some of others
    • Made for the React JS (後で見る別のフレームワーク)

    UI フレームワークの選択

    ユーザー インターフェイス フレームワークの選択は、ほとんどが外観とサイトの目標における個人の好みに帰結します。 異なるスタイルは、異なる業界にアピールするか、ユーザーに異なるメッセージを伝える可能性があります。 これらのいくつかは、次のとおりです。

    • Vue
      • Easy to learn
      • Very fast
      • All tools associated with it are packaged well
      • Takes parts from Angular and React and optimizes them
      • less widely adopted than some others
      • Flexible — （柔軟性がある）。
    • AngularJS
      • Built by Google
      • Well supported
      • Huge number of features
      • Improve applications scalability
      • Difficult to debug
      • Large Likes! Angular 2+
        • Built by Google
        • Well supported
        • Encourages reusability
        • Improve application scalability
        • Large learning curve
      • Built by Facebook
      • Bundles frontend code into components
      • Organize code and data to make code more reusable
      • Large learning curve
    • Ember
      • Gives a large amount of the future…?
      • Opinionated (You have to use its formatting)
      • Steep learning curve

      Choice of a Frontend Frameworks

      The world of frontend frameworks are evolving especially fast, 数ヶ月ごとに新しいフロントエンドフレームワークが登場しているような気がします。

      React と Vue はフレームワークではなくライブラリだと主張する人もいますが、多くの人がフレームワークと考えているので、私はそれらを含めました！

      バックエンド フレームワーク

      バックエンド フレームワークはもっと種類が豊富です。 さまざまなプログラミング言語で書かれ、さまざまな機能を備えています。 以下は、上記のリストと同様に、アプリケーション バックエンドを記述するために存在するいくつかのフレームワークの非常に不完全なリストです。

      • Spring MVC
        • Java (習得がより難しい言語)
        • 非常に速い
        • 意見が少ない
      • Django
        • Python (習得しやすい言語)
        • Happy medium between being very opinionated and less structured
        • Given you out of the box (like user authentication, and as you can be a lot of functionality), データベース接続、ビューレンダリング）
        • 派手なフロントエンドを統合するのは難しいかもしれない。
        • Python のデータハンドリングは素晴らしい
      • Flask
        • Python (より学びやすい言語)
        • Django より意見が少なく、カスタマイズ可能
        • パッケージから得られるものが少ない (より構築しなければならない)

          • など。

      • Ruby on Rails
        • Ruby (習得しやすい言語)
        • 非常に意見が多い
        • scaffolding のような素晴らしいツールがあるので、速く構築できる
        • 多くの機能をすぐに利用できる ( ユーザー認証など、)。 データベースへの接続。
        • アセットパイプラインはフロントエンドの開発に役立ちます
        • Rubyは他のプログラミング言語よりもプログラムの実行に時間がかかります
      • Meteor
        • JavaScript（習得しやすい言語）
        • Give you out of box (like user authentication, database connections, and view rendering) the lot of functionality,
        • 最新のフロントエンドと非常によく統合されている
      • Express
        • JavaScript（習得しやすい言語）
        • 非常にカスタマイズ可能
        • 非常に軽量
        • 組み込みが少ない
        • Node は非常に高速

        Backend Framework の選択

        通常は、次のようになります。 バックエンドフレームワークを選択する際には、そのフレームワークが書かれているプログラミング言語に基づいて選択します。 たとえば、Web サイトで認証 (またはユーザーログイン) を行いたい場合、認証機能が組み込まれている Django で書くほうが、追加サービスが必要な Flask で書くよりずっと簡単です。

        Learn More

        フレームワークを使用または学習したい場合、異なるフレームワークで構築された多くのアプリケーションを紹介しますので、どれが自分にとって最も意味があるかを評価できます。 さまざまな規模や人気のあるフレームワークがもっとたくさんありますが、この記事では、人気のあるフレームワークのいくつかの簡単な概要と、どこから始めればよいかを説明します。 何を最初に学ぶべきかという正解はありません! 何事にも長所と短所がありますから、自分にとって何が一番重要かを考えて、そこから出発してください。 フレームワークはとても便利で、ほとんどの場合コードを書くのが早くなりますが、その前にしっかりとしたプログラミングの基礎があることも超重要です。 フレームワークは、フレームワーク内の他の開発者が理解できる構造を強制し、共通の機能を提供するので、車輪を再発明する必要がないからです！

        どこで学習を始めるか…

        • Django Girls Tutorial – 私は彼らのオンラインチュートリアルを通して私の最初のフレームワークを学びました！Django Girls Tutorialは、フレームワークを学ぶのに最適な場所だと思います！Django Girls Tutorialは、フレームワークを学ぶのに最適な場所です。
        • Code Academy
        • TodoMVC
        • CodeNewbie Podcast

        そして、もしアプリケーションのアイデアが必要なら…。

        • Awesome App Ideas
        • 15+ APP IDEAS TO BUILD TO LEVEL UP YOUR CODING SKILLS

        Be the first know about my posts!