<% const print = "出力します" %> <p class="print"><%= print %></p>
![EJSの基本的な書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa253fb2b48b81d3121304fe976fba444d009116/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RUpTJUUzJTgxJUFFJUU1JTlGJUJBJUU2JTlDJUFDJUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlCJUI4JUUzJTgxJThEJUU2JTk2JUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jYTNiMDdiMTgzN2NkZDkwMWY4ZGI1YjBhYjMzMDg2YQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtaXdhc2h1dGFybzA2MTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM5OTZkYmU4ZDg2NmQzMTYwMGI0YzFlMGQ4MTFkOGY4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da3f4b65dc2e6292241fc7c4a58eeb716)
前書き Reactを学習していた中で "class構文・function構文" を学習しましたので、こちらでアウトプットとして記録いたします。 学習されている方にお役に立てると非常に嬉しいです。 また、コードは Github で公開しているので気になるかたはダウンロードしてみてください。 class構文 と function構文とは Reactをコーディングする方法として "class構文" と "fanction構文" があります。 これらの表記は↓になります。 import React from 'react'; class 関数名 extends React.Component { render(){ return( <React.Fragment> 処理 </React.Fragment> ); } } export default 関数名;
(著者:サイボウズ kintone開発チーム 天野 祐介) kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
Idris: A Language for Type-Driven Development Idris is a programming language designed to encourage Type-Driven Development. In type-driven development, types are tools for constructing programs. We treat the type as the plan for a program, and use the compiler and type checker as our assistant, guiding us to a complete program that satisfies the type. The more expressive the type is that we give
NHKが看板番組「クローズアップ現代+(プラス)」の終了を内々に決めたことがわかった。来年4月からは別の番組を出す方向で既に内部で検討が始まっている。 クローズアップ現代+のHP NHKでこの決定を知る複数の関係者が明かした。それによると、NHKは「クローズアップ現代+」を今年度(21年度)で終了させ、来年4月から別の番組を放送することを内部で決めた。正式な発表は無いが、既に経営幹部から担当部署に後継番組について検討するよう指示が出ているという。後継の番組は概要も決まっておらず、「クローズアップ現代」の終了を優先させた形だ。 取材に対して放送総局員は、「発表は無いが、NHKの報道を支えた番組が終わるのは確実だ」と語った。また、報道局員は、「クローズアップ現代は数年前に週1回に減らすように指示があり、それを現場が押し返した経緯が有る。今回の廃止に政治の圧力が有ったかどうかはわからないが、安倍
以前、Mac × Visual Studio Codeで始めるscss(sass)入門。環境構築も簡単にできる!という記事でも似た感じの内容の記事を書かせて頂いたことがありました! Mac × Visual Studio Codeで始めるscss(sass)入門。環境構築も簡単にできる!では、「node-sass」というプラグインを使ってSCSS環境を構築する方法について書かせていただいています。 なぜ今改めて別のプラグインを使ってSCSSの環境設定についてのブログ記事を書くのかについては、一応歴とした理由があります。 実はsass(scss)公式からの情報発信を見てもわかるように、今後はnode-dassではなくdart-sassというものを推奨するという発表が既に出されています! node-sassでは使用できた記法が、dart-sassでは使われなくなる、なんていう記法も存在していま
これでlocalhostが立ち上がります。 view viewは先ほど指定したejsを使います。ejsはざっくり説明するとjsが埋め込めるHTMLみたいな感じです。 例としてindex.ejsに下のように追加すると <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <!-- 追加部分 --> <% let content = ["あ","い","う","え","お"]; %> <% for(let i in content) { %> <h2> <%= content[i] %> </h2> <% } %> </body> </html> 実際の画面 このようにjsで書かれたfor文が
webpackでEJSをコンパイルする方法 必要なローダーは2つ。プラグインが1つです。役割としては以下のとおりです。 html-loader・・・HTMLを解析するローダーejs-plain-loader・・・EJSを解析するローダーhtml-webpack-plugin・・・HTMLファイルを生成するプラグイン ファイル構成 最初の構成ファイルとしては、以下のように配置していますので、同様に進めたい方は作成しておいてください。 dist・・・ビルド後の出力先フォルダsrc・・・ビルド前の出力元フォルダ– index.ejs・・・EJSファイルwebpack.config.js・・・webpackの設定ファイル src/index.ejsがコンパイルされてdist/index.htmlとして出力されるような動きとなります。 index.ejsは以下のような記述としてました。 (簡易的にし
webpackとは フロントエンド開発におけるオープンソースのモジュールバンドラーである。 ここで言うモジュールとは、JavascriptやCSS、画像などのファイルを示し、モジュールバンドラーとはこれらのファイルをまとめる役割を持つ。現在の最新はバージョン5となっている。 webpackを利用するメリット ・自動でファイルの依存関係を解決してくれる ・リソースをコンパクトにしてくれる ・ローダーや各種プラグインを導入する事でデフォルトの設定を上書きし、機能を拡張する事が出来る 導入方法 ①Node.jsをインストールする webpackはNode.jsで動かす為、最初にインストールしておく。 ②フロントエンドパッケージを初期化 Node.js上で動かすモジュールの管理には今回npmを使用する。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く