Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

インラインJavaScriptやインラインスタイルの使用を避ける

エスケープされていないExpression要素やService Studioの[Extended Properties]ウィンドウを使用すると、画面内やWebブロック内でインラインのJavaScriptコードやCSSスタイルを定義することができます。

開発サイクルの中で、特定の画面やWebブロックで頻繁にインラインスタイルが利用されています(要素の間隔を手軽に調整したり、小規模なOn Click JavaScript関数を定義したりするため)。

影響

定義が簡単なインラインスタイルやインラインコードを使用すると開発スピードが上がりますが、長期的には大きな影響が発生するおそれがあります。

インラインCSSスタイルを多用するとコードの重複が発生しやすくなり、1つのスタイルの変更に複数箇所での作業が必要になるなど、プロジェクトの管理に支障が出ます。別の画面やWebブロックでの再利用ができないインラインJavaScriptスニペットも同様です。

パフォーマンス的にも、インラインスタイルやインラインスクリプトを使用するとページサイズが増大し、パフォーマンスが低下します。また、ページ全体をキャッシュしないと要素をキャッシュできないという問題もあります。インラインコードの解釈中にページの描画が停止するという点では、インラインスクリプトのほうが影響は大きくなります。

さらに、インラインスタイルやインラインスクリプトを使用する動機を考えた場合、コメントが残されないことが多いと考えられるため、コードの可読性も低下します。

ベストプラクティス

コンテンツとスタイルを分けるという原則に従い、CSSスタイルとJavaScriptコードをHTMLコードから分離し、CSSスタイルシートやJSファイルなど別の場所に移動させます。そのようにすることで、リソースのキャッシュや再利用が簡単になります。

画面やWebブロックごとに独自のカスタムCSSファイルやJavaScriptファイルを使用することができるため、1つのページの描画に必要なリソースの数を増やしすぎないように注意する必要があります。

対処法としては、テーマ階層を使用して再利用性を高めるとよいでしょう。また、JavaScript APIはモジュールファイル内に配置するようにします。

ネットワークトラフィック/ペイロードを少なくするために、JSコードはミニファイ化してください。デバッグやトラブルシューティングを行う都合上、ミニファイ化を行うのはProduction環境でのみにしてください。

  • Was this article helpful?